2

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

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

4

2 回答 2

3

我找不到适合我的解决方案，但我挖了一点，这就是我想出的。

    onClick：函数（evt，数组）{
        如果（数组长度！= 0）{
            var 位置 = 数组 [0]._index;
            var activeElement = this.tooltip._data.datasets[0].data[position]
            console.log(activeElement);
        } 别的 {
            console.log("你选择了背景！");            
        }  
    }

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

于 2019-01-07T19:24:01.427 回答
1

该解决方案使用getElementAtEventchartjs的方法，但要使用它需要引用图表本身，而不是Vue组件。我们可以从 $data._chart物业那里得到。要在父 Vue 组件中使用它，我们使用如下所示的 $refs 。

所以 parent 定义图表选项

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

然后是 parent 方法，使用$refswith$data._chart来获取图表。我们得到 datasetIndex 和 value 以及工具提示

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");
  }
于 2021-02-19T15:34:52.050 回答