代码之家 › 专栏 › 技术社区 › David542

删除谷歌时间线图表中的粗体勾号标签

google-visualization charts javascript

David542 · 技术社区 · 6 年前

在下图中:

对于水平标签,12am/12pm/12am为粗体。如何使所有标签都不加粗?我在他们的文档中没有看到选项: https://developers.google.com/chart/interactive/docs/gallery/timeline .

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

1 回复 | 直到 6 年前

WhiteHat 6 年前

正如您所发现的,没有用于设置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>