Google Chart, couleur différente pour chaque barre

Une façon difficile de faire des choses est de les mettre tous dans la même rangée, et l'API attribuerait des couleurs distinctes à cela. D'où pour votre exemple

 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', }); } 

Si vous avez besoin de vos propres couleurs, ajoutez ceci dans les options chart.draw comme,

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

S'il y a trop de barres, cela peut être une mauvaise option pour cela, veuillez regarder

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

Exactement, vous devez insérer l'attribut colors dans la variable options.

 ... var options = { width: 600, height: 175, title: 'Total', legend: 'none', colors: ['red', 'green'] }; chart.draw(data, options); ... 

Je ne sais pas pourquoi personne n'a mentionné les colonnes de rôle de style – je suppose qu'ils ont été ajoutés après la question initiale, mais pour ceux qui recherchent cela maintenant, une meilleure façon est:

 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', }); } 

Vous pouvez définir d'autres styles CSS pour rendre vos tableaux vraiment moche.

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

REMARQUE qu'il ne semble pas supporter les couleurs spécifiées par rgba () – vous devez définir une opacité sur le rôle de style.

Voici un violon:

http://jsfiddle.net/a1og7rq4/

SIDENOTE: si vous avez plusieurs séries, vous avez besoin d'une colonne de style après chaque colonne de données série.

Voici une autre violon qui montre que (avec l'opacité aussi): http://jsfiddle.net/v5hfdm6c/1

Voici la fonction modifiée (la gauche n'est pas modifiée ci-dessus pour plus de clarté)

 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', }); 

}

Ajoutez-le dans les options suivantes:

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

Comme:

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

Voici ma réponse. Il prend en charge la conversion d'un tableau en 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(); } }); 

Pour ceux qui utilisent Pie Chart:

Ajouter les 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' } } };