javascript - Chart.js:是否可以在单击堆积条形图中获取数据集的标签？

Question

当单击特定数据集的堆栈时，我试图获取与堆积条形图中的数据集关联的标签名称。

这是我的代码:

    var dataPack1 = [100, 200, 300, 400, 500];
    var dataPack2 = [150, 450, 350, 250, 150];
    var dates = ["May 1", "May 2", "May 3", "May 4", "May 5"];
    var bar_chart = new Chart(bar_ctx, {
        type: 'bar',
        data: {
            labels: dates,
            datasets: [
            {
                label: 'Bowser',
                data: dataPack1,
                backgroundColor: "grey"                    
            },
            {
                label: 'Mario',
                data: dataPack2,
                backgroundColor: "maroon"
            },
            ]
        },
        options: {
            scales: {
              xAxes: [{ 
                stacked: true, 
                gridLines: { display: false },
                }],
              yAxes: [{ 
                stacked: true
                }],
            }, // scales
            onClick: function(evt, element) {
              //var val = element.something such that val is assigned 'Bowser'
            }
        } // options
       }
    );

现在，当我点击 500 时，我想要一个变量 val 被分配为“Bowser”。那可能吗？

Here是它的 jsfiddle。

Answer 1

可以使用原型(prototype)方法.getElementAtEvent(e)像这样点击元素

onClick: function(evt, element) {
  var activePoints = bar_chart.getElementAtEvent(evt);
  console.log(activePoints[0]._model.datasetLabel);
}

JSFiddle

或者您可以将其作为事件处理程序附加到图表元素上

bar_ctx.onclick = function(evt) {
  var activePoints = bar_chart.getElementAtEvent(evt);
  console.log(activePoints[0]._model.datasetLabel);
};

JSFiddle