Chartjs 在工具提示上显示隐藏数据

Question

美好的一天，

我有一个包含多个图表数据集的条形图。我想隐藏除一个以外的所有条形图（如果您愿意，可以隐藏总计条形图），并且在工具提示上，我想显示所有数据集中的所有数据。不幸的是，工具提示仅显示可见数据集。有谁知道如何显示所有数据集？

如果你运行这与

<canvas id="myChart" width="400" height="400"></canvas>

将鼠标悬停在图表上，第一个数据集（标记为 'First Label'）未显示。我如何在工具提示中显示它？有人知道吗？

var ds1 = [], ds2 = [], ds3 = [], ds4 = [], ds5 = [], ds6 = [], labels = [];

for(var i = 0; i < 2; i++){
    labels.push('Label: ' + i);
  ds1.push(i);
  ds2.push(i+1);
  ds3.push(i+2);
  ds4.push(i+3);
  ds5.push(i+4);
  ds6.push(i+5);
}
const dataSets = {
labels: labels,
datasets: [
                {
            label: 'First Label',
          hidden: true,
          data: ds1
        },{
          label: 'Second Label',
          data: ds2
        },{
          label: 'Third Label',
          data: ds3
        },{
          label: 'Fourth Label',
          data: ds4        
        },{
          label: 'Fifth Label',
          data: ds5        
        },{
          label: 'Totals',
          data: ds6
        }
    ]
}
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: dataSets,
                    elements: {
                        rectangle: {
                            borderWidth: 2
                        }
                    },
                    responsive: true,
                    legend: {
                        display: false
                    },
                    title: {
                        display: false
                    },
                    scales: {
                        yAxes: [
                            {
                                barThickness: 15
                            }
                        ],
                        xAxes: [
                            {
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: 50
                                },
                                minBarLength: 5
                            }]
          }
});

谢谢，蒂姆

Answer 1

如果您隐藏除一个之外的所有条，您可以定义一个 tooltips.callback function for label. This function collects the labels and appropriate values from all datasets using Array.map() 和 return 一个 string array。

tooltips: {
  callbacks: {
    label: (tooltipItem, chart) => dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
  }
},

请查看下面修改后的代码：

var ds1 = [], ds2 = [], ds3 = [], ds4 = [], ds5 = [], ds6 = [], labels = [];

for (var i = 0; i < 2; i++) {
  labels.push('Label: ' + i);
  ds1.push(i);
  ds2.push(i + 1);
  ds3.push(i + 2);
  ds4.push(i + 3);
  ds5.push(i + 4);
  ds6.push(5 * i + 10);
};

const dataSets = {
  labels: labels,
  datasets: [{
    label: 'First Label',
    hidden: true,
    data: ds1
  }, {
    label: 'Second Label',
    hidden: true,
    data: ds2
  }, {
    label: 'Third Label',
    hidden: true,
    data: ds3
  }, {
    label: 'Fourth Label',
    hidden: true,
    data: ds4
  }, {
    label: 'Fifth Label',
    hidden: true,
    data: ds5
  }, {
    label: 'Totals',
    data: ds6
  }]
};

var myChart = new Chart('myChart', {
  type: 'horizontalBar',
  responsive: true,
  data: dataSets,
  elements: {
    rectangle: {
      borderWidth: 2
    }
  },
  options: {
    legend: {
      display: false
    },
    title: {
      display: false
    },
    tooltips: {
      callbacks: {
        label: (tooltipItem, chart) => dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index])
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          min: 0,
          stepSize: 1
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="100"></canvas>

如果您想显示图例并允许用户通过鼠标单击各个图例标签来显示其他条形图，则将为每个可见条形图调用一次回调函数。因此，您必须确保仅 return 标签数组一次，而在所有其他情况下 return null。以下代码将 return 标签数组仅用于 'Totals' 栏。

tooltips: {
  callbacks: {
    label: (tooltipItem, chart) => {
      if (tooltipItem.datasetIndex == dataSets.datasets.length - 1) {
        return dataSets.datasets.map(ds => ds.label + ': ' + ds.data[tooltipItem.index]);
      }
      return null;
    }
  }
},

This would not work however, if the user decides to hide the 'Totals' bar. The code could however be improved to also overcome this limitation.

Chartjs 在工具提示上显示隐藏数据

Chartjs show hidden data on tooltip

tooltip

chart.js