Удалите жирные метки в графике Google. - PullRequest
Новая
       11

Удалите жирные метки в графике Google.

0 голосов
/ 27 сентября 2018

На следующем рисунке:

enter image description here

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

1 Ответ

0 голосов
/ 27 сентября 2018

, как вы обнаружили, нет вариантов шкалы времени для стилизации надписей оси 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>
...