谷歌圖，不同的顏色各條

Question

我有這樣的谷歌條形圖：

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', ''); 
    data.addColumn('number', ''); 
    data.addRows(2); 
    data.setValue(0, 0, 'Value 1'); 
    data.setValue(0, 1, 250); 
    data.setValue(1, 0, 'Value 2'); 
    data.setValue(1, 1, 100); 

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 400, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
    } 

全部運行正常，但問題是，這兩個酒吧都有相同的顏色，我希望能夠有每個酒吧都有不同的顏色。

任何人都可以幫助我嗎？

Answer 1

一種做事的方法是把它們全部放在同一行，API將爲此分配不同的顏色。因此，對於你的例子

function drawChart(){ 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Value 1'); 
    data.addColumn('number', 'Value 2'); 
    data.addRows(2); 
    data.setValue(0, 0, 250); 
    data.setValue(0, 1, 100); 

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 

    chart.draw(data, { 
     width: 600, 
     height: 175, 
     title: 'Total', 
     legend: 'none', 
    }); 
} 

如果你需要自己的顏色在chart.draw選項像添加此，

colors: ['red','yellow', 'blue'], 

如果有太多的酒吧雖然，這可能是一個壞的選擇對於請看

http://code.google.com/apis/chart/interactive/docs/reference.html#barformatter

Answer 2

沒錯，你必須插入顏色屬性轉換選項variabl即

... 

var options = { 
    width: 600, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
    colors: ['red', 'green'] 
}; 

chart.draw(data, options); 
... 

Answer 3

請選擇補充一點：

colors:['red','#009900']

像：

var options = { 
      title: 'Company Performance', 
      vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
      colors:['red','#009900'] 
}; 

Answer 4

不知道爲什麼沒有人提到式角色列 - 我以爲他們最初的後添加問題，但對於任何尋找這個現在，更好的方法是：

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', ''); 
     data.addColumn('number', ''); 
     data.addColumn({ type: 'string', role: 'style' }); 

     data.addRows(2); 

     data.setValue(0, 0, 'Value 1'); 
     data.setValue(0, 1, 250); 
     data.setValue(0, 2, 'rgb(200, 20, 60)'); 
     data.setValue(1, 0, 'Value 2'); 
     data.setValue(1, 1, 100); 
     data.setValue(1, 2, 'rgb(20, 200, 60)'); 

     var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     chart.draw(data, { 
       width: 400, 
       height: 175, 
       title: 'Total', 
       legend: 'none', 
     }); 
    } 

您可以設置許多其他CSS樣式，以使您的圖表非常難看。

https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

請注意，它似乎並不支持RGBA（）中指定的顏色 - 你必須設置不透明度風格的作用。

這裏有一個小提琴：

http://jsfiddle.net/a1og7rq4/

旁註：如果你有多個系列，那麼你需要在每個系列的數據列後一種風格的角色列。

這裏是另一個小提琴表示（不透明度以及）：http://jsfiddle.net/v5hfdm6c/1

下面是修改的功能（左上方的未修飾的一個爲清楚起見）

function drawChart() { 
var data = new google.visualization.DataTable(); 
data.addColumn('string', ''); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 
data.addColumn('number', ''); 
data.addColumn({ type: 'string', role: 'style' }); 

data.addRows(2); 

var i = 0; 
data.setValue(0, i++, 'Value 1'); 
data.setValue(0, i++, 200); 
data.setValue(0, i++, 'color:rgb(200, 20, 60); opacity:0.5'); 
data.setValue(0, i++, 250); 
data.setValue(0, i++, 'rgb(200, 20, 60)'); 

i = 0; 
data.setValue(1, i++, 'Value 2'); 
data.setValue(1, i++, 120); 
data.setValue(1, i++, 'color:rgb(20, 200, 60); opacity:0.5'); 
data.setValue(1, i++, 100); 
data.setValue(1, i++, 'rgb(20, 200, 60)'); 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
chart.draw(data, { 
    width: 400, 
    height: 175, 
    title: 'Total', 
    legend: 'none', 
}); 

}

Answer 5

這裏是我的答案。它負責將一個陣列到dataTable的

function drawChart() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Season'); 
     data.addColumn('number', 'Deaths'); 
     data.addColumn({ 
      type: 'string', 
      role: 'style' 
     }); 

     var dataArray = new Array(); 
     dataArray[0] = ['Season 1', 1000, "#A0A0A0"] 
     dataArray[1] = ['Season 2', 1170, "#FF3344"] 
     dataArray[2] = ['Season 3', 660, "#BCBCBC"] 
     dataArray[3] = ['Season 4', 1248, "#B3B3B8"] 
     dataArray[4] = ['Season 5', 14353, "RED"]; 

     var charTitle = "Total deaths in Game of Thrones Series VS Screen Play Time"; 
     var noOfBars = dataArray.length; 

     data.addRows(noOfBars); 

     for (var row = 0; row < noOfBars; row++) { 
      var label=dataArray[row][0]; 
      var value=dataArray[row][1]; 
      var color=dataArray[row][2]; 
       data.setValue(row, 0, label); 
       data.setValue(row, 1, value); 
       data.setValue(row, 2, color); 
     } 



    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
    chart.draw(data, { 
     width: 600, 
     height: 300, 
     title: charTitle, 
    }); 
} 

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

Answer 6

對於那些誰正在使用餅圖：

添加slices

// Set chart options 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300, 
        slices: { 
         0: { color: 'yellow' }, 
         1: { color: 'transparent' } 
         } 
        };