文章/答案/技术大牛

发布

社区首页 >问答首页 >如何通过单击事件访问或获取图表上特定图形的值？

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

Stack Overflow用户

提问于 2018-07-07 04:39:55

回答 1查看 3.8K关注 0票数 3

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

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

我想知道如何访问或获取特定数据的信息，在点击时与图形上的点匹配(而不是悬停)。这是我关于图表选项的代码。

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

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

当触发单击事件时，如何在图形点(如线)或图条(如条)上获得标签特定dataItem的值？

chart.js

vue-chartjs

vue.js

vuejs2

回答 1

Stack Overflow用户

发布于 2021-02-19 15:34:52

此解决方案使用chartjs的getElementAtEvent方法，但要使用它，需要引用图表本身，而不是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");
  }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51219973

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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