如何在谷歌时间轴范围图表中设置X轴的日期在X轴上,以及使X轴可滚动

时间:2015-12-17 10:54:14

标签: javascript php charts

我想在Google范围条形图中设置X轴上的最小和最大日期(范围),但无法使用以下代码设置它:

  google.load('visualization', '1', {packages: ['timeline']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Activity', 'Start Time', 'End Time'],
    ['Sleep',
     new Date(2014, 10, 15, 0, 30),
     new Date(2014, 10, 15, 6, 30)],
    ['Eat Breakfast',
     new Date(2014, 10, 17, 6, 45),
     new Date(2014, 10, 18, 7)],
    ['Get Ready',
     new Date(2014, 10, 19, 7, 4),
     new Date(2014, 10, 22, 7, 30)],
    ['Commute To Work',
     new Date(2014, 10, 22, 7, 30),
     new Date(2014, 10, 24, 8, 30)],
    ['Work',
     new Date(2014, 10, 24, 8, 30),
     new Date(2014, 10, 25, 17)],
    ['Commute Home',
     new Date(2014, 10,  25, 17),
     new Date(2014, 10,  26, 18)],
    ['Gym',
     new Date(2014, 10, 26, 18),
     new Date(2014, 10,  27, 18, 45)],
    ['Eat Dinner',
     new Date(2014, 10,  27, 19),
     new Date(2014, 10,  28, 20)],
    ['Get Ready For Bed',
     new Date(2014, 10,  28, 21),
     new Date(2014, 10,  29, 22)]
  ]);

  var options = {
    width: 800,
    height: 500,
    legend: {position: 'none'},
    enableInteractivity: false,
    hAxis: {
        window: 'explicit',
        viewWindow: {
          min: new Date(2014, 10, 14),
          max: new Date(2014, 10, 20)
      }
    },
            ticks: [new Date(2014, 10, 14), new Date(2014, 10, 15), new Date(2014, 10, 16)]
  };

  var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

  chart.draw(data, options);
}

以下是在线编辑上述代码的网址: https://jsfiddle.net/t8Luy7qu/

我试图将最短日期设置为2014年11月14日,最长日期设置为2014年11月20日,因此图表应该可以在11月20日之后水平滚动(在当前图表中截至11月28日)。

为了实现相同的功能,我已经使用了以下URL: set x Axis range in google chart

它适用于X轴上的数字数据,但我使用日期,所以任何人都可以帮助我吗?

0 个答案:

没有答案