Chart.js：条形图点击事件

Question

我刚开始使用 Chart.js，很快就感到非常沮丧。我的堆叠条形图在工作，但我无法让点击“事件”工作。

我 在 GitHub 上找到了 nnnick 来自 Chart.js 的评论， 指出使用函数 getBarsAtEvent ，即使在 Chart.js 文档 中根本找不到这个函数（继续，搜索它）。该文档确实提到了 getElementsAtEvent chart 参考的功能，但这仅适用于折线图。

我在画布元素上设置了一个事件监听器（正确的方式）：

 canv.addEventListener('click', handleClick, false);

…然而在我的 handleClick 函数中， chart.getBarsAtEvent 是未定义的！

现在，在 Chart.js 文档中，有一个关于为条形图注册点击事件的不同方法的声明。它与 nnnick 2 年前在 GitHub 上的评论大不相同。

在 全局图表默认值 中，您可以为图表设置 onClick 函数。我在我的图表配置中添加了一个 onClick 函数，但它什么也没做…

那么，到底如何让点击回调为我的条形图工作？！

任何帮助将不胜感激。谢谢！

PS： 我没有使用来自 GitHub 的主版本。我试过了，但它一直尖叫着 require is undefined 我还没有准备好包含 CommonJS 以便我可以使用这个图表库。我宁愿写我自己的当图表。相反，我下载并使用了我直接从 文档页面 顶部的链接下载的 标准构建 版本。

示例： 这是我正在使用的配置示例：

 var chart_config = {
    type: 'bar',
    data: {
        labels: ['One', 'Two', 'Three'],
        datasets: [
            {
                label: 'Dataset 1',
                backgroundColor: '#848484',
                data: [4, 2, 6]
            },
            {
                label: 'Dataset 2',
                backgroundColor: '#848484',
                data: [1, 6, 3]
            },
            {
                label: 'Dataset 3',
                backgroundColor: '#848484',
                data: [7, 5, 2]
            }
        ]
    },
    options: {
        title: {
            display: false,
            text: 'Stacked Bars'
        },
        tooltips: {
            mode: 'label'
        },
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        },
        onClick: handleClick
    }
};

原文由 WebWanderer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过查看 Chart.js 源代码，我设法找到了问题的答案。

在标准构建的 Chart.js 的第 3727 行提供了方法 .getElementAtEvent 。此方法返回我单击的“图表元素”。这里有足够的数据来确定在单击的数据集的向下钻取视图中显示哪些数据。

chart.getElementAtEvent 返回的数组的第一个索引是一个值 _datasetIndex 。该值显示被单击的数据集的索引。

我相信，被点击的特定栏由值 _index 。在我的问题示例中， _index 将指向 One 中的 chart_config.data.labels 。

我的 handleClick 函数现在看起来像这样：

 function handleClick(evt)
{
    var activeElement = chart.getElementAtEvent(evt);

..其中 chart 是 chart.js 在执行以下操作时创建的图表的参考：

 chart = new Chart(canv, chart_config);

因此，可以找到通过点击选择的特定数据集：

 chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];

你有它。我现在有一个数据点，我可以从中构建查询以显示被单击的栏的数据。

2021 年 8 月 7 日更新

现在有一种方法可以满足我们的需求。看看 这里

原文由 WebWanderer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您好，这是选项下的点击事件，它从 x 和 y 轴获取值

onClick: function(c,i) {
    e = i[0];
    console.log(e._index)
    var x_value = this.data.labels[e._index];
    var y_value = this.data.datasets[0].data[e._index];
    console.log(x_value);
    console.log(y_value);
}

原文由 Vaimeo 发布，翻译遵循 CC BY-SA 3.0 许可协议