Highcharts面积图：填充红色spline与Nuclear区域及层级优化问题

解决方案 #

1. 无需手动叠加数值让Solar显示在Nuclear上方 #

利用Highcharts的堆叠特性，调整系列顺序让Solar自动堆叠在Nuclear之后，图表会自动累加前面所有堆叠系列的数值，不用手动计算总和。具体操作：

• 调整series数组顺序，让Gas、Hydro、Nuclear按从下到上的堆叠顺序排列，Solar紧跟在Nuclear之后
• 保持plotOptions.area.stacking: 'normal'配置，所有需要堆叠的系列会自动累加

2. 填充Solar与Nuclear之间的区域为红色 #

把Solar的类型从spline改为area，借助堆叠特性自动填充Nuclear顶部到Solar线条的区域，同时配置平滑线条模拟spline效果：

• 设置Solar的type: 'area'
• 配置线条颜色为红色，填充色用半透明红色保证视觉层次感
• 开启smoothing: true让线条保持平滑曲线

修改后的完整代码 #

var energyData = [
    { time: '12:00am', hydro: 200, solar: 0 },
    { time: '2:00am', hydro: 200, solar: 0 },
    { time: '4:00am', hydro: 200, solar: 0 },
    { time: '6:00am', hydro: 200, solar: 100 },
    { time: '8:00am', hydro: 200, solar: 100 },
    { time: '10:00am', hydro: 200, solar: 100 },
    { time: '12:00pm', hydro: 200, solar: 200 },
    { time: '2:00pm', hydro: 200, solar: 200 },
    { time: '4:00pm', hydro: 200, solar: 100 },
    { time: '6:00pm', hydro: 200, solar: 100 },
    { time: '8:00pm', hydro: 200, solar: 0 },
    { time: '10:00pm', hydro: 200, solar: 0 }
];

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Power Consumption'
    },
    xAxis: {
        categories: energyData.map(point => point.time),
        title: {
            text: 'Time'
        }
    },
    yAxis: {
        title: {
            text: 'MegaWatts'
        }
    },
    plotOptions: {
        area: {
            stacking: 'normal',
            smoothing: true, // 模拟spline的平滑线条
            marker: {
                enabled: false
            }
        }
    },
    series: [
        {
            name: 'Gas',
            data: energyData.map(point => [point.time, 500]),
            color: 'gray',
            type: 'area'
        },
        {
            name: 'Hydro',
            data: energyData.map(point => [point.time, point.hydro]),
            color: 'blue',
            type: 'area'
        },
        {
            name: 'Nuclear',
            data: energyData.map(point => [point.time, 300]),
            color: 'yellow',
            type: 'area'
        },
        {
            name: 'Solar',
            data: energyData.map(point => [point.time, point.solar]),
            color: 'red', // 线条颜色
            fillColor: 'rgba(255, 0, 0, 0.3)', // 半透明红色填充
            type: 'area'
        },
        {
            name: 'Curve',
            data: [
                [energyData[0].time, 500],
                ['10:00am', 1500],
                ['8:00pm', 2000],
                ['10:00pm', 500]
            ],
            color: 'rgba(0, 0, 0, 0.5)',
            type: 'spline',
            marker: {
                enabled: false
            }
        }
    ]
});

关键说明 #

• 堆叠顺序：series数组的顺序决定堆叠层级，越靠前的系列在越下方，因此Gas、Hydro、Nuclear依次堆叠，Solar自动叠加前面所有系列的数值，无需手动计算总和。
• 区域填充：Solar改为area类型后，堆叠特性会自动填充该系列与前一个系列（Nuclear）之间的区域，设置fillColor即可实现红色填充。
• 平滑线条：smoothing: true让area的线条保持spline的平滑效果，满足曲线样式需求。

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