将颜色指定给Google图表中的特定列

Question

我想为Google条形图中的每列指定一种特定颜色。 我在想什么最好的方法是去做这件事。我想为每个数据点包含一个颜色十六进制代码。

我有以下的jsfiddle： http://jsfiddle.net/zYS27/

var option = { 
    animation: {duration: 1000, easing: 'out',}, 
    hAxis: {textStyle:{ 
    fontName: 'Nunito',fontSize: '16' }}, 
    legend: { position: "none" }, 
    tooltip: {trigger: "none", textStyle:{ 
    fontName: 'Nunito',fontSize: '16' }, isHtml: true}, 
    bar: {groupWidth: "80%"}, 
    vAxis: {format:'0%', minValue:0, viewWindowMode:'maximized', textStyle:{ 
    fontName: 'Nunito',fontSize: '16' }, maxValue:1}, 
      }; 

    var formatter = new google.visualization.NumberFormat({ 
     fractionDigits: 3, 
     pattern:'#,###%', 
     }); 
    var data = new google.visualization.DataTable();  
    data.addColumn('string', 'N'); 
    data.addColumn('number', 'Value'); 
    data.addRow(['Orange', 0]); 
    data.addRow(['Red', 0]); 
    data.addRow(['Green', 0]); 
    data.addRow(['Blue', 0]); 
    data.addRow(['Purple', 0]); 
    // Create and draw the visualization. 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart')); 
    chart.draw(data, option); 
    data.setValue(0, 1, 0.1); 
    data.setValue(1, 1, 0.3); 
    data.setValue(2, 1, 0.4);  
    data.setValue(3, 1, 0.4); 
    data.setValue(4, 1, 0.4); 
    chart.draw(data, option); 

    } 

    google.load("visualization", "1", {packages:["corechart"]}); 
    google.setOnLoadCallback(drawChart); 

Answer 1

使用 “风格” 的角色列：

var data = new google.visualization.DataTable();  
data.addColumn('string', 'N'); 
data.addColumn('number', 'Value'); 
data.addColumn({type: 'string', role: 'style'}); 
data.addRow(['Orange', 0, 'color: #FF8000']); 
data.addRow(['Red', 0, 'color: #FF0000']); 
data.addRow(['Green', 0, 'color: #00FF00']); 
data.addRow(['Blue', 0, 'color: #0000FF']); 
data.addRow(['Purple', 0, 'color: #800080']); 

小提琴：http://jsfiddle.net/asgallant/zYS27/1/

Answer 2

你也可以指定option.colors

option.color = ['#0f0', '#00f'];