如何在Chart.js多折线图点击事件中获取数据集Label？

你已经离目标很近啦！其实只需要借助你代码里已经拿到的_datasetIndex，就能轻松获取到对应数据集的Label（比如Timmy或者Siri）。

修改你现有的点击事件代码就行，具体步骤如下：

• 在获取label和value之后，通过firstPoint._datasetIndex索引到对应的数据集，取出它的label属性
• 把这个数据集Label加入到弹窗内容里

修改后的完整点击事件代码如下：

document.getElementById("myChart").onclick = function(evt) {
  var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
  var firstPoint = activePoints[0];
  if (firstPoint) { // 增加判断，避免点击空白区域时报错
    var label = myChart.data.labels[firstPoint._index];
    var datasetLabel = myChart.data.datasets[firstPoint._datasetIndex].label;
    var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    alert(`${datasetLabel} - ${label}: ${value}`);
  }
};

现在点击数据点的时候，弹窗就会显示类似Timmy - Red: 12或者Siri - Blue: 38这样的完整内容啦！

内容的提问来源于stack exchange，提问作者rstalder