Question

我的chart.js条形图中的数据集标签未显示正确的值。我正在尝试不同的图表配置，但似乎没有任何工作。这是我的JS Fiddle。我想要实现的是条形图应该显示'HIGH：30'或'MED：25'之类的值，但是现在工具提示只显示第一个标签（HIGH：30，HIGH：25，HIGH：56）所有3个酒吧。这很奇怪。需要一些帮助。

到目前为止我尝试过的更多细节：如果我使用arroChartConfig1，它会为所有图形提供工具提示标题为HIGH并标记为HIGH：30（红色条），HIGH：25（黄色条），HIGH：56（蓝色条）。

如果我使用arroChartConfig2，它会给出正确的标题和标签，但只显示一个标签为HIGH，MED，LOW的图例。

如果我在图例中使用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选项必须位于标签选项内，并且该函数将整个配置作为参数传递，因此您无法返回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回调并返回颜色，具体取决于悬停的数据集。

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

这是使用labelColor回调更新的第二个JSFiddle。

Chart.js数据集标签问题

1 个答案: