Подтвердить что ты не робот

Графики Google - изменение цвета текста оси

Я пытаюсь создать черную диаграмму с Google Charts, но я не могу изменить цвет текста оси. Я пробовал некоторые фрагменты кода, которые я нашел в Интернете, например:

hAxis: {
  color: '#FFF'
}

Но это просто не работает. Мне удалось изменить цвет заголовка и легенды, но не текст оси. Я пытаюсь установить цвет текста оси на белый, чтобы контрастировать с backgroud:

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>
4b9b3361

Ответ 1

Правильное использование для hAxis использует параметры textStyle, в которых вы хотите цвет:

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

Я бы также рекомендовал использовать функцию google.setOnLoadCallback(drawChart); для рендеринга диаграммы вместо таймаута, по крайней мере для меня 100 миллисекунд было недостаточно

Ответ 2

Мне удается изменить все тексты диаграммы с помощью одного CSS.

Я думаю, что этот способ удобнее, чем настраивать каждый тип текста диаграммы (заголовок, легенда, vAxis, hAxis, другие).

Может быть, это будет полезно для кого-то.

Некоторый код (не забудьте изменить "#chart_div" для идентификатора вашего графика):

#chart_div text {
    fill: red !important;
}