Google Charts Change color of X-Axis Font for Timelines

问题

I have a google chart and need to change the font color of the x-axis (this is the time axix) to White so as to contrast with the background I have:

I have tried

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>

回答1:

apparently, hAxis.textStyle is not an available option,
but you can change manually on the chart's 'ready' event

once this fires, find the svg <text> elements and change the fill color...

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

see following working snippet...

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>

来源：https://stackoverflow.com/questions/52156120/google-charts-change-color-of-x-axis-font-for-timelines