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

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: 函数(evt, 数组) {
        if (array.length != 0) {
            var 位置 = array[0]._index;
            var activeElement = this.tooltip._data.datasets[0].data[位置]
            控制台.log(activeElement);
        } 别的 {
            console.log("你选择了背景！");            
        }  
    }

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

Answer 2

这个解决方案使用了chartjs的

getElementAtEvent

方法，但是使用它需要引用Chart本身，而不是Vue组件。我们可以从

$data._chart

属性中得到它。要在父 Vue 组件中使用它，我们使用 $refs，如下所示。

因此父级定义了图表选项

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

然后是父方法，使用

$refs

和

$data._chart

来获取图表。我们获得了 datasetIndex 和值以及工具提示

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

Answer 3

要直接在模板中添加 onClick 事件处理程序，您可以在模板中创建一个选项对象并在其中添加 onClick 处理程序。

<Line
      v-else
      :ref="chartRef"
      :data="powerLoadChartData"
      :options="getChartOptions(powerLoadChartData.unit)"
      @click="onClickChart"
 />
<script lang="ts" setup>
function onClickChart(evt, elements) {
  if (elements && elements.length > 0) {
    const element = elements[0];
    const datasetIndex = element.datasetIndex;
    const dataIndex = element.index;
    const dataset = this.data.datasets[datasetIndex];
    const xValue = this.data.labels[dataIndex];
    const yValue = dataset.data[dataIndex];
    console.log("xValue:", xValue);
    console.log("yValue:", yValue);
  } else {
    console.log("You selected the background!");
  }
}
</script>