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

Question

In the following image:

12 AM / 12 PM / 12 AM is bold for the horizontal label. How do I make all of the labels non-bold? I didn't see an option in their documentation: https://developers.google.com/chart/interactive/docs/gallery/timeline .

Here is an example of it in 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

as you've found, there are no timeline options for styling the x-axis labels.
but you can change them manually, on the chart's 'ready' event.

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

see following working snippet...

 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>