谷歌可視化：動畫線圖 - 增量而不是一次全部？

Question

現在我的代碼看起來是這樣的：

function drawChart() { 

    var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Year'); 
     data.addColumn('number', 'Revenue'); 

     data.addRows([ 
     ['', 0], 
     ['2008', 123], 
     ['2010', 213], 
     ['2012', 654] 
     ]); 

    var options = { 
     hAxis: {textStyle:{color: '#FFF'}}, 
     vAxis: { baseline:0, baselineColor: '#FFF', gridlineColor: '#FFF', textStyle:{color: '#FFF'} }, 
     backgroundColor: 'transparent', 
     legend: { position: 'none' }, 
     colors: ['#FFF'], 
     textStyle:{color: '#FFF'}, 
     pointSize: 10, 
     series: { 
      0: { pointShape: 'star'} 
     }, 
     animation: {startup: true, duration: 5000, easing: 'linear',} 

    }; 



    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 

chart.draw(data, options); 
    } 

我想是我的動畫逐步揭示每一行。我如何去做這件事？

任何幫助將不勝感激。

Answer 1

圖表必須繪製動畫出現

保持到的數據，僅在一個時間

看到下面的工作片斷畫一排...

google.charts.load('current', { 
 
    callback: function() { 
 
    var rawData = [ 
 
     [0, 0], 
 
     [1, 2], 
 
     [2, 1], 
 
     [3, 4], 
 
     [4, 2], 
 
     [5, 8], 
 
     [6, 3], 
 
     [7, 16], 
 
     [8, 4], 
 
     [9, 32] 
 
    ]; 
 

 
    var data = new google.visualization.DataTable({ 
 
     "cols": [ 
 
     {"id":"","label":"X","type":"number"}, 
 
     {"id":"","label":"Y","type":"number"} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     pointSize: 4, 
 
     animation:{ 
 
     startup: true, 
 
     duration: 600, 
 
     easing: 'in' 
 
     }, 
 
     legend: 'none', 
 
     hAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
      max: 9 
 
     } 
 
     }, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
      max: 32 
 
     } 
 
     } 
 
    }; 
 

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

 
    drawChart(); 
 
    setInterval(drawChart, 1200); 
 

 
    var rowIndex = 0; 
 
    function drawChart() { 
 
     if (rowIndex < rawData.length) { 
 
     data.addRow(rawData[rowIndex++]); 
 
     chart.draw(data, options); 
 
     } 
 
    } 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>