我无法让我的多线图在启动时制作动画 - 当我从数据库中获取多线图的数据点时,我已经在下面的代码中添加了一些点的样本:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Count of Users');
data.addColumn('number', 'Count of Items');
data.addColumn('number', 'Count of Locations');
data.addRows([
[[8,07,06],1,181,181],
[[8,08,52],1,73,73],
[[8,09,43],1,204,204],
[[8,10,06],1,209,209],
[[8,10,27],1,334,334],
[[8,10,47],1,345,345],
[[8,12,24],1,852,852],
[[8,13,52],1,317,317],
[[8,43,01],1,538,538],
[[8,51,53],1,50,50],
[[8,55,01],1,50,50],
[[8,55,30],1,99,99],
[[8,56,27],1,51,51],
[[8,57,11],1,50,50],
[[8,57,58],1,50,50],
[[8,58,32],1,50,50],
[[8,59,42],1,16,16],
[[9,08,54],1,16,16],
[[9,09,41],1,2,2],
[[9,10,07],1,9,9],
[[9,10,53],1,35,35],
[[9,11,31],1,4,4],
[[9,11,45],1,3,3]
]);
var options = {
title: 'Updated every 3 Hours',
chart: {
animation: {
duration: 2000,
easing: 'linear',
startup: true
},
},
width: 1000,
height: 500
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
截至目前,呈现的是静态多线图: enter image description here