用Google可視化動畫製作餅圖

我正在試驗google圖表。我想要一個餅圖從0％到75％進行動畫製作（請參閱下圖）。我試圖通過谷歌圖表實現這一點。我創建了兩組數據，其中一組以99％開始，另一組以1％開始。我想反轉和動畫這些。我已經通過動畫實現了數值的改變，但無法弄清楚如何讓它們變成動畫。用Google可視化動畫製作餅圖

<html> 
    <head> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 

     google.load('visualization', '1.0', {'packages':['corechart']}); 

     google.setOnLoadCallback(drawChart); 

     function drawChart() { 

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

     data.addRows(2); 
     data.setValue(0, 0, 'Work'); 
     data.setValue(0, 1, 1); 
     data.setValue(1, 0, 'Eat'); 
     data.setValue(1, 1, 99); 

     var options = { 
         width:500, 
         height:500, 
         animation: {duration: 1000, easing: 'out',} 
         }; 

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

     chart.draw(data, options); 

     function aniChart(d,o){ 
      for (var i=1; i<100; i++) { 
      data.setValue(0, 1, i); 
      } 

      for (var i=99; i>00; i--) { 
      data.setValue(1, 1, i); 
      } 
      setTimeout(function(){ 
      chart.draw(data, options); 
      }, 1000); 

     }; 

     aniChart(); 

     } 
    </script> 
    </head> 

    <body> 
    <div id="chart_div"></div> 
    </body> 
</html>

chart

來源

2013-06-21 TechyDude

你想讓它去的藍/紅/藍/紅...等等作爲第一次迭代？ – Fabi

理想情況下，它會先是白色，然後顏色會像鍾針一樣動畫到所需的百分比。 – TechyDude

'aniChart'功能錯誤。您正在循環所有的值，然後進行最後一次延遲繪製調用。沒有動畫循環。 – daVe

我認爲，功能不被谷歌圖表API的支持 - 是指Supported Modifications

我認爲，如果你使用一個不同的圖表工具可能會更容易，如本http://bl.ocks.org/mbostock/1346410

來源

2013-06-26 17:08:28 Fabi

圖表示例非常好。它依賴於d3庫，它也非常出色。它需要支持SVG的瀏覽器。適合移動應用程序。你可以動畫，添加觸摸事件，用一些JS交互式地改變餡餅楔子。 – mbokil

<html> 
<head> 
    <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>   
</head> 
<body> 
    <div id="piechart" style="width: 900px; height: 500px;"></div> 

    <script> 
       google.setOnLoadCallback(drawChart); 
    function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work',  11], 
     ['Eat',  2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities',   
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 
    chart.draw(data, options); 

    var counter = 0; 

    var handler = setInterval(function(){ 
     counter = counter + 0.1 
     options = { 
      title: 'My Daily Activities',   
      slices: { 1: {offset: counter},      
        3: {offset: counter},      
        5: {offset: counter}, 
      } 
     }; 
     chart.draw(data, options); 

     if (counter > 0.3) clearInterval(handler); 
    }, 200);   
    } 
    </script> 
</body>

來源

2015-10-06 07:13:06

將這個元素放在body標籤

和

11. Angular2谷歌餅圖可視化

12. 樹可視化和動畫

13. Stacked Google可視化圖表

14. Google可視化圖表

15. 用Google地圖繪製餅圖片

16. 使用Google Databinding動畫視圖寬度

17. 斯威夫特3：CAShapeLayer掩膜不爲餅圖動畫製作動畫

18. AS3中的動畫餅圖

19. D3餅圖文/動畫

20. gRaphael餅圖：添加動畫

21. RaphaelJs餅圖動畫懸停

22. 如何在Google可視化儀表板中使用日期篩選餅圖

23. 從Google可視化餅圖（核心圖表）中刪除懸停工具提示

24. 動畫定製視圖類

25. 如何製作餅圖可點擊？

26. 互動餅圖：用餅圖

27. d3js動畫餅圖使用JSON

28. 單獨製作視圖及其子視圖動畫

29. Google OrgChart - Google可視化

30. Google+風格視圖/片段動畫？

用Google可視化動畫製作餅圖

回答

相關問題