Chartjs在工具提示上显示隐藏的数据 [英] Chartjs show hidden data on tooltip

问题描述

美好的一天，

我有一个带有多个数据集的条形图.我想隐藏除一个条之外的所有条形(如果需要，则为总计)，并且在工具提示上，我想显示所有数据集中的所有数据.不幸的是，工具提示仅显示可见的数据集.有谁知道如何显示所有数据集?

I have a bar chart with multiple datasets for the chart. I would like to hide all the bars except for one (a Totals if you will), and on the Tooltip, I want to show all of the data in all the datasets. Unfortunately, the tooltip only shows the visible datasets. Does anyone know how to show all the data sets?

如果您使用

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

将鼠标悬停在图表上，并且不会显示第一个数据集(标记为第一个标签").如何在工具提示中显示?有人知道吗?

Hover over the chart and the first dataset (labeled 'First Label') is not shown. How do I show that in the tooltip? Does anyone know?

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
                            }]
          }
});

谢谢，蒂姆

推荐答案

如果隐藏除一个以外的所有条，则可以定义

If you hide all bars except one, you can define a tooltips.callback function for label. This function collects the labels and appropriate values from all datasets using Array.map() and returns a string array.

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

请在下面查看您的修改后的代码:

Please have a look at your amended code below:

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>

如果要显示图例并允许用户通过鼠标单击各个图例标签来显示其他栏，则将为每个可见栏调用一次回调函数.因此，您必须确保仅返回一次标签数组，而在所有其他情况下都返回 null .以下代码仅返回总计"栏的标签数组.

If you wanted to display the legend and allow users to show additional bars through a mouse click on individual legend labels, the callback function would be invoked once for each visible bar. Therefore you would have to make sure to return the labels array only once and return null in all other cases. The following code would return the labels array only for the 'Totals' bar.

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在工具提示上显示隐藏的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！