Question

Chart.js：条形图点击事件

2016-05-09

146323

javascript chart.js

我刚刚开始使用Chart.js，很快我感到非常沮丧。我的堆叠条图表工作，但是我无法获得单击的“事件”来工作。

我找到了在github上评论 nnnick 来自Chart.js的，即使此功能无法使用该函数 getBarsateVent ，即使此功能也无法可以在 chart.js文档中找到）。该文档确实提到了 getElementsatevent 图表 参考的函数，但这仅适用于线图。

我设置了事件侦听器（正确的方式）在我的画布元素上：

155972641

...然而，在我的 handleclick 函数中， chart.getbarsatevent nofected！

现在，在Chart.js文档中，有一个关于注册条形图的单击事件的不同方法。这与 nnnick 在2年前对GitHub的评论。

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

所以，我如何使点击式返回返回为我的bar工作图表？！

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

P.S。： 我不使用GitHub的主构建。我尝试过，但是它一直在尖叫，<代码>要求是未定义的，我还没有准备好包括commonjs，以便我可以使用此图表库。我宁愿写自己的Dang图表。相反，我下载并使用 标准构建 我从文档页面的链接上直接下载的版本> 示例： 这是我正在使用的配置的示例：

282525734

Answer 1

我通过查看 Chart.js 源代码找到了问题的答案。

Chart.js 标准版第 3727 行提供了方法 .getElementAtEvent 。此方法返回被单击的“图表元素”。这里有足够的数据来确定在单击的数据集的深入视图中显示哪些数据。

在 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];

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

2021 年 8 月 7 日。更新

现在有一种方法可以满足我们的要求。请查看此处

Answer 2

嗨，这是选项下的点击事件，它从 x 轴和 y 轴获取值

onClick: function(c,i) {
    e = i[0];
    console.log(e._index)
    var x_value = this.data.labels[e._index];
    var y_value = this.data.datasets[0].data[e._index];
    console.log(x_value);
    console.log(y_value);
}

Answer 3

我在 https://github.com/valor-software/ng2-charts/issues/489 找到了此解决方案。

public chartClicked(e: any): void {
  if (e.active.length > 0) {
  const chart = e.active[0]._chart;
  const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
   // get the internal index of slice in pie chart
   const clickedElementIndex = activePoints[0]._index;
   const label = chart.data.labels[clickedElementIndex];
   // get value by index
   const value = chart.data.datasets[0].data[clickedElementIndex];
   console.log(clickedElementIndex, label, value)
  }
 }
}