如何將樣式角色列添加到谷歌圖表聚合的數據表

Question

我有一個數據庫數據創建，該數據庫數據由google.visualization.data.group彙總，然後饋送到columnChart。

默認情況下，生成的圖表欄是所有相同的顏色，但我想使欄不同顏色（通過遍歷數據表併爲datable中的每一行分配不同的顏色）。現在，爲了簡單起見，我們只是試圖將顏色「黃金」分配給每個酒吧。

這是針對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); 

}