Google Bar Chart设置多颜色不生效问题排查求助

Google 条形图的colors配置生效规则为：数组内的每个颜色对应一个独立数值系列（即DataTable中定义的一个number类型数据列），不会自动给同一系列下的不同条形分配不同颜色。
你的现有代码中仅定义了1个数值列，所有条形都属于同一个数据系列，因此无论colors数组中配置多少个颜色，都只会读取第一个颜色渲染全部条形，其余颜色没有可匹配的系列，自然不会生效。

推荐使用样式角色列的方式实现单系列条形分色，不需要修改后端返回的数据结构，适配动态数据场景：

• 保留原有数据加载、DataTable初始化逻辑不变
• 在配置DataView的列时，新增一个角色为style的计算列，按行索引给每个条形分配对应颜色
• 原有全局colors配置可保留也可删除，style列的样式优先级高于全局配置

修改后的核心代码片段如下：

// 其余逻辑保持不变，仅修改view.setColumns部分
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
    {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation",
    },
    // 新增样式列，为每个条形分配独立颜色
    {
        calc: function(dataTable, rowIdx) {
            const barColors = ['#f8aa00', '#00778d'];
            // 按行循环取色，条形数量超过颜色数时自动从头循环匹配
            return barColors[rowIdx % barColors.length];
        },
        type: "string",
        role: "style"
    }
]);

// options配置无需改动
var options = {
    width: '350',
    height: '300',
    'overflow': 'hidden',
    bar: { groupWidth: "65%" },
    legend: { position: "none" },
    colors: ['#f8aa00', '#00778d'],
    fontName: 'Montserrat',
    chartArea: {
        left: "17%",
        top: "2%",
        height: "250",
        width: "250"
    }
};

其他可选方案 #

如果不想使用style列，也可以将原有单数值列的结构拆分为多数值列，每个列对应一个条形，此时全局colors配置会自动按列顺序匹配颜色。但该方案需要动态调整DataTable的列定义，当后端返回的条形数量不固定时适配成本更高，不推荐使用。

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