如何修改Highcharts饼图选中扇区的动画效果？

要实现点击饼图扇区时仅延长扇区而非整体移出的效果，你可以通过禁用默认选中行为，并自定义点击事件动态修改点的半径来实现，具体步骤如下：

核心思路 #

1. 关闭allowPointSelect的默认移出逻辑，避免系统自带的选中位移效果
2. 监听饼图点的click事件，切换选中状态
3. 通过update方法动态修改选中点的半径，配合动画实现平滑过渡
4. 维护变量记录上一个选中点，确保同一时间仅一个扇区处于选中状态

完整代码示例 #

// 记录上一个选中的饼图点
let lastSelectedPoint = null;

const chart = Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    plotOptions: {
        series: {
            // 关闭默认的选中移出效果
            allowPointSelect: false,
            // 设置饼图默认半径
            radius: 100,
            point: {
                events: {
                    click: function() {
                        const isSelected = !this.selected;

                        // 恢复上一个选中点的默认半径
                        if (lastSelectedPoint && lastSelectedPoint !== this) {
                            lastSelectedPoint.selected = false;
                            lastSelectedPoint.update({ radius: 100 }, true);
                        }

                        // 更新当前点的选中状态与半径
                        this.selected = isSelected;
                        this.update({
                            radius: isSelected ? 120 : 100
                        }, true); // 第二个参数true开启过渡动画

                        // 更新记录的选中点
                        lastSelectedPoint = isSelected ? this : null;
                    }
                }
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

关键配置说明 #

• allowPointSelect: false：禁用Highcharts默认的选中位移逻辑，避免扇区整体移出饼图
• point.events.click：自定义点击事件，处理选中状态切换和半径更新
• this.update({ radius: ... }, true)：动态修改点的半径，第二个参数true启用平滑过渡动画，让扇区延长/恢复的过程更自然
• 变量lastSelectedPoint：确保同一时间只有一个扇区处于选中状态，点击新扇区时自动恢复之前扇区的默认样式

你可以根据需求调整radius的数值（默认100，选中120），来控制扇区延长的幅度，完全匹配你的目标效果。

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