Chart.js 2.x - 如何获取仅单击数据点的句柄？

Question

我有一个使用 chart.js 绘制的多线图表。当用户单击特定点时，我只想获得单击点（数据点）的 borderColor 。

为了便于理解，我在我的多线图表中有两条线，名为 Prime and Fibonacci 和 My Second dataset，分别使用数据集 [12, 13, 15, 17, 111, 113, 117, 9, 3, 0] 和 [2, 3, 5, 7, 11, 13, 17, 13, 21, 34] 绘制，两条线都有一个分别使用不同的边框颜色 green 和 red。

现在，当用户点击数据点时，我只想捕获点击点的 borderColor。例如，当用户单击来自行 Prime and Fibonacci 的数据点 111 时，我应该将 borderColor 设置为 green，类似地，当用户单击来自 [=] 的数据点 11 14=] 行，那么我应该将边框颜色设置为红色。

我试过使用下面的方法，但是 它给了我两种颜色，而不管用户点击了哪条线数据点。

var activePoints = lineChart.getElementsAtEvent(evt);
// Below code always gives me green and red, doesn't matter which line's data point the user clicked
activePoints[0]._chart.config.data.datasets[0].borderColor // Always gives green 
activePoints[0]._chart.config.data.datasets[1].borderColor // Always gives red

我该怎么做？要快速设置，请使用 jsbin.

提前致谢！

Answer 1

经过长期的奋斗和研究，我想出了以下解决方案。

它会给我 _datasetIndex 这有助于理解从 Prime and Fibonacci 或 My Second dataset 行触发的点击事件。如果 activePoints[0]._datasetIndex 是 0 那么它来自 Prime and Fibonacci，同样如果 activePoints[0]._datasetIndex 是 1 那么它来自 My Second dataset.

ctx.onclick = function(evt) {
    var activePoints = lineChart.getElementsAtEvent(evt);

    if (activePoints.length) {
      var mouse_position = Chart.helpers.getRelativePosition(evt, lineChart.chart);

      activePoints = $.grep(activePoints, function(activePoint, index) {
        var leftX = activePoint._model.x - 5,
            rightX = activePoint._model.x + 5,
            topY = activePoint._model.y + 5,
            bottomY = activePoint._model.y - 5;

        return mouse_position.x >= leftX && mouse_position.x <=rightX && mouse_position.y >= bottomY && mouse_position.y <= topY;
      });
      console.log(activePoints[0]._datasetIndex);
    }    
};

也就是说，这是工作示例 jsbin。我相信这会帮助很多有同样问题的人 scenario/problem。

Chart.js 2.x - 如何获取仅单击数据点的句柄？

Chart.js 2.x - How to get handle of only clicked datapoint?

onclick

datapoint

chart.js