如何在Google圖表中設置顏色範圍？

Question

我創建了一個ColumnChart，它有兩個小節。我怎樣才能在這兩個欄上設置不同的顏色？

我目前只能夠設置一個顏色都棒，

這是我使用的代碼的一部分：

var d = [['', ''], ['Bar 1', 100], ['Bar 2', 300]]; 
data = new google.visualization.arrayToDataTable(d);  

var option = { 
    title: 'Betalingsoppfølging', 
    width: '300', 
    height: '250', 
    min: '0', 
    legend: 'none', 
    colors: ['#b2cedc', '#7b7b7b','#e2e2e2', '#747c1f'] 
} 

wrap.setOptions(option); 
wrap.draw(data); 

與colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b']的目的是設置開始結束色bar1和bar 2.但是我所做的一切，都是使用第一種顏色定義的。

有沒有辦法通過選項來改變背景顏色？對於可視化工具

測試代碼

剪切並粘貼到Code Playground。

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    var raw_data = [['Austria', 150000, 225000]]; 

    var years = [2003, 2004]; 

    data.addColumn('string', 'Year'); 
    for (var i = 0; i < raw_data.length; ++i) { 
    data.addColumn('number', raw_data[i][0]);  
    } 

    data.addRows(years.length); 

    for (var j = 0; j < years.length; ++j) {  
    data.setValue(j, 0, years[j].toString());  
    } 
    for (var i = 0; i < raw_data.length; ++i) { 
    for (var j = 1; j < raw_data[i].length; ++j) { 
     data.setValue(j-1, i+1, raw_data[i][j]);  
    } 
    } 

    // Create and draw the visualization. 
    new google.visualization.ColumnChart(document.getElementById('visualization')). 
     draw(data, 
      {title:"Color testing", 
      width:600, height:400, 
      hAxis: {title: "Year"}, 
      colors: ['#dedb70', '#747c1f','yellow', 'red'], 
      min: '0', 
      legend: 'none' 
      } 
    ); 
} 

Answer 1

你不需要重複顏色代碼，它會重複你給它的設置。

colors: ['#b2cedc', '#7b7b7b'] 

你也可以讓它使用默認的，這將給不同的顏色設置，如果你不挑剔的顏色。

背景顏色通過backgroundColor更改。它需要一個字符串像'紅'或'＃b2cedc'

有一個不錯的tool你可以玩在飛行中測試你的代碼。上面的顏色代碼插入在width:600, height:400,之後的其他所有行中。

This documentation也可能有幫助。

Answer 2

問題似乎是，您只能輸入一個條目，奧地利，多個數據點。 colors設置每個條目的顏色，而不是每個條目的數據點。該圖表沒有我可以找到的多個數據點顏色的選項。

要明白我的意思改變：

var raw_data = [['Austria', 150000, 225000]];

到

var raw_data = [['Austria', 150000, 225000],['Japan',100000,200000]];

Answer 3

非常有用的代碼：我在這裏找到。 https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/jCVmevbBT4Q

function drawVisualization() { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Sales'); 
     data.addColumn('number', 'Expenses'); 
     data.addRows(4); 
     data.setValue(0, 0, '2004'); 
     data.setValue(0, 1, 1000); 
     data.setValue(0, 2, 400); 
     data.setValue(1, 0, '2005'); 
     data.setValue(1, 1, 1170); 
     data.setValue(1, 2, 460); 
     data.setValue(2, 0, '2006'); 
     data.setValue(2, 1, 660); 
     data.setValue(2, 2, 1120); 
     data.setValue(3, 0, '2007'); 
     data.setValue(3, 1, 1030); 
     data.setValue(3, 2, 540); 

    var chart = new google.visualization.ColumnChart(document.getElementById('visualization')); 
    chart.draw(data, { width: 640, height: 480, title: 'Company Performance', 
        vAxis: { title: 'Year', titleTextStyle: { color: 'red'} }, 
        legend: 'none', colors: ['#cc00cc', '#ccffcc'] 
        }); 

    changeColors(); 

    } 

    function changeColors() { 
    var chartArea = document.getElementsByTagName('iframe')   [0].contentDocument.getElementById('chartArea'); 
     var nodes = chartArea.getElementsByTagName('rect'); 

     // finding all <rect> elements with #cc00cc fill color and replacing them with  'blue','red','green','blue' 
     for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#cc00cc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
    } 

    // finding all <rect> elements with #ccffcc fill color and replacing them with 'blue','red','green','blue' 
    for (var i = 0; i < nodes.length; i++) { 
    var node = nodes[i]; 
    if (node.getAttribute('fill') && node.getAttribute('fill') == '#ccffcc') { 
     switch (i % 4) { 
     case 0: 
      node.setAttribute('fill', 'blue'); 
      break; 
     case 1: 
      node.setAttribute('fill', 'red'); 
      break; 
     case 2: 
      node.setAttribute('fill', 'green'); 
      break; 
     case 3: 
      node.setAttribute('fill', 'red'); 
      break; 
     } 
     } 
     } 
    }