如何在Highcharts折线图中按阈值为两组数据设置系列线条颜色？

要实现两组数据各自按自身阈值划分线条颜色，直接用Highcharts的zones配置项即可，它能按数值区间为折线设置不同颜色，且每个系列可独立配置。

优化后的可运行代码 #

Highcharts.chart('container', {
    yAxis: {
        title: { text: '数值' }
    },
    series: [
        {
            name: '系列1（阈值5）',
            data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
            // 按阈值5划分三个区间的颜色
            zones: [
                { value: 5, color: 'green' }, // 数值<5的线段/点
                { value: 10, color: 'red' }, // 5≤数值<10的线段/点
                { color: '#90ed7d' } // 数值≥10的线段/点
            ],
            tooltip: { valueDecimals: 2 }
        },
        {
            name: '系列2（阈值10）',
            data: [-9, -6, 1, 6, 11, 16, 11, 11, 6, 1, -4],
            // 按阈值10划分三个区间的颜色
            zones: [
                { value: 10, color: 'red' }, // 数值<10的线段/点
                { value: 12, color: 'cyan' }, // 10≤数值<12的线段/点
                { color: 'magenta' } // 数值≥12的线段/点
            ]
        }
    ]
});

核心要点 #

• 无需threshold/negativeColor：zones的优先级更高，直接用它定义区间颜色即可，避免属性冲突。
• 区间规则：每个zones项的value是区间的上限，未指定value的最后一项作为默认区间（覆盖所有超出前面区间的数值）。
• 系列独立配置：每个系列的zones完全独立，可分别对应各自的阈值和颜色需求。

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