logo标签列表

使用Google可视化工具制作动态饼图

jqueryanimationchartsvisualization
6
我正在尝试使用Google图表。我想让饼图从0％动画到75％（请参见下面的图像）。我正在尝试通过Google图表实现这一点。我正在创建两组数据，其中一组将从99％开始，另一组将从1％开始。我想要反转并动画化它们。我已经通过动画实现了更改值，但无法弄清如何使它们动画化。
<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

你希望在第一次迭代中让它变成蓝色/红色/蓝色/红色...以此类推吗？ - Fabi
理想情况下，它应该首先是白色，然后颜色会像时钟指针一样动画到所需的百分比。 - TechyDude
aniChart函数有误。您正在循环所有值，然后进行最终的单个延迟绘制调用。没有动画循环。 - David Gras
3个回答
4
用简洁的@Muhammad动画循环解决原始问题。
初始值：
- 工作：0% - 饮食：100%
每30毫秒增加1单位并绘制饼图，直到工作达到75%时停止循环。 

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, 0.0);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 100.0);

var options = {
    width:500,
    height:500
};

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

chart.draw(data, options);

// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
    // values increment
    percent += 1;
    // apply new values
    data.setValue(0, 1, percent);
    data.setValue(1, 1, 100 - percent);
    // update the pie
    chart.draw(data, options);
    // check if we have reached the desired value
    if (percent > 74)
        // stop the loop
        clearInterval(handler);
}, 30);

}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

3
图表示例非常出色。它依赖于同样出色的d3库。它需要支持SVG的浏览器。非常适合移动应用程序。您可以使用一些JS进行动画、添加触摸事件、交互式地修改饼图楔形图。 - mbokil
2
<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>

将以下元素放置在body标签中：<div id="piechart" style="width: 900px; height: 500px;"></div>，并将<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> 放置在head标签中。 - Muhammad Zeeshan Sharif
虽然这段代码可能回答了问题，但提供关于它是如何解决问题的方式和/或原因的额外上下文会提高答案的长期价值。 - Keale
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接