zmienić kolor tytułu danych (Google Visualization) - javascript, kolory, google-visualisation, linechart

Próbuję zmienić kolory wykresu liniowego (wizualizacja Google). To działa, ale nie mogę znaleźć sposobu, aby zmienić kolor tekstu "Koty".

Jak tu jest opisany? https://developers.google.com/chart/interactive/docs/gallery/linechart

function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
["x", "Cats", "Blanket 1", "Blanket 2"],
["A",   1,       1,           0.5],
["B",   2,       0.5,         1],
["C",   4,       1,           0.5],
["D",   8,       0.5,         1],
["E",   7,       1,           0.5],
["F",   7,       0.5,         1],
["G",   8,       1,           0.5],
["H",   4,       0.5,         1],
["I",   2,       1,           0.5],
["J",   3.5,     0.5,         1],
["K",   3,       1,           0.5],
["L",   3.5,     0.5,         1],
["M",   1,       1,           0.5],
["N",   1,       0.5,         1]
]);

// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById("visualization")).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}

Inne pytanie To jest moja obecna praca, ale dlaczego widzę - 5 mil nawet nie ma numeru poniżej 0?

Mój kod:

new google.visualization.LineChart(document.getElementById("visualization")).
draw(data, {
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ["#769dbb"], //Line color
backgroundColor: "#1b1b1b",
hAxis: { textStyle: {color: "#767676"  , fontSize: 11} },
vAxis: { textStyle: {color: "#767676"} },
}
);

}

Wcześniejsze

Odpowiedzi:

6 dla odpowiedzi № 1

Podzielmy twoje pytanie na dwie części.

Dostosowywanie swojej legendy

Na pierwsze pytanie, Dokumentacja API tak naprawdę nie daje nam bezpośredniego dostępu do samej legendy. Myślę, że najlepszym sposobem rozwiązania problemu byłoby rozpoczęcie od wyłączenia domyślnej legendy:

var chart = new google.visualization.LineChart(document.getElementById("visualization"))
.draw(data, {
legend: { position: "none" }, // turn off the legend
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ["#769dbb"], //Line color
backgroundColor: "#1b1b1b",
hAxis: { textStyle: {color: "#767676"  , fontSize: 11} },
vAxis: { textStyle: {color: "#767676"} },
});

Po wykonaniu tej czynności możesz utworzyć własną legendę, wchodząc w interakcję z samą mapą:

google.visualization.events.addListener(chart, "ready", drawCustomLegend);

Sprawdź dokumentacja dotycząca obsługi zdarzeń na wykresach, jak również to pytanie.

Konfigurowanie wymiarów osi

Aby usunąć wartość -5 milionów osi poziomej, możesz ustawić swój vAxis.minValue do 0. Tak więc połączyć wszystko razem:

var chart = new google.visualization.LineChart(document.getElementById("visualization"))
.draw(data, {
legend: { position: "none" }, // turn off the legend
curveType: "function",
width: 900, height: 300,
vAxis: {minValue:0},
colors: ["#769dbb"], //Line color
backgroundColor: "#1b1b1b",
hAxis: { textStyle: {color: "#767676"  , fontSize: 11} },
vAxis: { minValue: 0, textStyle: {color: "#767676"} },
});

---

0 dla odpowiedzi nr 2

To działało dla mnie. Sprawdź poniżej właściwość "legend".

options="{"title": "Abandoned Carts",
"backgroundColor" : "transparent",
"pieHole": "0.4",
"legend" : { "textStyle" : { "color" : "white"} }
}"

---