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”回调中，我检查了所有图表元素和数据集等。

触发点击事件后，如何在图的点（如线）或图的条（如条）上获取标签特定dataItem的值？

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方法，但要使用该方法，您需要引用Chart本身，而不是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");
  }

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

2 个答案: