Google Charts - Cambia colore barra individuale

Question

Con il grafico a barre di Google Charts, è possibile cambiare il colore di una barra. Per esempio mi piacerebbe rendere i dati del 2006 rossi (le altre barre sono blu).

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

Ecco un esempio di codice che cambia il colore. Notare che l'opzione "colori" accetta un array di stringhe.

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

Answer 2

Si può sempre inserire una colonna in più e quindi avrà un colore diverso. Questo è tutto ciò che si può fare suppongo.

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

Come Naveen suggerito, si dovrebbe aggiungere un'altra serie al fine di rendere l'uso di un colore diverso, se si aggiunge isStacked: true per le opzioni trarrà bar uno sopra l'altro, invece di uno accanto all'altro e non cambierà la loro larghezza o allineamento, quindi sembra buono. Prova questo:

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

serie Array di oggetti, o oggetto con oggetti nidificati

Un array di oggetti, ciascuno dei quali descrive il formato della serie corrispondente nel grafico. Per utilizzare i valori predefiniti per una serie, specificare un oggetto vuoto {}. Se non viene specificata una serie o un valore, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:

colore - Il colore da utilizzare per questa serie. Specificare una stringa di colore HTML valida. targetAxisIndex - A quale asse assegnare questa serie, dove 0 è l'asse predefinito e 1 è l'asse opposto. Il valore predefinito è 0; impostato su 1 per definire un grafico in cui sono rappresentate serie diverse rispetto a diversi assi. Almeno una serie è assegnata all'asse predefinito. È possibile definire una scala diversa per diversi assi.

visibleInLegend - Un valore booleano, dove true indica che la serie deve avere una voce della legenda e false significa che non dovrebbe. L'impostazione predefinita è vera. È possibile specificare una matrice di oggetti, ognuno dei quali si applica alle serie nell'ordine specificato, oppure è possibile specificare un oggetto in cui ogni bambino ha una chiave numerica che indica a quale serie si applica. Ad esempio, le seguenti due dichiarazioni sono identici, e dichiarare la prima serie in bianco e assente dalla legenda, e il quarto esempio rosso e assente dalla legenda:

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

Answer 5

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

Puoi aggiungi {role: 'style'} alla tua tabella di dati. Per tutte le colonne che desideri avere lo stesso colore, specifica solo uno stile vuoto ''. Poi, sulla colonna che si desidera essere rosso, si può solo specificare 'rosso' o '# ff0000' o 'color: red', ecc

// 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

posso risolvere questo problema utilizzando la tecnica stile ruolo ora per i grafici che i dati dinamici generare i utilizzata una funzione casuale per generare colore

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