是否可以为 Chart.js 图表中的每个数据集值定义数据属性？答案

【问题标题】：Is it possible to define data attributes for each dataset value in a Chart.js chart?是否可以为 Chart.js 图表中的每个数据集值定义数据属性？
【发布时间】：2020-01-04 03:02:51
【问题描述】：

是否可以为 Chart.js 图表中的每个数据集值定义 HTML5 数据属性？目标是使用与目标数据集值相关的附加信息来增强默认工具提示信息（例如 X 轴值和 Y 轴值）。

在下面的示例中，显示了一个图表，显示了 6 个孩子使用的尿布总数。当工具提示显示时，它会显示孩子的姓名和尿布的数量。我希望工具提示也显示年龄和性别，并认为工具提示回调可以从附加到每个数据集值的数据属性中获取这些。

我查看了 Chart.js 文档并搜索了 StackOverflow 等在线论坛，但均未成功。

var myChart = new Chart(document.getElementById('myChart'), {
    type: 'bar',
    data: {
        labels: ['Gabriel', 'Zelie', 'Santiago', 'Serafina', 'Berenice', 'Pia'],
        datasets: [{ label: 'Diapers', data: [1050, 1224, 1382, 1166, 1471, 0] }]
    },
    options: {
        legend: { display: false },
        scales: { yAxes: [{ ticks: { beginAtZero: true } }] },
        title: { display: true, text: 'Total Diapers Used' },
        tooltips: {
            titleFontSize: 18,
            callbacks: {
                label: function(tooltipItem, data) {
                    var defaultLabel = data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel;
                    var age = "Age: <age>";
                    var gender = "Gender: <gender>";
                    var labels = [defaultLabel, age, gender];
                    return labels;
                }
            }
        }
    }
});
</script>

【问题讨论】：

标签： chart.js

【解决方案1】：

这取决于您如何构建数据。在我的示例中，我创建了一个包含所有数据的对象。

let dataObject = {
  Gabriel: {
    diapers: 40,
    age: 4
  }, 
  // Same structure here...
  Zelie: {...}, 
  Santiago: {...}, 
  Serafina: {...}, 
  Berenice: {...}, 
  Pia: {...}
}

通过这种方式，您可以使用

轻松访问工具提示中的数据

tooltips: {
  callbacks: {
    label: function(tooltipItem, data){
      return ['Name: '+tooltipItem.label, 'Diapers: '+tooltipItem.value, 'Age: '+dataObject[tooltipItem.label].age]
    }
  }
}

你应该在 jsbin 中得到你需要的所有信息。

https://jsbin.com/qiyeyohavo/1/edit?html,js,output

【讨论】：