ChartJS饼图点击扇区放大、切换选中时原扇区自动缩小的实现问题

架构老林

2026-9-24

解决方案

你现有代码的核心问题是仅用开关变量记录是否有扇区被放大，但未记录具体是哪个扇区，因此切换点击新扇区时无法对旧的已放大扇区做还原操作。正确逻辑是额外存储当前已激活（放大）扇区的索引，每次点击时先还原旧扇区，再处理新点击的扇区。

完整实现代码

前置全局变量定义

// 存储当前已放大的扇区索引，初始为null表示无选中
let activeSegmentIndex = null;
// 存储饼图默认外半径，避免反复加减出现数值误差
let DEFAULT_OUTER_RADIUS = null;

图表初始化时补充默认半径获取

在你的Chart实例创建完成后，加入这行代码获取默认半径，无需手动写死数值：

// 替换为你自己的图表实例变量名
DEFAULT_OUTER_RADIUS = myChart.getDatasetMeta(0).data[0].outerRadius;

onClick事件配置

onClick: (evt, item) => {
    // 点击空白区域无选中项时直接返回
    if (!item || item.length === 0) return;
    const currentItem = item[0];
    const currentIndex = currentItem.index;
    const chartInstance = evt.chart;

    // 第一步：还原之前已放大的扇区
    if (activeSegmentIndex !== null) {
        const prevSegment = chartInstance.getDatasetMeta(0).data[activeSegmentIndex];
        prevSegment.outerRadius = DEFAULT_OUTER_RADIUS;
    }

    // 第二步：处理当前点击的扇区
    if (currentIndex === activeSegmentIndex) {
        // 点击的是已放大的扇区，直接取消选中
        activeSegmentIndex = null;
    } else {
        // 点击的是新扇区，放大并更新激活索引
        currentItem.element.outerRadius = DEFAULT_OUTER_RADIUS + 10;
        activeSegmentIndex = currentIndex;
    }

    // 重绘图表让改动生效
    chartInstance.update();
}