求助：为Highcharts环形图添加圆角边框与渐变色

一、渐变色效果实现 #

为环形图的每个扇区添加渐变色，可通过为数据点配置color渐变对象实现：

• 遍历原始数据，为每个数据点生成线性/径向渐变；
• 使用Highcharts.color().brighten()工具函数生成基础色的明暗变体，构建自然的渐变过渡。

二、圆角边框实现 #

Highcharts 10+版本支持直接配置内外圆角：

• borderRadius：设置扇区外侧的圆角半径；
• innerBorderRadius：设置环形内圈的圆角半径。
  若使用低版本，需通过chart.events.render事件手动修改SVG路径实现内圈圆角（推荐升级至新版本简化开发流程）。

完整修改代码 #

$(function() {
    var data = <%= raw @array_color.to_json %>;
    // 为每个数据点生成渐变色
    data = data.map(item => {
        const baseColor = item.color;
        return {
            ...item,
            color: {
                linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
                stops: [
                    [0, Highcharts.color(baseColor).brighten(0.2).get()], // 渐变浅色调
                    [1, baseColor] // 原始基础色
                ]
            }
        };
    });

    var total_project_count = <%= @total_project_count %>;
    var total_project_text = `<span class="project_count_text">TOTAL PROJECTS</span><br/><span class="project_count_dummy"></span><br/><span class="project_count_count">${total_project_count}</span>`;

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie',
        },
        credits: false,
        plotOptions: {
            pie: {
                borderWidth: 6,
                innerSize: '80%',
                borderRadius: 8, // 扇区外圆角半径
                innerBorderRadius: 8, // 环形内圈圆角半径（Highcharts 10+支持）
                slicedOffset: 5,
                stacking: 'normal',
                dataLabels: {
                    connectorWidth: 2
                },
                allowPointSelect: true,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function(event) {
                            update_rag(this.options.status);
                        }
                    }
                }
            },
        },
        title: {
            verticalAlign: 'middle',
            floating: true,
            text: total_project_text,
        },
        series: [{
            data: data,
        }],
    });
});

说明 #

• 渐变方向可通过linearGradient的x1/y1/x2/y2调整（如x1:0,y1:0,x2:0,y2:1为垂直渐变）；
• 圆角半径数值可根据视觉需求调整，单位为像素；
• 若后端返回的@array_color未包含color字段，需先为每个数据项指定基础色值。

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