Chart.js:条形图单击事件

Question

我刚刚开始使用Chart.js,我很快就感到非常沮丧.我的堆积条形图有效,但我无法点击"事件".

我已经在nnnick Chart.js中找到了对GitHub的评论,说明要使用该函数getBarsAtEvent,即使在Chart.js文档中根本找不到这个函数(继续,搜索它).文档确实提到了引用的getElementsAtEvent功能chart,但仅适用于折线图.

我在canvas元素上设置了一个事件监听器(正确的方式):

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

......但在我的handleClick功能中,尚未chart.getBarsAtEvent定义!

现在,在Chart.js文档中,有一个关于为条形图注册click事件的不同方法的声明.这nnnick与2年前对GitHub的评论截然不同.

在全局图表默认值中,您可以onClick为图表设置功能.我onClick在图表配置中添加了一个函数,它没有做任何事......

那么,我如何获得点击回调以适用于我的条形图？!

任何帮助将不胜感激.谢谢!

PS:我没有使用GitHub的主版本.我试过,但它一直在尖叫,require is undefined我还没准备好包括CommonJS,以便我可以使用这个图表库.我宁愿写自己的dang图表.相反,我下载并使用我直接从文档页面顶部的链接下载的标准版本版本.

示例:以下是我正在使用的配置示例:

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

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

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

返回的数组的第一个索引chart.getElementAtEvent是一个值_datasetIndex.此值显示单击的数据集的索引.

我相信,点击的特定栏会被价值所记录_index.在我在我的问题例如,_index将指向One中chart_config.data.labels.

我的handleClick功能现在看起来像这样:

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

..where chart是chart.js在执行时创建的图表的引用:

chart = new Chart(canv, chart_config);

因此,点击选择的特定数据集可以在以下位置找到:

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

你有它.我现在有一个数据点,我可以构建一个查询来显示被点击的栏的数据.

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

Chartjs V3.4.1

在查看了旧版本的解决方案后，这就是 v3 中对我有用的方法：

const onClick = (event, clickedElements) => {
  if (clickedElements.length === 0) return

  const { dataIndex, raw } = clickedElements[0].element.$context
  const barLabel = event.chart.data.labels[dataIndex]
  ...
}

• raw是单击的栏的值。
• barLabel是单击栏的标签。

您需要将其传递onClick给条形图配置：

const barConfig = {
  ...
  options: {
    responsive: true,
    onClick,
    ...
  }
}

Answer 4

我在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 5

您可以像这样使用 onClick。

var worstCells3GBoxChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: lbls,
                    datasets: [{
                        label: 'Worst Cells by 3G',
                        data: datas,
                        backgroundColor: getColorsUptoArray('bg', datas.length),
                        borderColor: getColorsUptoArray('br', datas.length),
                        borderWidth: 1
                    }]
                },
                options: {
                    legend: {
                        display: false
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    },
                    onClick: function (e) {
                        debugger;
                        var activePointLabel = this.getElementsAtEvent(e)[0]._model.label;
                        alert(activePointLabel);
                    }
                }
            });