Chcę móc warunkowo ustawić kolordla danej kolumny w wykresie kolumnowym google wykresy zależne od jej wartości. na przykład, jeśli pasek jest <50, pokoloruj go na żółto lub powyżej 70, pokoloruj go na zielono. Byłoby świetnie, gdyby rozwiązanie zostało zrealizowane w samym interfejsie API, ale prawdopodobnie tak nie będzie.
Odpowiedzi:
1 dla odpowiedzi № 1możesz użyć a "style" rola kolumny do konkretnych kolumn
rola stylu jest tylko kolumną w tabeli danych,
powinien być zgodny z kolumną serii
jeśli chcesz na przykład pokolorować kolumnę na zielono ...
["A", 100, "green"]
warunkowo przypisać kolor,
możemy użyć a Widok danychi setColumns metoda
co pozwala nam dodać kolumnę obliczeniową
patrz następujący fragment roboczy,
tablica służy do przechowywania zakresów wartości i powiązanego koloru ...
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>