Question

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

默认情况下，生成的图表的条形图都是相同的颜色，但我想使条形图的颜色不同（通过迭代数据表并为数据表中的每一行指定不同的颜色）。现在，我将为简单起见，只需尝试为每个条形指定颜色“黄金”。

这是columnChart的documentation，是样式角色的documentation。

我认为我的代码不会出错：

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

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

//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);

}

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

1 个答案: