我从Chart.js发现了一个comment on GitHub by nnnick,表示使用函数getBarsAtEvent,即使在Chart.js documentation中找不到这个函数(继续搜索).该文档确实提到了图表引用的getElementsAtEvent函数,但这仅适用于线图.
我在我的画布元素上设置了一个事件侦听器(正确的方式)：
canv.addEventListener('click',handleClick,false);
…在我的handleClick函数中,chart.getBarsAtEvent是未定义的！
现在,在Chart.js文档中,有一个关于注册条形图的点击事件的不同方式的声明.它与nnnick对于两年前的GitHub的评论有很大的不同.
在Global Chart Defaults中,您可以为图表设置一个onClick函数.我添加了一个onClick函数到我的图表配置,它什么也没做…
那么,如何让我的点击回调适用于我的条形图？
任何帮助将不胜感激.谢谢！
P.S .:我没有使用GitHub的主版本.我试过,但是它一直在尖叫,需求是未定义的,我还没有准备好包含CommonJS,以便我可以使用这个图表库.我宁愿写我自己的dang图表.相反,我下载并正在使用Standard Build版本,我直接从documentation page顶部的链接下载.
示例：以下是我使用的配置示例：
var chart_config = {
type: 'bar',data: {
labels: ['One','Two','Three'],datasets: [
{
label: 'Dataset 1',backgroundColor: '#848484',data: [4,2,6]
},{
label: 'Dataset 2',data: [1,6,3]
},{
label: 'Dataset 3',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的第3727行提供的标准版,是方法.getElementAtEvent.此方法返回我点击的“图表元素”.这里有足够的数据来确定在点击的数据集的向下查看中显示的数据.
在chart.getElementAtEvent返回的数组的第一个索引上是一个值_datasetIndex.此值显示被点击的数据集的索引.
我相信点击的具体栏被值_index注明.在我的问题的例子中,_index将在chart_config.data.labels中指向一个.
我的handleClick函数现在看起来像这样：
function handleClick(evt)
{
var activeElement = chart.getElementAtEvent(evt);
..图表是chart.js创建的图表的参考：
chart = new Chart(canv,chart_config);
因此,点击选择的具体数据集可以找到：
chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
