我从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];