如何通过点击事件访问或获取图表上特定图形的值？

Question

我使用 vue-chartjs 绘制一些图表，如折线图、条形图等

在我的项目中，有很多情况在图表中使用特定值或数据标签。使用 vue-chartjs 的工具提示选项，我可以在悬停时检查数据项的值或标签。

我想知道如何在单击（未悬停）时访问或获取与图表上的点匹配的特定数据的信息。这是我关于图表选项的代码。

    chartOptions: {
    responsive: false,
    onClick: function(evt){
        //Some logic to get value of label of specific data...(type, label, value, ...)
    }

在我的例子中，我使用 'onclick' 选项访问点触发的 'click' 事件的特定数据。在 'onClick' 回调中，我检查了所有图表元素和数据集等。

当触发点击事件时，如何获取图形点（如线）或图形条（如条）上标签特定数据项的值？

Answer 1

我找不到适合我的解决方案，但我深入研究了一下，这就是我想到的。


    onClick: function(evt, array) {
        if (array.length != 0) {
            var position = array[0]._index;
            var activeElement = this.tooltip._data.datasets[0].data[position]
            console.log(activeElement);
        } else {
            console.log("You selected the background!");            
        }  
    }

这将获取您单击的数组中的位置，并从您单击的位置抓取数据。这可能不是最漂亮或最好的例子，但它对我有用。

Answer 2

此解决方案使用 chartjs 的 getElementAtEvent 方法，但要使用该方法，您需要引用图表本身，而不是 Vue 组件。我们可以从 $data._chart 属性中得到它。要在父 Vue 组件中使用它，我们使用 $refs 如下所示`。

所以父级定义了图表选项

     {
        ...
        options: {
          onClick: this.handleChartClick
        }
        ...
     }

然后是父方法，使用 $refs 和 $data._chart 来获取图表。我们得到数据集索引和值以及工具提示

handleChartClick(evt, elements) {
  var chart = this.$refs.periodChart.$data._chart;
  const chartIndex = chart.getElementAtEvent(evt);
  if (chartIndex.length !== 0) {
    const datasetIndex = chartIndex[0]._datasetIndex;
    const position = chartIndex[0]._index;
    const info = {
      datasetIndex: datasetIndex,
      valueIndex: position,
      label: chart.tooltip._data.labels[position],
      value: chart.tooltip._data.datasets[datasetIndex].data[position]
    };
    console.log(info);
  } else {
    console.log("Background clicked");
  }

如何通过点击事件访问或获取图表上特定图形的值？

How to access or get value of specific graph on chart plot by click event?

vue.js

vuejs2

chart.js

vue-chartjs