Come si imposta l'intervallo di colori in Google Chart?

Question

Ho creato uno ColumnChart e ha due barre. Come posso impostare colori diversi su queste due barre?

Sono attualmente solo in grado di impostare un colore per entrambe le barre,

Questo fa parte del codice che uso:

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); 

L'intenzione con colors: ['#b2cedc', '#7b7b7b','#b2cedc', '#7b7b7b'] è quella di impostare il colore start-end per bar1 e bar 2. Ma tutto ciò che faccio è usare il primo colore definito.

E c'è un modo per recuperare il colore di sfondo attraverso le opzioni?

Codice di prova per strumento di visualizzazione

Tagliare e incollare questo in 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

Non è necessario ripetere i codici colore, si ripeterà il set assegnato.

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

Si può anche semplicemente lasciarlo usare il default, che darà un set di colori distinti, se non siete schizzinosi riguardo i colori.

Il colore di sfondo viene modificato tramite backgroundColor. Prende una stringa come "rosso" o "# b2cedc"

C'è un bel tool con cui puoi giocare per testare il tuo codice al volo. Il codice colore sopra inserito dopo i colori width:600, height:400, in ogni altra riga come dovrebbe.

This documentation potrebbe anche essere utile.

Answer 2

Il problema sembra essere che si sta inserendo una sola voce, Austria, con più punti dati. colors imposta il colore per ogni voce, non il punto dati di ciascuna voce. Il grafico non ha un'opzione che posso trovare per più colori dei punti di dati.

Per capire cosa intendo cambiare:

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

a

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

Answer 3

Codice Molto utile: ho trovato qui. 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; 
     } 
     } 
     } 
    }