如何实现Chart.js饼图选中扇区持续保持hover高亮状态？

要实现点击饼图扇区后持续显示hover高亮（颜色加深+扇区偏移），直到手动重置的效果，你可以通过跟踪选中索引+脚本化样式选项的方式实现，具体方案如下：

完整实现代码 #

HTML（添加重置按钮） #

<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>
<button id="resetBtn">重置选中状态</button>

CSS #

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
#resetBtn {
  margin-top: 10px;
  padding: 8px 16px;
  cursor: pointer;
}

JavaScript #

const foods = [
  { value: 60, label: 'Orange' },
  { value: 40, label: 'Banana' },
  { value: 20, label: 'Strawberry' },
];

// 跟踪当前选中的扇区索引，初始为未选中状态
let selectedIndex = null;

const data = {
  labels: foods.map(food => food.label),
  datasets: [
    {
      label: 'Foods',
      data: foods.map(food => food.value),
      // 脚本化背景色：选中扇区用hover高亮色，否则用默认浅色调
      backgroundColor: (context) => {
        const hoverColors = [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
        ];
        const defaultColors = [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
        ];
        return context.dataIndex === selectedIndex ? hoverColors[context.dataIndex] : defaultColors[context.dataIndex];
      },
      hoverBackgroundColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
      ],
      borderWidth: 0,
      hoverOffset: 4,
      // 脚本化永久偏移：选中扇区保持偏移效果，未选中时无偏移
      offset: (context) => {
        return context.dataIndex === selectedIndex ? 4 : 0;
      }
    },
  ],
};

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'pie',
  data,
  options: {
    onClick: (event, elements) => {
      if (elements.length > 0) {
        const clickedIndex = elements[0].index;
        // 点击已选中扇区则取消选中，否则设置为选中
        selectedIndex = selectedIndex === clickedIndex ? null : clickedIndex;
        // 更新图表触发样式重渲染
        myChart.update();
      }
    }
  }
});

// 重置按钮逻辑
document.getElementById('resetBtn').addEventListener('click', () => {
  selectedIndex = null;
  myChart.update();
});

核心实现思路 #

1. 选中状态跟踪：用selectedIndex变量记录当前选中的扇区索引，点击时切换选中/取消选中状态
2. 脚本化样式配置：利用Chart.js的脚本化选项功能，在backgroundColor和offset中根据选中索引动态返回对应样式，让选中扇区持续显示hover时的高亮色和偏移效果
3. 点击事件处理：通过options.onClick捕获饼图点击事件，更新选中索引后调用update()触发图表重渲染
4. 重置功能：通过按钮清空选中索引并更新图表，恢复初始状态

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