web-dev-qa-db-ja.com

Googleグラフ-軸のテキストの色を変更する

Googleグラフで黒いグラフを作成しようとしていますが、軸のテキストの色を変更できません。私は私がウェブで見つけたいくつかのコードを試しました：

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>
chartsgoogle-visualization
14
LcSalazar

HAxisの正しい使用法は、色が必要なtextStyleオプションを使用することです。

_hAxis: {
    textStyle:{color: '#FFF'}
}
_

グラフのレンダリングには、タイムアウトの代わりにgoogle.setOnLoadCallback(drawChart);関数を使用することもお勧めします。少なくとも私にとっては100ミリ秒では不十分でした。

31
juvian

1つのCSSですべてのグラフテキストを変更できます。

この方法は、すべてのグラフテキストタイプ（タイトル、凡例、vAxis、hAxisなど）を構成するよりも快適だと思います。

多分それは誰かのために役立つでしょう。

いくつかのコード（チャートIDの「#chart_div」を変更することを忘れないでください）：

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