一种为 Google Timeline Chart 设置自定义开始和结束时间的方法

debugcn 发表于 Dev

和

默认情况下，Google 时间轴会“缩小”图表区域，以便第一个条形接触左侧边缘，最后一个条形接触右侧：

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

我想覆盖此行为并手动设置图表的开始和结束时间（覆盖比例），如下所示：

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

在我的示例中，我想显示从一月到八月的图表。

白帽

从 2015 年 10 月 2 日起在发行说明中列出

使用选项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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。