在Google时间轴图表中删除粗体刻度线标签

Question

在下图中：

12 AM / 12 PM / 12 AM在水平标签上显示为粗体。如何使所有标签都不粗体？我在他们的文档中没有看到任何选项：https://developers.google.com/chart/interactive/docs/gallery/timeline。

这是jsfiddle中的一个示例：https://jsfiddle.net/0f86vLrg/：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>
  google.charts.load('current', {
    'packages': ['timeline']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var container = document.getElementById('timeline');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
      type: 'string',
      id: 'Room'
    });
    dataTable.addColumn({
      type: 'string',
      id: 'Name'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'Start'
    });
    dataTable.addColumn({
      type: 'date',
      id: 'End'
    });
    dataTable.addRows([
      ['Magnolia Room', 'Google Charts', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
      ['Magnolia Room', 'App Engine', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)]
    ]);

    var options = {
      timeline: {
        showRowLabels: false
      },
      avoidOverlappingGridLines: false
    };

    chart.draw(dataTable, options);
  }

Answer 1

您已经发现，没有用于设置x轴标签样式的时间轴选项。
但是您可以在图表的'ready'事件中手动更改它们。

google.visualization.events.addListener(chart, 'ready', function () {
  var labels = container.getElementsByTagName('text');
  Array.prototype.forEach.call(labels, function(label) {
    label.setAttribute('font-weight', 'normal');
  });
});

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

google.charts.load('current', {
  'packages': ['timeline']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('timeline');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({
    type: 'string',
    id: 'Room'
  });
  dataTable.addColumn({
    type: 'string',
    id: 'Name'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'Start'
  });
  dataTable.addColumn({
    type: 'date',
    id: 'End'
  });
  dataTable.addRows([
    ['Magnolia Room', 'Google Charts', new Date(0, 0, 0, 14, 0, 0), new Date(0, 0, 0, 15, 0, 0)],
    ['Magnolia Room', 'App Engine', new Date(0, 0, 0, 15, 0, 0), new Date(0, 0, 0, 16, 0, 0)]
  ]);

  var options = {
    timeline: {
      showRowLabels: false
    },
    avoidOverlappingGridLines: false
  };

  google.visualization.events.addListener(chart, 'ready', function() {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      label.setAttribute('font-weight', 'normal');
    });
  });

  chart.draw(dataTable, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="timeline" style="height: 180px;"></div>