如何知道在具有多个数据的 chart.js 条形图上单击了哪个条？答案

【问题标题】：How to know which bar is clicked on chart.js bar chart with multiple data?如何知道在具有多个数据的 chart.js 条形图上单击了哪个条？
【发布时间】：2019-05-07 23:57:04
【问题描述】：

我使用chart.js 创建了一些图表。我将点击事件添加到每列中有多个条形图（多个数据）的条形图，如下所示：

html

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

var canvas = document.getElementById('myChart');
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            backgroundColor: "rgba(255,99,132,0.2)",
            borderColor: "rgba(255,99,132,1)",
            borderWidth: 2,
            hoverBackgroundColor: "rgba(255,99,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [65, 59, 20, 81, 56, 55, 40],
        },
        {
            label: "My second dataset",
            backgroundColor: "rgba(99,255,132,0.2)",
            borderColor: "rgba(99,255,132,1)",
            borderWidth: 1,
            hoverBackgroundColor: "rgba(99,255,132,0.4)",
            hoverBorderColor: "rgba(255,99,132,1)",
            data: [35, 29, 10, 50, 70, 33, 65],
        },
    ]
};
var option = {
    scales: {
    yAxes:[{
        gridLines: {
            display:true,
          color:"rgba(255,99,132,0.2)"
        }
    }],
    xAxes:[{
            gridLines: {
            display:false
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas,{
    data:data,
  options:option
});

canvas.onclick = function(e) {
    console.log(e);
  var bars = myBarChart.getElementsAtEvent(e);
  console.log(bars)
}

你可以看到结果here in jsfiddle。我的问题是我想为每个栏添加链接。所以我应该知道点击了whish栏。 getElementsAtEvent(e) 返回一个数据集大小的数组（在我的示例中，大小为 2）。例如，当我单击四月的柱时，四月的两个柱都返回了。但我想知道它们中的哪一个被准确地点击了。

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您应该改用getElementAtEvent(e)（注意元素的单数形式）。这将使您获得单击的单个项目，而您使用的方法将返回相同数据索引处的项目列表。

来自.getElementAtEvent(e) 的文档：

在您的 Chart 实例上调用 getElementAtEvent(event) 并传递事件或 jQuery 事件的参数，将返回事件位置处的单个元素。如果范围内有多个项目，则仅返回第一个。此方法返回的值是一个带有单个参数的数组。数组用于在 get*AtEvent 方法之间保持一致的 API。

来自.getElementsAtEvent(e) 的文档：

查找事件点下的元素，然后返回相同数据索引处的所有元素。这在内部用于“标签”模式突出显示。

在您的 Chart 实例上调用 getElementsAtEvent(event) 并传递事件或 jQuery 事件的参数，将返回位于该事件相同位置的点元素。

【讨论】：