Способ установки времени начала и окончания для временной шкалы Google

Question

Способ установки времени начала и окончания для временной шкалы Google

1

Не удалось найти ответ в официальной документации.

По умолчанию Google Timeline "сжимает" область диаграммы, так что первый штрих касается левого края, а последний штрих - справа:

 |XXXXX-----YYYY---------|        
 |----ZZZ---YYYY----AAAAA|        
Apr     May     Jun     Jul

Я хочу переопределить это поведение и вручную установить время начала и окончания графика (переопределить масштаб), например:

 |------------XXXXX-----YYYY----------------|        
 |---------------ZZZ----YYYY-----AAAAA------|        
 Jan   Feb   Mar  Apr   May   Jun   Jul   Aug

В моем примере я хочу показать график с января по август.

Dan 27 июнь 2017, в 16:58

Источник

Теги:

javascript

charts

google-visualization

1 ответ

Ещё вопросы

WhiteHat · Accepted Answer · 2017-06-27T14-11-00.000Z

перечисленные в примечаниях к выпуску от 2 октября 2015 г.

опции использования hAxis.minValue & hAxis.maxValue

    hAxis: {
      minValue: new Date(2017, 0, 1),
      maxValue: new Date(2017, 7, 1)
    }

см. следующий рабочий фрагмент...

google.charts.load('current', {
  callback: function () {
    var container = document.getElementById('chart_div');
    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([
      [ '1', 'A', new Date(2017, 1, 1), new Date(2017, 1, 10) ],
      [ '2', 'B', new Date(2017, 3, 1),  new Date(2017, 3, 10) ],
      [ '3', 'C', new Date(2017, 5, 1), new Date(2017, 5, 10) ],
    ]);

    function drawChart() {
      chart.draw(dataTable, {
        hAxis: {
          minValue: new Date(2017, 0, 1),
          maxValue: new Date(2017, 7, 1)
        }
      });
    }

    $(window).resize(drawChart);
    drawChart();
  },
  packages: ['timeline']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>