javascript - 是否可以在 Chart.Js 中调用指令？

Question

在 Angular JS 和 chart.js 中，可以在悬停时显示工具提示，甚至可以在您单击条形图时调用函数(假设您使用的是来自 chart.js 的条形图)。

但是，是否可以在单击条形图时调用指令？或者我应该为此使用 canvas.js 吗？

我指的指令是自定义的，它作为包含一些值的窗口弹出。它不一定是指令，它甚至可以是您在单击图表中的条形图后调用的 Angular 组件。

Answer 1

我通过查看 Chart.js source code 找到了问题的答案.

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

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

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

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

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