Je souhaite pouvoir définir de manière conditionnelle une couleur pour une colonne donnée dans un graphique à colonnes google graphiques en fonction de sa valeur. Par exemple, si la barre est < 50, colorez-la en jaune ou plus de 70, colorez-la en vert. Ce serait formidable si la solution était accomplie dans l'API elle-même, mais ce ne sera probablement pas le cas.Les graphiques de la colonne google définissent la couleur sous forme conditionnelle
vous pouvez utiliser une 'style' column role pour colorer des colonnes spécifiques
le rôle de style est juste une colonne dans la table de données,
qui devrait suivre la colonne de la série, il devrait le style
si vous vouliez colorer une vert colonne par exemple ...
['A', 100, 'green']
pour assigner une couleur conditionnelle,
nous pouvons utiliser un DataView Et le setColumns method
qui nous permet d'ajouter une colonne calculée
voir suivant extrait de travail,
un tableau est utilisé pour stocker les plages de valeurs, et la couleur associée ...
google.charts.load('current', {
packages: ['corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['x', 'y'],
['A', 9],
['B', 30],
['C', 50],
['D', 70],
['E', 90]
]);
var ranges = [
[0, 10, '#e53935'], // red
[10, 50, '#fdd835'], // yellow
[50, 90, '#43a047'], // green
[90, null, '#1e88e5'] // blue
];
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
var rowValue = dt.getValue(row, 1);
var color;
ranges.forEach(function (range, index) {
if ((rowValue >= range[0]) && ((rowValue < range[1]) || (range[1] === null))) {
color = range[2];
}
});
return color;
},
role: 'style',
type: 'string'
}]);
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, {
legend: 'none'
});
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>