Исчезать другие строки при наведении легенды в Chart.js

Question

Как я могу сделать другие линии полупрозрачными, когда наведу "Яблоки" в Legend?

Answer 1

Для Chart.JS 2.x:

Пример: https://jsfiddle.net/rn7ube7v/4/

Нам нужно переключиться между 2 dataset.borderColors, где 1 цвет имеет альфа 0.2 (Видимый 20%) и 1 (100% видно).

Например: используя HSL-цвета для циклической радуги для каждого набора данных, мы сохраняем оба обычных цвета как dataset.accentColor а также dataset.accentFadedColor когда это не сфокусировано.

function steppedHslColor(ratio, alpha) {
  return "hsla(" + 360 * ratio + ', 60%, 55%, ' + alpha + ')';
}
function colorizeDatasets(datasets) {
  for (var i = 0; i < datasets.length; i++) {
    var dataset = datasets[i]

    dataset.accentColor = steppedHslColor(i / datasets.length, 1)
    dataset.accentFadedColor = steppedHslColor(i / datasets.length, 0.2)

    dataset.backgroundColor = dataset.accentColor
    dataset.borderColor = dataset.accentColor
  }
  return datasets
}

colorizeDatasets(datasets)

Тогда мы подключаем options.legend.onHover(mouseEvent, legendItem) применить правильный цвет.

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: datasets,
  },
  options: {
    legend: {
      onHover: function(e, legendItem) {
        if (myChart.hoveringLegendIndex != legendItem.datasetIndex) {
          myChart.hoveringLegendIndex = legendItem.datasetIndex
          for (var i = 0; i < myChart.data.datasets.length; i++) {
            var dataset = myChart.data.datasets[i]
            if (i == legendItem.datasetIndex) {
              dataset.borderColor = dataset.accentColor
            } else {
              dataset.borderColor = dataset.accentFadedColor
            }
          }
          myChart.update()
        }
      }
    },
  },
});

Там нет config.legend.onLeave обратный вызов, к сожалению, поэтому нам нужно подключить canvas.onmousemove и посмотрим, покинет ли он область легенды.

myChart.hoveringLegendIndex = -1
myChart.canvas.addEventListener('mousemove', function(e) {
  if (myChart.hoveringLegendIndex >= 0) {
    if (e.layerX < myChart.legend.left || myChart.legend.right < e.layerX
      || e.layerY < myChart.legend.top || myChart.legend.bottom < e.layerY
    ) {
      myChart.hoveringLegendIndex = -1
      for (var i = 0; i < myChart.data.datasets.length; i++) {
        var dataset = myChart.data.datasets[i]
        dataset.borderColor = dataset.accentColor
      }
      myChart.update()
    }
  }
})