Chart.js 2.x - Как получить дескриптор только выбранной точки данных?

У меня есть многострочная диаграмма, нарисованная с помощью 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, когда пользователь нажимает на точки данных. Например, когда пользователь щелкает точку данных 111, которая находится в строке Prime and Fibonacci, тогда я должен получить borderColor как green, аналогично, когда пользователь щелкает точку данных 11 из строки My Second dataset, тогда я должен получить цвет границы как красный.

Я пытался использовать ниже, но это дает мне оба цвета, не имеет значения, на какой строке данных щелкнул пользователь.

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.

Заранее спасибо!


chart.js onclick datapoint
person Community    schedule 02.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

После долгой борьбы и исследований я придумал решение ниже.

Это даст мне _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. Я считаю, что это поможет многим людям, у которых такой же сценарий/проблема.

person Community    schedule 03.03.2017