Google图表:折线图无法在启动时制作动画

时间:2015-10-08 12:47:41

标签: google-visualization

我无法让我的多线图在启动时制作动画 - 当我从数据库中获取多线图的数据点时,我已经在下面的代码中添加了一些点的样本:

<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

0 个答案:

没有答案