在Chart.js中悬停图例时淡出其他线条

在Chart.js中悬停图例时淡出其他线条,chart.js,chart.js2,Chart.js,Chart.js2,当我将苹果悬停在图例中时,如何使其他线条半透明?对于Chart.JS 2.x: 例如: 我们需要在2种dataset.BorderColor之间切换,其中1种颜色的alpha值为0.2 20%可见,1种颜色的alpha值为100% 例如:使用HSL颜色为每个数据集循环彩虹,我们将常规颜色存储为dataset.accentColor和dataset.accentFadedColor,以备不聚焦时使用 function steppedHslColor(ratio, alpha) { return

当我将苹果悬停在图例中时,如何使其他线条半透明?

对于Chart.JS 2.x:

例如:

我们需要在2种dataset.BorderColor之间切换,其中1种颜色的alpha值为0.2 20%可见,1种颜色的alpha值为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)
不幸的是,没有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()
    }
  }
})

回答得好!我正在“onClick”上使用此功能。图表在第一次单击后更新,但随后停止更新。dataset.borderColor的值正在更新,但图表未更新。
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()
    }
  }
})