如何让Highcharts面积图的填充线条从起点到终点保持平滑？

问题说明 #

使用Highcharts的area类型图表绘制数据时，当前填充区域的边界线条为生硬的直线连接，希望实现自然流畅的平滑曲线填充面积效果。

效果对比 #

• 当前效果：填充区域边界由折线构成，线条棱角分明，无平滑过渡
• 目标效果：填充区域边界为连续流畅的平滑曲线

修改方案 #

在Highcharts配置的plotOptions.series中添加平滑曲线相关属性，即可实现目标效果：

修改后的完整代码 #

const bitAreaChart = Highcharts.chart('bitkpicontainer', {
    chart: {
        height: '320'
    },
    colors: colors,
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // 不显示虚拟年份
            day: '%b-%y'
        },
        minPadding: 0,
        maxPadding: 0,
        style: {
            textOverflow: 'none',
            color: '#000000'
        }
    },
    yAxis: {
        min: 0,
        labels: {
            useHTML: true,
            style:{
                fontSize: '10px',
                'font-family': 'ProximaNova-Light',
                color: '#71808C',
                'line-height': '11px'
            }
        },
        title: {
            text: "Amount($)",
        }
    },
    tooltip: {
        formatter: function(this: any) {
            return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
        }
    },
    exporting: {
        buttons: {
            contextButton: {
                enabled: false
            }
        }
    },
    plotOptions: {
        series: {
            marker: {
                enabled: false,
                symbol: 'circle',
                radius: 2,
                states: {
                    hover: {
                        enabled: true
                    }
                }
            },
            // 新增平滑配置
            smoothing: 1, // 0为完全直线，1为最大平滑度，取值范围0-1
            linecap: 'round' // 可选，让线条端点/转折更圆润
        }
    },
    series: [{
        type: 'area',
        name: 'Behaviour Value',
        data: bitData
    }, {
        type: 'area',
        name: 'Influence Value',
        data: relationshipData
    }, {
        type: 'area',
        name: 'Transaction Value',
        data: quantumData
    }]
} as any);

关键配置说明 #

• smoothing: 1：启用最大程度的贝塞尔曲线平滑，将area的折线边界转换为平滑曲线，可根据需求调整数值（0~1之间）控制平滑程度
• linecap: 'round'：可选配置，优化线条端点和转折处的视觉效果，让整体平滑感更自然

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