Question

默认情况下，Google时间线＆＃34;收缩＆＃34;图表区域，以便第一个小节触及左边缘，最后一个小节触及右边：

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

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

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

在我的例子中，我想在1月到8月间显示图表。

Answer 1

列在Release Notes from October 2, 2015

中

使用选项hAxis.minValue＆amp; hAxis.maxValue

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

请参阅以下工作代码段...

＆＃13;

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

＆＃13;

<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>

＆＃13;

一种为Google时间线图表设置自定义开始和结束时间的方法

1 个答案: