L'animation graphique à secteurs avec Google Visualisation

Je suis expérimenter avec google charts. Je veux un diagramme à secteurs pour animer à partir de 0% à 75% (voir l'image ci-dessous). Je suis d'essayer d'atteindre cet objectif par google charts. Je suis la création de deux ensembles de données, on va commencer à 99%, l'autre à 1%. Je veux inverser la et de les animer. J'ai réalisé la modification des valeurs par le biais de l'animation, mais ne peut pas comprendre comment les amener à animer.

<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>

L'animation graphique à secteurs avec Google Visualisation

vous voulez qu'il aille bleu/rouge/bleu/rouge...et ainsi de suite comme à la première itération?
Idéalement, il serait blanc d'abord, puis la couleur devra animer comme une horloge à la main à l'souhaité pour cent.
aniChart fonction est mal. Vous êtes en boucle dans toutes les valeurs et ensuite faire une finale retardé unique appel. Il n'y a pas de boucle d'animation.

OriginalL'auteur TechyDude | 2013-06-21

  1. 4

    Je crois que la fonction n'est pas pris en charge par Google Charts à l'api, reportez-vous à Appuyé Les Modifications

    Je pense qu'il peut être plus facile si vous utilisez un autre outil graphique comme ce http://bl.ocks.org/mbostock/1346410

    exemple de graphique est excellente. Il s'appuie sur d3 de la bibliothèque qui est aussi excellent. Il nécessite un navigateur qui prend en charge le format SVG. Parfait pour les applications mobiles. Vous pouvez animer, ajoutez une touche d'événements, de modifier la tarte cales de manière interactive avec certains JS.

    OriginalL'auteur Fabi

  2. 3
    <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>

    mettre cet élément dans le corps de la balise <div id="piechart" style="width: 900px; height: 500px;"></div> et <script type="text/javascript" src="google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script> dans la balise head
    Alors que ce code peut répondre à la question, en fournissant plus de contexte sur comment et/ou pourquoi, il résout le problème serait d'améliorer la réponse à long terme de valeur.

    OriginalL'auteur Muhammad Zeeshan Sharif