javascript - 如何知道在包含多个数据的chart.js条形图上单击了哪个条形？

Question

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

html

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

js

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 。 我的问题是我想为每个栏添加链接。所以我应该知道愿望栏被点击了。 getElementsAtEvent(e) 返回一个数据集大小的数组(在我的示例中大小为 2)。例如，当我单击四月的柱时，四月的两个柱都返回。但我想知道其中哪个被准确点击。

Answer 1

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

来自 .getElementAtEvent(e) 的文档:

Calling getElementAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the single element at the event position. If there are multiple items within range, only the first is returned. The value returned from this method is an array with a single parameter. An array is used to keep a consistent API between the get*AtEvent methods.

来自 .getElementsAtEvent(e) 的文档:

Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting.

Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.