将颜色分配给Google Charts中的特定列

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/