如何在Highcharts中为动态数据实现三种颜色区分（0值为绿色）

我明白你现在的需求——给动态生成的数据设置三种颜色：负数红、0值绿、正数蓝，之前用linkedTo的方法因为数据动态生成不好落地对吧？其实咱们可以直接在JS里处理动态数据，给每个数据点单独指定颜色，完美适配动态场景。

修改步骤： #

• 先取出PHP动态输出的原始数据，遍历每个数值，根据大小分配对应颜色，把单个数值转换成带y值和color属性的对象；
• 将处理好的数组传给Highcharts的series.data即可。

修改后的完整代码： #

$(function () {
    // 获取PHP动态生成的原始数据
    var rawData = <?php echo json_encode(${"jamnya".$i});?>;
    // 处理数据，给每个点添加颜色属性
    var processedData = rawData.map(function(value) {
        let pointColor;
        if (value < 0) {
            pointColor = 'red';
        } else if (value === 0) {
            pointColor = 'green';
        } else {
            pointColor = '#1122DD';
        }
        return {
            y: value,
            color: pointColor
        };
    });

    $('#jugernaut<?php echo $a; ?>').highcharts({
        chart: {
            type: 'column',
            spacing:[0,0,0,0],
            height: 450
        },
        title: {
            text: '<?php echo $key->carline.' '.$key->conveyeor ?>',
            style: {
                fontSize: '18px',
                fontFamily: 'Verdana, sans-serif'
            }
        },
        yAxis: {
            visible: false,
            tickLength:1,
            title: { text: '' },
            labels: {
                style: { fontSize: '17px', fontWeight: 'bold' }
            },
            plotLines: [{
                color: '#C0C0C0',
                width: 5,
                value: 0
            }]
        },
        xAxis:{
            tickInterval:1,
            labels: {
                style: { fontSize: '17px', fontWeight: 'bold' }
            }
        },
        credits: {
            text: '',
            enable:false
        },
        plotOptions:{
            marker:{ enabled: false }
        },
        series: [
            {
                name: ' ',
                type: 'spline',
                data: processedData, // 使用处理后的带颜色数据
                // 可删除原全局color/negativeColor配置，点级颜色优先级更高
            }
        ]
    });
});

补充说明： #

• 这种方法完全适配动态数据，不管你的rawData生成逻辑如何，遍历处理后就能给每个点分配对应颜色；
• 后续要调整颜色规则，只需要修改map函数里的判断逻辑即可，灵活性拉满；
• 原配置里的color和negativeColor可以删掉，因为单个数据点的颜色设置优先级会覆盖全局配置。

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