我做了什么 我已将谷歌图表添加到我的页面。根据用户选择的日期和持续时间填充数据。 (持续时间可以是任何小时数。)
我需要做什么 我需要确保图表可以容纳所选的持续时间。通过间隔gant数据并使图表可移动。
问题
是否我无法获得图表来容纳大量数据而不会限制数据。我需要间隔开的数据,从而根据搜索到的数据量使图表可移动(响应)。
守则
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);
//////////
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
我还包括了它现在的样子。你可以看到数据很狭窄,想象一下,如果我选择更多时间。谢谢。
有没有办法让时间轴变成ZOOMABLE?