谷歌图表 - 更改轴文本颜色

Question

我正在尝试使用Google Charts创建一个黑色图表,但我似乎无法更改轴的文本颜色.我尝试了一些我在网上找到的代码,比如:

hAxis: {
  color: '#FFF'
}

但它只是不起作用.我设法改变了标题和图例颜色,但没有更改轴文本.我正在尝试将轴文本颜色设置为白色,以与背景对比:

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>

Answer 1

正确使用hAxis是使用textStyle选项,您需要颜色:

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

我还建议使用 google.setOnLoadCallback(drawChart);函数来渲染图表而不是超时,至少对我来说100毫秒是不够的

Answer 2

我设法用一个 CSS 更改了所有图表文本。

我认为这种方式比配置每种图表文本类型（标题、图例、vAxis、hAxis 等）更舒适。

也许它对某人有用。

一些代码（记得为您的图表 ID 更改“#chart_div”）：

#chart_div text {
    fill: red !important;
}