Chart.js:条形图点击事件

2022-01-22 00:00:00 javascript chart.js

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

I've just started working with Chart.js, and I am getting very frustrated very quickly. I have my stacked bar chart working, but I can't get the click "events" to work.

我发现 nnnick 在 GitHub 上的评论 来自 Chart.js 的声明使用函数 getBarsAtEvent，即使在 Chart.js 文档(继续，搜索它).文档确实提到了 chart 参考的 getElementsAtEvent 函数，但这仅适用于折线图.

I have found a comment on GitHub by nnnick from Chart.js stating to use the function getBarsAtEvent, even though this function cannot be found in the Chart.js documentation at all (go ahead, do a search for it). The documentation does mention the getElementsAtEvent function of the chart reference, but that is for Line Charts only.

我在我的画布元素上设置了一个事件监听器(正确的方式):

I set an event listener (the right way) on my canvas element:

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

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

...yet in my handleClick function, chart.getBarsAtEvent is undefined!

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

Now, in the Chart.js document, there is a statement about a different way to register the click event for the bar chart. It is much different than nnnick's comment on GitHub from 2 years ago.

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

In the Global Chart Defaults you can set an onClick function for your chart. I added an onClick function to my chart configuration, and it did nothing...

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

So, how the heck do I get the on-click-callback to work for my bar chart?!

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

Any help would be greatly appreciated. Thanks!

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

P.S.: I am not using the master build from GitHub. I tried, but it kept screaming that require is undefined and I was not ready to include CommonJS just so that I could use this chart library. I would rather write my own dang charts. Instead, I downloaded and am using the Standard Build version that I downloaded straight from the link at the top of the documentation page.

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

EXAMPLE: Here is an example of the configuration I am using:

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
    }
};

推荐答案

我通过查看 Chart.js 源码.

在 Chart.js 标准构建的第 3727 行提供的是方法 .getElementAtEvent.这个方法返回给我图表元素".被点击了.这里有足够的数据来确定要在单击的数据集的深入视图中显示哪些数据.

Provided at line 3727 of Chart.js, Standard Build, is the method .getElementAtEvent. This method returns me the "chart element" that was clicked on. There is sufficent data here to determine what data to show in a drill-down view of the dataset clicked on.

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

On the first index of the array returned by chart.getElementAtEvent is a value _datasetIndex. This value shows the index of the dataset that was clicked on.

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

The specific bar that was clicked on, I believe, is noted by the value _index. In my example in my question, _index would point to One in chart_config.data.labels.

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

My handleClick function now looks like this:

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

..where chart是chart.js在做时创建的图表的引用:

..where chart is the reference of the chart created by chart.js when doing:

chart = new Chart(canv, chart_config);

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

The specific set of data that was selected by the click can therefore be found as:

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

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

And there you have it. I now have a datapoint that I can build a query from to display the data of the bar that was clicked on.

2021 年 8 月 7 日.更新

现在我们正在寻找一种方法.看看这里

There is now a method for what we are looking for. Take a look at here

相关文章