Animate Google線形圖中的新數據

Question

我正在製作一個折線圖，用戶交互時會出現線條並消失。有沒有一種方法來動畫像圖表啓動動畫一樣添加的數據？或者淡入淡出以便它不那麼突兀？

我的一個想法是將新數據設置爲0，然後讓它具有新數據的動畫，但想知道是否有另一種方式。

希望是有道理的

Answer 1

從一個數據集的動畫到另一個，重繪新的數據在同一個圖表。

請參閱以下工作片段。每一列中的數據被「交換」重繪之前...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = google.visualization.arrayToDataTable([["PR","CE","PE"],["5500",1875,2025],["6000",61500,104775],["6100",450,13725],["6500",35400,421800],["6600",150,121950],["6700",600,770925],["6800",13650,370425],["6900",33375,586650],["7000",744375,1122075],["7100",229200,355875],["7200",199800,689850],["7300",461550,244425],["7400",442950,439125],["7500",835350,484725],["7600",459000,82800],["7700",482250,48000],["7800",893250,11550],["7900",1215600,13500],["8000",741150,93525],["8100",242325,6150],["8200",326175,1500],["8300",365850,75],["8500",104850,2925],["9000",13050,11775]]); 
 

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

 
    var options = { 
 
     animation: { 
 
     startup: true, 
 
     duration: 2000, 
 
     easing: 'linear' 
 
     } 
 
    }; 
 

 
    var redrawTimes = 0; 
 
    google.visualization.events.addListener(chart,'animationfinish',function() { 
 
     for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     var swap1 = data.getValue(i, 2); 
 
     var swap2 = data.getValue(i, 1); 
 
     data.setValue(i, 1, swap1); 
 
     data.setValue(i, 2, swap2); 
 
     } 
 
     if (redrawTimes < 5) { 
 
     setTimeout(function() { 
 
      chart.draw(data, options); 
 
      redrawTimes++; 
 
     }, 2000); 
 
     } 
 
    }); 
 

 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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

Answer 2

只要使用options它包含了動畫設置數據添加到您的DataTable和再次在圖表上的呼叫.draw()。

選項可能看起來像

var options = { 
    animation: { 
    duration: 600 
    } 
}; 

然後就是打電話chart.draw(DataTable, options)動畫吧。

查看示例live at codepen。只需用按鈕添加數據，它會順利地添加到該行。