如何在气泡图上捕获 onClick 事件？

Question

我正在尝试在气泡图中的气泡上捕捉 onlick 事件。我想将点击气泡的标签记录到控制台中。我写了一个函数来完成这项工作，实际上看起来像这样

$("#myChart").click(function(evt) {
    var activePoints = myBubbleChart.getElementAtEvent(evt);
    console.log(activePoints.label);
}); 

每次我单击气泡时，此函数都会将“未定义”记录到控制台中。我什至试过getBarsAtEvent 和getSegmentsAtEvent 他们都没有工作。我的代码有什么问题？谁能告诉我如何获得我点击的气泡的标签值？

Answer 1

获取点击项的名称、当前数据集或当前数据集中的项很简单：

onClick: (e, i) => {
            const bubbleSelected = i[0];
            console.log(this.widget.data.bubblesData[bubbleSelected.datasetIndex].tooltipData[bubbleSelected.index]);
        }

参数 i 包含一个点击元素数组，其中包含以下内容：

有了这些图像数据，知道你选择了哪个数据集，点击了数据集的哪个元素，你就可以从一个数据数组中，从当前位置的当前数据集中获取数据、名称或任何你想要的.

在我的例子中，我在 bubblesData 中有一个数据集列表（datasetIndex），在每个数据集中有一个名为 tooltipData 的对象，其中包含数据集每个元素的数据列表（索引）。

如果您想查看如何修改工具提示以显示它，请访问此链接：Chart JS Show HTML in Tooltip

文档：

• https://www.chartjs.org/docs/latest/configuration/interactions.html
• https://stackoverflow.com/a/44160605/11770490

Answer 2

Chart.js 选项有一个内置的onClick 属性（参见documentation）。

它是这样工作的：

options: {
     onClick: function(e) {
        var element = this.getElementAtEvent(e);

        // If you click on at least 1 element ...
        if (element.length > 0) {
            // Logs it
            console.log(element[0]);

            // Here we get the data linked to the clicked bubble ...
            var datasetLabel = this.config.data.datasets[element[0]._datasetIndex].label;
            // data gives you `x`, `y` and `r` values
            var data = this.config.data.datasets[element[0]._datasetIndex].data[element[0]._index];
        }
    }
}

查看this jsFiddle 获取完整示例。