Chart.jsデータセットラベルの問題

Question

chart.js棒グラフのデータセットラベルに正しい値が表示されません。私は別のチャート構成を試していますが、何も動作していないようです。 ここは私のJS Fiddleです。達成したいのは、棒グラフに「HIGH：30」や「MED：25」のような値が表示されますが、今はツールチップに最初のラベル（HIGH：30、HIGH：25、HIGH：56）のみが表示されています。すべての3つのバー。これはおかしい。助けが必要です。

私がarroChartConfig1を使用すると、すべてのグラフでハイと表示され、HIGH：30（赤いバー）、HIGH：25（黄色のバー）、HIGH：56 （青色のバー）。

arroChartConfig2を使用すると、正しいタイトルとラベルが表示されますが、ラベルHIGH、MED、LOWの凡例が1つだけ表示されます。

legendではarroChartConfig3の別のラベルを使用していますが、ツールチップのタイトルとラベルの値はarroChartConfig1と同じです。

ありがとうございます。

var oMyBarChart; 
var ctx = document.getElementById("canvas").getContext("2d"); 
function GetSelectedChartType(sSelectedOption){ 
return sSelectedOption.options[sSelectedOption.selectedIndex].value; 
} 
arroLevels = ["HIGH","MED","LOW"]; 
arroLevelsCount = [30,25,56]; 
arroLevelColors = 
['rgba(230,0,0,1)','rgba(255,255,79,1)','rgba(150,198,250,1)']; 
arroDataset=[]; 
sChartType = GetSelectedChartType(document.getElementById('chartSelector')); 
arroLevels.map(function(sValue,iIndex){ 
    let oData = [arroLevelsCount[iIndex]]; 
    let sColorData = arroLevelColors[iIndex]; 
    arroDataset.push({ 
     label: sValue, 
     data: oData, 
     backgroundColor: sColorData, 
     pointStyle: 'triangle', 
    }); 
}); 
barChartData = { 
    labels: arroLevels, 
    datasets: arroDataset, 
} 

arroChartConfig1 = { 
    type: sChartType, 
    data: barChartData, 
    options: { 
     responsive: true, 
     legend: { 
      position: 'right', 
      generateLabels: function(data){ 
      return data.text; 
      } 
     }, 
     title: { 
      display: true, 
      text: 'My Bar Chart' 
     }, 
     tooltips: { 
      callbacks:{ 
      label: function(ttitem,data){ 
       return ttitem.xLabel+": "+ttitem.yLabel 
      } 
     } 
     } 
    } 
    } 
arroChartConfig2 = { 
     type: sChartType, 
     data: { 
     datasets: [{ 
      label: arroLevels, 
      data: arroLevelsCount, 
      backgroundColor: arroLevelColors, 
      pointStyle: 'triangle', 
     }], 
     labels: arroLevels 
     }, 
     options: { 
     responsive: true, 
     legend: { 
      position: 'right', 
      generateLabels: function(data){ 
      return data.text; 
      } 
     }, 
     title: { 
      display: true, 
      text: 'My Bar Chart' 
     }, 
     tooltips: { 
      callbacks:{ 
      label: function(ttitem,data){ 
       return ttitem.xLabel+": "+ttitem.yLabel 
      } 
      } 
     } 
     } 
    } 
arroChartConfig3 = { 
     type: sChartType, 
     data: { 
     datasets: [{ 
      label: "HIGH", 
      data: ["30"], 
      backgroundColor: 'rgba(230,0,0,1)', 
      pointStyle: 'triangle', 
     }, 
     { 
      label: "MED", 
      data: ["25"], 
      backgroundColor: 'rgba(255,255,79,1)', 
      pointStyle: 'triangle', 
     }, 
     { 
      label: "LOW", 
      data: ["56"], 
      backgroundColor: 'rgba(150,198,250,1)', 
      pointStyle: 'triangle', 
     }], 
     labels: ["HIGH","MED","LOW"] 
     }, 
     options: { 
     responsive: true, 
     legend: { 
      position: 'right', 
     generateLabels: function(data){ 
      return data.text; 
      } 
     }, 
     title: { 
      display: true, 
      text: 'My Bar Chart' 
     }, 
     tooltips: { 
      callbacks:{ 
      title: function(ttitem,data){ 
       return ''; 
      }, 
      label: function(ttitem,data){ 
       return ttitem.xLabel+": "+ttitem.yLabel; 
      } 
      } 
     } 
     } 
    } 
    //oMyBarChart = new Chart(ctx,arroChartConfig1); 
    //oMyBarChart = new Chart(ctx,arroChartConfig2); 
    oMyBarChart = new Chart(ctx,arroChartConfig3); 

Answer 1

スタンドアロンデータセットとしてごarroLevelsCount配列内のすべての要素を考慮するならば、あなたが好きなものを達成する方が簡単かもしれません。だから、最も簡単な設定は次のようになり（とここでそのJSFiddleです）になります。

arroChartConfig = { 
    type: sChartType, 
    data: { 
    datasets: [{ 
     label: arroLevels[0], 
     data: [arroLevelsCount[0] ], 
     backgroundColor: arroLevelColors[0], 
     pointStyle: 'triangle', 
    }, 
    { 
     label: arroLevels[1], 
     data: [ arroLevelsCount[1] ], 
     backgroundColor: arroLevelColors[1], 
     pointStyle: 'triangle', 
    }, 
    { 
     label: arroLevels[2], 
     data: [ arroLevelsCount[2] ], 
     backgroundColor: arroLevelColors[2], 
     pointStyle: 'triangle', 
    }], 
    labels: arroLevels 
    }, 
    options: { 
    tooltips: { 
     callbacks: { 
     title: function(chart, data) { 
      return data.labels[chart[0].datasetIndex]; 
     } 
     } 
    } 
    } 
} 

しかし、あなたはあなたのアプローチに固執したい場合に考慮すべきいくつかあります。 generateLabelsオプションはlabelsオプションの内側になければなりません。関数はconfig全体をパラメータとして渡しますので、代わりにdata.textを返すことはできません。代わりにラベルを反復処理する必要があります。 generateLabels関数は、返り値として配列legend itemを必要とします。凡例のオプション上記すべての点を考慮すると

は、次のようになります。ここでは

legend: { 
    position: 'right', 
    labels: {    
    generateLabels: function(chart) { 
     return chart.data.labels.map(function(label, i) { 
      return { 
       text: label, 
       fillStyle: chart.data.datasets[0].backgroundColor[i] 
      }; 
     }); 
    } 
    } 
} 

は、あなたの更新JSFiddleです。

編集： あなたはlabelColorコールバックaswellを追加し、ホバーデータセットに応じて色を返す必要がありますあなたのアプローチのための正しいツールチップラベルの色を表示します。

labelColor: function(ttitem, data) { 
      return { 
      borderColor: arroLevelColors[ttitem.index], 
      backgroundColor: arroLevelColors[ttitem.index] 
      }; 

これはlabelColorコールバックで更新された第2 JSFiddleです。