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

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

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