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

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

标签： vue.jsvuejs2chart.jsvue-chartjs

Answer 1

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

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

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