web-dev-qa-db-fra.com

Google charts - changer la couleur du texte de l'axe

J'essaie de créer un graphique noir avec Google Charts, mais je n'arrive pas à modifier la couleur du texte de l'axe. J'ai essayé des morceaux de code trouvés sur le Web, comme:

hAxis: {
  color: '#FFF'
}

Mais ça ne marche pas. J'ai réussi à changer le titre et la couleur de la légende, mais pas le texte de l'axe. J'essaie de définir la couleur du texte de l'axe sur blanc, pour contraster avec l'arrière-plan:

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);
.chart {
  width: 100%;
  height: 200px;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div class="chart"></div>

chartsgoogle-visualization
12
LcSalazar

L'utilisation correcte de hAxis utilise les options textStyle, dans lesquelles vous souhaitez que la couleur:

hAxis: {
    textStyle:{color: '#FFF'}
}

Je recommanderais également d'utiliser la fonction google.setOnLoadCallback(drawChart); pour afficher le graphique au lieu du délai d'attente, du moins 100 millisecondes ne suffisaient pas

23
juvian

Je parviens à changer tous les textes de graphique avec un CSS.

Je pense que cette façon est plus confortable que de configurer chaque type de texte de graphique (titre, légende, vAxis, hAxis, autres).

Peut-être que ce sera utile pour quelqu'un.

Certains codes (n'oubliez pas de changer "#chart_div" pour votre identifiant de graphique):

#chart_div text {
    fill: red !important;
}
0
César León