Highcharts多色折线系列动态实现：如何按boxNo字段区分折线颜色

该需求完全可以实现，以下是两种常用的实现方案：

方案一：使用Highcharts内置zones配置实现单条折线连续分段变色（推荐） #

该方案折线保持连续，仅按boxNo取值切换线段颜色，无需拆分原始系列，适合仅需要变色、不需要单独控制不同box对应线段显隐的场景。

1. 先新增boxNo到颜色的映射配置，以及分段区间的生成逻辑：

// 自定义boxNo对应的显示色值，可按需调整
const boxColorMap = {
    'Box1': '#2f7ed8',
    'Box2': '#8bbc21'
};

// 生成zones分段配置
const valueZones = [];
let currentBox = boxNo[0];
for (let i = 1; i < boxNo.length; i++) {
    if (boxNo[i] !== currentBox) {
        valueZones.push({
            value: i,
            color: boxColorMap[currentBox]
        });
        currentBox = boxNo[i];
    }
}
// 补充最后一段的颜色配置
valueZones.push({
    color: boxColorMap[currentBox]
});

2. 修改原series中Value系列的配置，新增zoneAxis和zones参数：

{
    name: 'Value',
    data: value,
    type: 'spline',
    tooltip: {
        valueDecimals: 2
    },
    zoneAxis: 'x', // 指定按x轴索引划分变色区间
    zones: valueZones
}

如果需要数据点marker也同步跟随区间变色，可以在每个zone的配置中额外添加marker.color参数。

方案二：拆分多系列实现 #

如果需要不同box对应的线段支持单独在图例中隐藏/显示，可以选择将数据拆分为多个独立series的方式。

1. 新增数据拆分逻辑：

const boxSeriesMap = {};
boxNo.forEach((box, index) => {
    if (!boxSeriesMap[box]) {
        // 初始化当前box的series，无数据位置填充null保证折线连续
        boxSeriesMap[box] = {
            name: box,
            type: 'spline',
            tooltip: {valueDecimals: 2},
            data: new Array(value.length).fill(null)
        }
    }
    boxSeriesMap[box].data[index] = value[index];
});

// 转换为series数组
const boxValueSeries = Object.values(boxSeriesMap);

2. 替换原series配置中的Value系列为上述生成的boxValueSeries即可：

series: [
    ...boxValueSeries,
    {
        name: 'Minimun Std',
        data: Min,
        color: 'red',
        type: 'spline',
        dashStyle: 'longdash',
        tooltip: {
            valueDecimals: 2
        }
    },
    {
        name: 'Maximum Std',
        data: Max,
        type: 'spline',
        tooltip: {
            valueDecimals: 2
        }
    }              
]

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