Chart.jsで凡例をホバリングすると他の線が消える

Question

凡例に「りんご」を置くと、他の線が半透明になることがありますか？ Chart.JS 2.Xについて

Answer 1

：

例：私たちは、1色0.2（可視20％）と可視1（100％のアルファを有する2つのdataset.borderColor S切り替える必要https://jsfiddle.net/rn7ube7v/4/

）。

例：データセットごとに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() 
    } 
    } 
})