谷歌图表 - 更改轴文本颜色-Java 学习之路

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

hAxis: {
  color: '#FFF'
}

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

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>

2 回答

23
正确使用hAxis是使用textStyle选项，您需要颜色：
```
hAxis: {
    textStyle:{color: '#FFF'}
}
```
我还建议使用 google.setOnLoadCallback(drawChart); 函数来渲染图表而不是超时，至少对我来说100毫秒是不够的
回复于 2024-04-29T03:18:15+08:00
0
我设法用一个CSS更改所有图表文本 .

我认为这种方式比配置每个图表文本类型（ Headers ，图例，vAxis，hAxis，其他）更加舒适 .

也许这对某人有用 .

一些代码（请记住为您的图表ID更改“#chart_div”）：
```
#chart_div text {
    fill: red !important;
}
```
回复于 2024-04-29T03:18:15+08:00

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

2 回答

相关问题