如何将样式角色列添加到 Google 图表聚合数据表中

Question

我有一个从数据库数据创建的数据表，该数据由google.visualization.data.group聚合，然后输入到columnChart中。

默认情况下，生成的图表的条形都是相同的颜色，但我想使条形有不同的颜色（通过遍历数据表并为数据表中的每一行分配不同的颜色）。现在，为了简单起见，我将尝试为每个条形分配"金色"颜色。

这是 columnChart 的文档，也是样式角色的文档。

我不认为我的代码会有很大的错误：

var groupedCategoryData = new google.visualization.data.group(
        stacked01Data, // arg 1 is the array of input data
        [{ // arg 2 is the key (An array of numbers/objects being columns to group by)
            column: 0, type: 'string' 
        }], 
        [{ 'column': 1, 'aggregation': google.visualization.data.avg, 'type': 'number' }]
    );//group. col 1 = score
    //*****************         
    groupedCategoryData.addColumn({ type: 'string', role: 'style' });
    for (var i = 0; i < groupedCategoryData.length; i++) {
        groupedCategoryData[i][2] = 'color: gold';
    }//for
    //*****************
    var stacked01_options = {
        width: 500,
        height: 300
    };//options
    var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
    stacked01.draw(groupedCategoryData, stacked01_options);

结果是一个图表，其条形图都是默认的蓝色。我承认这是我第一次涉足javascript。任何帮助将不胜感激。

Answer 1

是的，做到了。 谢谢白帽。 工作代码：

//include the bar color data
var colorsGreen = [
    [0, 1, '#6AB293'],
    [1, 2, '#449371'],
    [2, 3, '#277553'],
    [3, 4, '#115639'],
    [4, 5, '#043822']
];
groupedCategoryData.addColumn('string', 'barColor');
var groupedCategoryDataView = new google.visualization.DataView(groupedCategoryData);
groupedCategoryDataView.setColumns([0, 1, {
    calc: function (dt, row) {
        var rowValue = dt.getValue(row, 1);
        var color;
        colorsGreen.forEach(function (range, index) {
            if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) {
                color = range[2];
            }
        });
        return color;
    },
    role: 'style',
    type: 'string'
}]);

var stacked01_options = {
    width: 500,
    height: 300
};//options
var stacked01 = new google.visualization.ColumnChart(document.getElementById('stackedChart01_div'));
stacked01.draw(groupedCategoryDataView, stacked01_options);

}