ChartJS 如何在图表js中悬停一个数据集时使其他数据集变暗?

js4nwp54  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(186)

我有一个双圈饼图。当鼠标悬停在一个特定的数据集上时,它必须保持其颜色,而其他所有的东西都应该变暗,如图picture所示。换句话说,我需要与悬停效果相反的效果。这是我的代码https://jsfiddle.net/arrruzhan11/mufw4r07/(注意,下面的代码片段中的悬停效果不起作用)。
第一个

bfnvny8b

bfnvny8b1#

您可以定义onHover函数,如下所示:

onHover: (e, activeElements, chart) => {
  const datasets = chart.config.data.datasets;
  if (activeElements[0]) {
    let ctx = activeElements[0].element.$context;
    datasets[ctx.datasetIndex ? 0 : 1].backgroundColor = hoverBgColor;
    datasets[ctx.datasetIndex ? 1 : 0].backgroundColor = bgColor;
  } else {
    datasets.forEach(ds => ds.backgroundColor = bgColor);
  }
  chart.update();
}

有关详细信息,请在此处查阅Chart.js文档。
请查看修改后的代码并了解其工作原理。请注意,此示例使用Chart.js v3.8.2,即当前最新版本的库。
第一个

相关问题