Google Charts柱状图：如何同时显示注释并保留自定义颜色

你原本通过给DataTable添加style角色列实现了单系列内柱状图的自定义颜色，但添加注释的DataView后，自定义颜色丢失了——这是因为创建DataView时，setColumns方法只指定了类别列（索引0）、数据列（索引1）和注释列，没有包含原来的style列（索引2），导致图表无法读取自定义样式信息，只能使用默认蓝色。

解决方案 #

在DataView的列配置数组中，把原有的style列也加入进去，保持和原DataTable的列逻辑顺序一致即可。修改后的完整代码如下：

function drawAttendance() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addColumn({ type: 'string', role: 'style' });
    
    data.addRows(2);
    
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(0, 2, 'rgb(200, 20, 60)');
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);
    data.setValue(1, 2, 'rgb(20, 200, 60)');

    var options = {
        chartArea: {
            left: 200,
            height: '85%',
            width: '100%',
        },
        bar: {groupWidth: "95%"},
        legend: {position: 'none'},
        hAxis: {
            minValue: 0,
        },
        vAxis: {
        },
        height: '100%',
        width: '100%',
    };

    // 修改后的DataView配置：加入style列
    var view = new google.visualization.DataView(data);
    view.setColumns([
        0, 
        1, 
        2, // 保留原style列，确保自定义颜色生效
        {
            calc: 'stringify',
            role: 'annotation',
            sourceColumn: 1,
            type: 'string'
        }
    ]);

    chart.draw(view, options);
}

关键说明 #

• DataView的setColumns方法定义了图表要使用的列集合，必须包含所有需要的角色列（比如style、annotation），否则对应功能会失效。
• 列的顺序需要和原DataTable中对应列的逻辑顺序匹配，确保style列能正确关联到对应的数据行。

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