如何在Chart.js中鼠标悬停数据集时加深其他数据集颜色？

要实现你需要的反向悬停效果，不能依赖Chart.js默认的hoverBackgroundColor配置，需要通过自定义onHover事件动态修改数据集颜色，具体实现如下：

完整解决方案代码 #

修改后的JavaScript代码 #

var ctx = document.getElementById("myChart");

// 预存原始颜色和加深后的颜色（也可通过函数动态生成深色）
const originalColors = [
  ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db', '#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b'],
  ['#8e1212', '#e72323', '#db31a1', '#a931db', '#5d31db', '#3185db','#31dbc5', '#31db59', '#c5db31', '#db9931', '#e8511c', '#ff7b7b']
];
const darkenColors = [
  ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8','#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3'],
  ['#693737', '#ac5e5e', '#a86491', '#9464a8', '#7664a8', '#6486a8', '#64a89f', '#64a874', '#9fa864', '#a88e64', '#ab6e59', '#d7a3a3']
];

var doughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
      datasets: [
        {
        label: 'Fact',
        data: [70, 115, 85, 75, 92, 55, 50, 100, 78, 93, 117, 78],
        backgroundColor: originalColors[0],
        hoverOffset: 10,
        },
        {
        label: 'Plan',
        data: [66, 67, 107, 65, 67, 64, 64, 65, 128, 82, 85, 90],
        backgroundColor: originalColors[1],
        hoverOffset: 10,}
        ]},
        options: {
            tooltips: {
            callbacks: {
                beforeBody: function (chartItems, data) {
                const hoverval = document.getElementById('hoverval');
                if (chartItems.length > 0) {
                  var datasetIndex = chartItems[0].datasetIndex;
                  var label = data.datasets[datasetIndex].label;
                  hoverval.innerText = `${label}`;
                } else {
                  hoverval.innerText = '';
                }
                                }
                },
            },
            responsive: true,
            legend: {
                position: "left",
              align: "start",
              fullSize: true,
              },
            hover: {
                mode: 'dataset',
                intersect: false // 确保鼠标在数据集区域内就触发悬停
            },
            onHover: function(event, chartElements) {
              // 获取当前悬停的数据集索引
              const hoveredDatasetIndex = chartElements.length > 0 ? chartElements[0]._datasetIndex : null;
              
              // 遍历所有数据集，设置对应颜色
              this.data.datasets.forEach((dataset, index) => {
                if (hoveredDatasetIndex !== null && index !== hoveredDatasetIndex) {
                  // 非悬停数据集使用加深后的颜色
                  dataset.backgroundColor = darkenColors[index];
                } else {
                  // 悬停数据集或无悬停时使用原始颜色
                  dataset.backgroundColor = originalColors[index];
                }
              });
              
              // 更新图表
              this.update();
            }
        }
});

HTML代码（保持不变） #

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<h3>
How to darken other datasets when hovering one dataset in chart js?
</h3>
<div id="hoverval"> </div>
<canvas id="myChart" width="470" height="200"></canvas>

CSS代码（保持不变） #

#hoverval {
    padding: 10px;
    border: solid 1px grey;
    background: yellow;
}

核心逻辑说明 #

1. 预存颜色数组：提前定义原始颜色和加深后的颜色集合，避免重复计算，提升交互流畅度。
2. 监听悬停事件：通过onHover事件捕获鼠标状态，判断当前是否有悬停的数据集。
3. 动态切换颜色：
   • 当悬停某一数据集时，将其他数据集的背景色替换为加深版本，当前悬停数据集保持原色。
   • 鼠标移出图表时，所有数据集恢复原始颜色。
4. 优化交互体验：设置hover.intersect: false，确保鼠标在环形数据集区域内即可触发悬停事件，无需精准点击。

内容的提问来源于stack exchange，提问作者Aruzhan Amangeldieva