获取yLabel值onclick chart js

Question

当我点击栏时，我想要y标签值。

与上面的例子一样，当我点击feb blue bar时我想要标签值，这是40

我在stackOverFlow和其他网站上查找了示例，但它们只显示了图例的标签示例。

我试过的一些代码

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

Answer 1

此演示在您点击它时会在条形图中给出值。 我不是chart.js专家，所以可能有更好的解决方案。

https://codepen.io/newschapmj1/pen/PerOzM

/* from https://github.com/chartjs/Chart.js/issues/2292 */
document.getElementById("myChart").onclick = function (evt) {
        var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
        var firstPoint = activePoints[0];
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
        alert(label + ": " + value);
    };

Answer 2

Chart.js 版本 = 3.2.1

更新的答案：这将按照官方文档中给出的方式工作。 https://www.chartjs.org/docs/latest/developers/api.html

    onClick: (evt) => {
        const points = myChart.getElementAtEventForMode(evt, 'nearest', { intersect: true }, true);
    
        if (points.length) {
            const firstPoint = points[0];
            var label = myChart.data.labels[firstPoint.index];
            var value = myChart.data.datasets[firstPoint.datasetIndex].data[firstPoint.index];
            alert(label +" : "+ value);
        }
    }

Answer 3

我需要一种从回调中获取图表的方法，因为我对多个图表使用相同的回调，所以我不能只说 myChart

这有效，传递给图表选项 - 第二个参数称为“activeElements”，可用于获取图表：

onClick: (event, activeElements) => {
    if(activeElements.length === 0){
      alert("Chart is clickable but you must click a data point to drill-down")
    }
    const chart = activeElements[0]._chart
    const activePoints = chart.getElementsAtEventForMode(event, 'point', chart.options);
    const firstPoint = activePoints[0];
    const label = chart.data.labels[firstPoint._index];
    const value = chart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    alert(label + ": " + value);
}