如何在HighCharts中根据Y值为柱状图柱子设置不同颜色

完全可以实现，你只需要在plotOptions.column中通过回调函数动态判断Y值并分配颜色，具体修改如下：

修改核心逻辑 #

在你的plotOptions.column配置里添加color回调函数，替换原有的column配置段：

column: {
    minPointLength: 3,
    // 新增：根据Y值动态设置柱子颜色
    color: function(point) {
        // Y值为1时返回绿色，其余返回橙色
        return point.y === 1 ? '#00A862' : '#F18A00';
    }
},

完整修改后的代码 #

HighCharts.chart(
    graph_element,
    {
        title: {
            text: ""
        },

        chart: {
            height: 250,
            type: 'column'
        },

        series: data,

        credits: { enabled: false },
        tooltip: { enabled: true },
        legend: {
            enabled: show_legend,
            align: 'center',
            width: '100%',
        },

        plotOptions: {
            bar: {
                color: "#F18A00", // 橙色
            },
            column: {
                minPointLength: 3,
                // 动态颜色判断逻辑
                color: function(point) {
                    return point.y === 1 ? '#00A862' : '#F18A00';
                }
            },
            series: {
                pointStart: start_date_unix*1000,
                pointInterval: 24*60*60*1000,
                animation: false,
            }
        },

        xAxis: {
            type: "datetime",
            tickInterval: 24*60*60*1000,
            labels: {
                format: this.active_filter == "week" ? '{value:%a}' : '{value:%b %e}',
            },
            min: start_date_unix*1000,
            max: end_date_unix*1000
        },

        yAxis: {
            min: 0,
            tickInterval: 1,
            tickAmount: 9,
        },
    }
);

关键说明 #

• 回调函数的point参数包含当前柱子的所有数据属性，通过point.y可直接获取Y值做判断
• 你可以自行替换#00A862为你需要的绿色色值，#F18A00保留原有的橙色即可

内容的提问来源于stack exchange，提问作者K. W.