Javascript 让谷歌图表处理大量数据

Javascript 让谷歌图表处理大量数据,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我所做的 我已经将谷歌图表添加到我的页面。根据用户选择的日期和持续时间填充数据。(持续时间可以是任意小时数) 我需要做什么 我需要确保图表能够适应所选的持续时间。通过隔开甘特图数据并使图表可移动 问题 我无法让图表容纳大量数据,而不限制数据。我需要将数据隔开,从而根据搜索的数据量使图表可移动(响应) 代码 function drawChart() { var data = []; var header = ['Activity', 'Start Time', 'End Time'];

我所做的 我已经将谷歌图表添加到我的页面。根据用户选择的日期和持续时间填充数据。(持续时间可以是任意小时数)

我需要做什么 我需要确保图表能够适应所选的持续时间。通过隔开甘特图数据并使图表可移动

问题

我无法让图表容纳大量数据,而不限制数据。我需要将数据隔开,从而根据搜索的数据量使图表可移动(响应)

代码

function drawChart() {
  var data = [];
  var header = ['Activity', 'Start Time', 'End Time'];
  data.push(header);

  for(var i =0; i < $scope.timelineArr.length;i++){
    var year = $scope.timelineArr[i].thumbnail_date.substring(0,4);
    var month = $scope.timelineArr[i].thumbnail_date.substring(5,7) -1;
    var day = $scope.timelineArr[i].thumbnail_date.substring(8,10);
    var hour = $scope.timelineArr[i].thumbnail_time.substring(0,2);
    var min = $scope.timelineArr[i].thumbnail_time.substring(3, 5);
    console.log(year+ " "+month+ " "+day);
    var tmp = [];
    tmp.push(""+$scope.timelineArr[i].cam_name, new Date(year, month, day, hour, min), new Date(year, month, day, hour, min));
    data.push(tmp);
  }

  $scope.data = google.visualization.arrayToDataTable(data);
  var options = {
    'legend':'left',
    'title':'Camera Events',
    'is3D':true,
    tooltip: {
      isHtml: true
    },
    'width':1000,
    'height':400
  }

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

  $scope.chart.draw($scope.data, options);
我还包括了它现在的样子。正如你所看到的那样,数据非常有限,想象一下如果我选择更多的时间。多谢各位


有没有办法使时间轴可缩放?

我决定将图表包装在一个div中,并根据数据量增加宽度。然后,我使div可以滚动,添加了鼠标滚动监听器来相应地增加/减少div。希望它能帮助别人。
google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);