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;
}

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

2 个答案: