Google图表更改时间轴的X轴字体的颜色

Question

我有一个Google图表，需要将x轴（这是时间轴）的字体颜色更改为白色，以便与我的背景形成对比：

我尝试过

  

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

<DIV>
  <p><U><font face="verdana" size="6" color="#CCCCCC">Thursday</font></U></p>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Federation' });
    dataTable.addColumn({ type: 'string', id: 'Event' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'WWE / NXT',  'AXXESS',    new Date(0,0,0,18,0,0),  new Date(0,0,0,22,0,0)],
      [ 'WWN',  'Matt Riddles Bloodsport',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
      [ 'WrestleCon',  'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
      [ 'WWN', 'Evolve',   new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
      [ 'WrestleCon', 'WrestleCon Supershow',       new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
      [ 'Knockout', 'Knockout in NOLA',       new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0)],
      [ 'ROH', 'RoH Supercard of Honor',       new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0)],
      [ 'WWN', 'Beyond Wrestling',        new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
    var options = {
      timeline: { colorByRowLabel: true },
      tooltip: {isHtml: true},
      legend: 'none',
      backgroundColor: '#ffd'
    };
    chart.draw(dataTable, options);
  }
</script>
<div id="example5.1" style="height: 300px;"></div>
</DIV>

Answer 1

显然，hAxis.textStyle不是可用的选项，
但是您可以在图表的'ready'事件

上进行手动更改

一旦触发，找到svg <text>元素并更改fill颜色...

google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    if (label.getAttribute('text-anchor') === 'middle') {
      label.setAttribute('fill', '#ffffff');
    }
  });
});

请参阅以下工作片段...

google.charts.load('current', {
  packages:['timeline']
}).then(function () {
  var container = document.getElementById('example5.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Federation' });
  dataTable.addColumn({ type: 'string', id: 'Event' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'WWE / NXT',  'AXXESS',    new Date(0,0,0,18,0,0),  new Date(0,0,0,22,0,0)],
    [ 'WWN',  'Matt Riddles Bloodsport',    new Date(0,0,0,15,0,0),  new Date(0,0,0,18,0,0)],
    [ 'WrestleCon',  'Wildkat Sports', new Date(0,0,0,18,0,0), new Date(0,0,0,21,0,0)],
    [ 'WWN', 'Evolve',   new Date(0,0,0,20,00,0), new Date(0,0,0,23,0,0)],
    [ 'WrestleCon', 'WrestleCon Supershow',       new Date(0,0,0,21,30,0), new Date(0,0,0,23,30,0)],
    [ 'Knockout', 'Knockout in NOLA',       new Date(0,0,0,17,00,0), new Date(0,0,0,20,00,0)],
    [ 'ROH', 'RoH Supercard of Honor',       new Date(0,0,0,19,30,0), new Date(0,0,0,22,30,0)],
    [ 'WWN', 'Beyond Wrestling',        new Date(0,0,0,20,55,0), new Date(0,0,0,23,55,0)]]);
  var options = {
    timeline: { colorByRowLabel: true },
    tooltip: {isHtml: true},
    legend: 'none',
    backgroundColor: '#ffd',
  };
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('fill', '#ffffff');
      }
    });
  });
  chart.draw(dataTable, options);
});

body {
  background-color: #154360;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<DIV>
  <p><U><font face="verdana" size="6" color="#CCCCCC">Thursday</font></U></p>
  <div id="example5.1" style="height: 300px;"></div>
</DIV>