Google charts - changement de l'axe de la couleur du texte
Je suis en train de créer un tableau noir avec Google Charts, mais je n'arrive pas à changer la couleur du texte de l'axe. J'ai essayé quelques morceaux de code que j'ai trouvé sur le web, comme:
hAxis: {
color: '#FFF'
}
Mais il ne fonctionne tout simplement pas. J'ai réussi à modifier le titre et la légende de la couleur, mais pas l'axe de texte. Je suis en train de configurer l'axe de texte de couleur blanc, pour contraster avec le fond d'écran:
JS:
google.load("visualization", "1", { packages: ["corechart"] });
setTimeout(function() {
var options = {
title: 'Test Chart',
backgroundColor: '#000',
legendTextStyle: { color: '#FFF' },
titleTextStyle: { color: '#FFF' },
hAxis: {
color: '#FFF',
}
};
var chart = new google.visualization.LineChart(document.querySelector(".chart"));
chart.draw(google.visualization.arrayToDataTable(
[
["Year", "T1", "T2", "T3"],
[0, 10, 20, 30],
[1, 10, 20, 30],
[2, 10, 20, 30],
[3, 10, 20, 30],
[4, 10, 20, 30]
]
), options);
}, 100);
CSS:
.chart {
width: 100%;
height: 200px;
}
HTML:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart"></div>
- Mon cas est un peu différent: dans le cas de régulière graphiques (uncofigured couleurs), les textes sont gris au lieu de noir, de sorte que leur contraste est faible. Cela signifie que j'ai manuellement charger et de modifier chaque pièce pour être vraiment noir?
Vous devez vous connecter pour publier un commentaire.
Utilisation correcte d'hAxis est à l'aide de la textStyle options dans laquelle vous souhaitez que la couleur:
Je vous recommande également à l'aide de
google.setOnLoadCallback(drawChart);
fonction de rendu de la carte au lieu de l'expiration du délai, au moins pour moi 100 millisecondes n'était pas assezJ'ai réussi à changer tout le tableau de textes avec un CSS.
Je pense de cette façon est plus confortable que de configurer chaque graphique type de texte (titre, légende, vAxis, hAxis, autres).
Il sera peut-être utile pour quelqu'un.
Code (n'oubliez pas de changement "#chart_div" pour votre graphique id):