Question

我需要帮助才能制作谷歌图表动画，我希望甜甜圈在5秒钟内进行围栏重新填充。我不知道这样做。谢谢你的帮助。我的代码：

<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', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mujeres', 9],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300,
                        'is3D': true,
                       'animation': { duration: 1000, easing: 'out' }
                   };

        var chart = new google.visualization.PieChart(document.getElementById('estusuario'));
        chart.draw(data, options);
        setTimeout(function (){
            chart.draw(data, options);
        }, 1000);    
      }          

    </script>

Answer 1

正如评论中所指出的，API提供的动画不支持PieCharts

阅读Supported Modifications主题

您可以使用setValue进行更改并重新绘制图表... 如果你想为它设置动画，我会使用requestAnimationFrame

Playground

google.load('visualization', '1.0', {'packages':['corechart']});    
google.setOnLoadCallback(drawChart);
var options = {
  'title':'How Much Pizza I Ate Last Night',
  'width':400,
  'height':300,
  'is3D': true
}; 
var chart, data, array = [
  ['Mujeres', 9],
  ['Onions', 1],
  ['Olives', 1],
  ['Zucchini', 1],
  ['Pepperoni', 2]
];
var estusuario = document.getElementById('estusuario');
var button = document.getElementById('add');
function drawChart () { 
  data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows(array);
  chart = new google.visualization.PieChart(estusuario);
  chart.draw(data, options);
}
function changeChart () {
  var x = data.getValue(1, 1);
  data.setValue(1, 1, x + 1);
  chart.draw(data, options);
}
button.addEventListener('click', changeChart);

<button id="add">Add</button>
<div id="estusuario"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</body>

我该如何制作谷歌图表动画？

1 个答案: