Google Charts - 更改單個欄的顏色

Question

使用Google Charts的條形圖，是否可以更改一個欄的顏色。例如，我想讓2006年的數據變成紅色（其他酒吧是藍色的）。

function drawVisualization() { 
      // Create and populate the data table. 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 


      chart = new google.visualization.BarChart(document.getElementById('visualization')); 
      chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}} 
          }); 
} 

Answer 1

這是更改顏色的代碼示例。請注意， 「顏色」選項接受一組字符串。

var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
     colors: ['red','green'], 
     is3D:true 
}; 

Answer 2

你總是可以插入一個額外的列，所以它會有不同的顏色。這就是我所能做的一切。

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 
      data.addColumn('number', 'SalesMax'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 
      data.setValue(0, 2, 0); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 
      data.setValue(1, 2, 0); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 0); 
      data.setValue(2, 2, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 
      data.setValue(3, 2, 0); 


      var chart = new google.visualization.BarChart(document.getElementById('visualization')); 
      chart.draw(data, {width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
           series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}] 
          }); 
} 

Answer 3

由於納文建議，應添加另一系列，以使其使用不同的顏色，但如果添加isStacked: true到你的選擇將借鑑酒吧在彼此的頂部，而不是彼此相鄰並不會改變它們的寬度或對齊方式，所以看起來不錯。試試這個：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Year'); 
      data.addColumn('number', 'Sales'); 
      data.addColumn('number', 'SalesMax'); 

      data.addRows(4); 
      data.setValue(0, 0, '2004'); 
      data.setValue(0, 1, 1000); 
      data.setValue(0, 2, 0); 

      data.setValue(1, 0, '2005'); 
      data.setValue(1, 1, 1170); 
      data.setValue(1, 2, 0); 

    /* NEED TO MAKE THIS BAR RED? */ 
      data.setValue(2, 0, '2006'); 
      data.setValue(2, 1, 0); 
      data.setValue(2, 2, 1400); 

      data.setValue(3, 0, '2007'); 
      data.setValue(3, 1, 1030); 
      data.setValue(3, 2, 0); 


      var chart = new google.visualization.BarChart(document.getElementById('visualization')); 
    chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance', 
           vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, 
           series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}] 
          }); 
} ​ 

Answer 4

系列陣列的對象，或對象，具有嵌套的對象

對象的數組，每個描述圖表中的相應系列的格式。要爲系列使用默認值，請指定一個空對象{}。如果未指定序列或值，則將使用全局值。每個對象都支持以下屬性：

顏色 - 用於此係列的顏色。指定一個有效的HTML顏色字符串。 targetAxisIndex - 將該系列分配給哪個軸，其中0是默認軸，1是相反的軸。默認值是0;設置爲1來定義一個圖表，其中不同系列的圖表針對不同的軸進行渲染。至少有一個系列被分配給默認軸。您可以爲不同的軸定義不同的比例。

visibleInLegend - 一個布爾值，其中true表示該系列應該有圖例條目，而false表示它不應該。默認值是true。 您可以指定一個對象數組，每個對象都按照給定的順序應用於系列，也可以指定一個對象，其中每個子對象都有一個數字鍵，指示它應用於哪個系列。例如，下面的兩個聲明是相同的，並聲明所述第一系列爲黑色，從圖例不存在，以及第四紅色和缺席從圖例：

series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}} 

Answer 5

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

你可以將{role：'style'}添加到您的數據表中。對於所有想要具有相同顏色的列，只需指定一個空的樣式「'。然後，在列，你想紅，你可能只是指定「紅色」或「＃FF0000」或「顏色：紅」等

// example from Google 
var data = google.visualization.arrayToDataTable([ 
    ['Element', 'Density', { role: 'style' }], 
    ['Copper', 8.94, '#b87333'],   // RGB value 
    ['Silver', 10.49, 'silver'],   // English color name 
    ['Gold', 19.30, 'gold'], 
    ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration 
]); 

Answer 6

我使用的角色風格的技術現在圖表解決這個問題生成動態數據，我用隨機函數生成的顏色

function random_color_part() { 
return str_pad(dechex(mt_rand(0, 255)), 2, '0', STR_PAD_LEFT); 
} 

function random_color() { 
return random_color_part() . random_color_part() . random_color_part(); 
} 
then simply 
$color=random_color(); 
print "['$rows[1]',$rows[2],'#$color'],\n";