Chart.js:条形图点击事件

Question

我刚刚开始使用Chart.js，我很快就变得非常沮丧。我有我的堆叠条形图工作，但是我不能让点击“事件”工作。

我在图表中找到了nnnick对GitHub的评论。js声明使用函数＜code＞getBarsAtEvent

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

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

...然而在我的< code>handleClick函数中，< code > chart . getbarsatevent 是未定义的！

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

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

那么，我该如何让点击回调为我的条形图工作呢？！

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

附言：我没有使用 GitHub 的主版本。我试过了，但它一直在尖叫，要求是未定义的，我还没有准备好包含CommonJS，以便我可以使用这个图表库。我宁愿写我自己的当当图表。相反，我下载并使用了直接从文档页面顶部的链接下载的标准内部版本。

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

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

Answer 1

我在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)
  }
 }
}

Answer 2

Hi这是选项下的单击事件，它从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

我通过浏览图表找到了问题的答案。js源代码。

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

在＜code＞图表返回的数组的第一个索引上。getElementAtEvent是一个值_datasetIndex。此值显示单击的数据集的索引。

我认为，单击的特定栏由_index的值注意到。在我问题的例子中，_index会指向chart_config.data.标签中的一个。

我的＜code＞handleClick＜code＞函数现在看起来像这样：

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

..其中，图表是图表创建的图表的引用.js在执行以下操作时：

chart = new Chart(canv, chart_config);

因此，单击选择的特定数据集可以查找为：

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

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

2021年8月7日。更新

现在有一种方法可以满足我们的需求。看看这里