如何将样式角色列添加到谷歌图表聚合数据表答案

【问题标题】：How to add a style role column to a google charts aggregated datatable如何将样式角色列添加到谷歌图表聚合数据表
【发布时间】：2017-10-06 20:28:08
【问题描述】：

我有一个由 google.visualization.data.group 聚合的数据库数据创建的数据表，然后输入 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。任何帮助将不胜感激。

【问题讨论】：

您可以在分组数据上使用数据视图来提供颜色，类似于this answer...

标签： charts google-apps-script google-visualization

【解决方案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);

}

【讨论】：