Animation

Cette page explique comment animer les modifications apportées à un graphique au lieu de les appliquer instantanément.

Sommaire

1. Overview
2. Modifications acceptées
3. Comportement de la transition
4. Événements
5. Exemples

Présentation

L'animation des graphiques Google peut s'effectuer de deux manières différentes : soit au démarrage lorsque vous les dessinez pour la première fois, soit lorsque vous redessinez un graphique après avoir modifié des données ou des options.

Pour créer une animation au démarrage, procédez comme suit:

1. Définissez les données et options du graphique. Veillez à définir la durée de l'animation et le type de lissage de vitesse.
2. Définissez animation: {"startup": true}. Si vous le définissez dans vos options, le graphique commencera avec des valeurs de série dessinées à la référence et s'animera jusqu'à leur état final.
3. Appelez chart.draw() en transmettant vos données et vos options.

Pour animer une transition:

1. Commencez avec un graphique déjà affiché.
2. Modifiez le tableau de données ou les options. Les types de graphiques diffèrent d'un type de graphique à l'autre. Consultez la section Modifications acceptées pour en savoir plus sur les modifications compatibles avec chaque type de graphique.
3. Spécifiez le comportement de la transition à l'aide de l'option animation.
4. Appelez chart.draw() sur votre graphique pour effectuer la transition vers les nouvelles valeurs.

Voici un exemple simple qui modifie la valeur unique présentée dans un graphique à barres à chaque clic sur un bouton:

   function init() {
    var options = {
      width: 400,
      height: 240,
      animation:{
        duration: 1000,
        easing: 'out',
      },
      vAxis: {minValue:0, maxValue:1000}
    };
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'N');
    data.addColumn('number', 'Value');
    data.addRow(['V', 200]);

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

    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      var newValue = 1000 - data.getValue(0, 1);
      data.setValue(0, 1, newValue);
      drawChart();
    }
    drawChart();
  }

Modifications acceptées

La prise en charge des différents types de transitions diffère d'un graphique à l'autre. Les différents types de transitions sont les suivants:

• Modifications apportées aux valeurs des tables de données uniquement. Le nombre de lignes et de colonnes est le même, et les colonnes conservent leurs types et rôles d'origine.
• Ajout ou suppression de colonnes (série).
• Ajout ou suppression de lignes (catégories).
• Modifications apportées aux options du graphique. Actuellement, les options qui s'animent en cas de modification sont les suivantes :
  • Fenêtre d'affichage (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max) : la modification de la fenêtre d'affichage est utile pour obtenir des effets de "zoom" et de "dérive" continus (voir les exemples ci-dessous).
  • vAxis.ticks et valeurs hAxis.ticks
  • vAxis.gridlines.count et hAxis.gridlines.count
  • vAxis.direction et hAxis.direction
  • vAxis.baseline et hAxis.baseline
  • vAxis.logScale et hAxis.logScale
  • Taille du graphique (height et width)
  • zone de graphique (chartArea.height, chartArea.width, chartArea.top, chartArea.left)

Type de modification	Types de graphiques valides
Changements de valeur	Graphique à nuage de points, graphique en courbes, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, jauge
Ajouter/Supprimer des lignes	Graphique à nuage de points, graphique linéaire, graphique en aires, graphique à bulles, graphique combiné (pour les séries linéaires/de zones uniquement)
Ajouter/Supprimer des colonnes	Graphique à nuage de points, Graphique en courbes, Graphique à barres, Graphique à barres, Graphique à colonnes, Graphique en chandeliers japonais, Graphique en courbes, Graphique à barres, Graphique à barres, ComboChart
Modifier les options du graphique	Graphique à nuage de points, Graphique en courbes, Graphique à barres, Graphique à barres, Graphique à colonnes, Graphique en chandeliers japonais, Graphique en courbes, Graphique à barres, Graphique à barres, ComboChart

Comportement de la transition

Nom
animation.duration	Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations. Type:nombre Par défaut:0
animation.easing	Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles : "linear" : vitesse constante. 'in' - Lissage à l'approche : démarrez en douceur, puis accélérez. "out" (lissage à l'éloignement) : démarre rapidement et ralentit. "inAndOut" (aller et venir) : démarre lentement, accélère, puis ralentit. Type:chaîne Par défaut : "linear" (linéaire).
animation.startup	Détermine si le graphique doit s'animer lors du dessin initial. Si la valeur est true, le graphique commence à la référence et s'anime jusqu'à son état final. Type:booléen Valeur par défaut "false"

Événements

Lorsque vous dessinez un graphique, un événement "ready" est déclenché dès que le graphique est prêt à recevoir des appels de méthode externe. Le graphique déclenche l'événement animationfinish une fois la transition terminée.

Nom
animationfinish	Déclenché lorsque l'animation de transition est terminée. Propriétés:aucune

Exemples

Changements de valeur

   // Some raw data (not necessarily accurate)
    var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 165, 938, 522, 998, 450, 114.6],
                    ['2005/06', 135, 1120, 599, 1268, 288, 382],
                    ['2006/07', 157, 1167, 587, 807, 397, 623],
                    ['2007/08', 139, 1110, 615, 968, 215, 409.4],
                    ['2008/09', 136, 691, 629, 1026, 366, 569.6]];
    var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua  Guinea',
                     'Rwanda', 'Average'],
                    ['2004/05', 122, 638, 722, 998, 450, 614.6],
                    ['2005/06', 100, 1120, 899, 1268, 288, 682],
                    ['2006/07', 183, 167, 487, 207, 397, 623],
                    ['2007/08', 200, 510, 315, 1068, 215, 609.4],
                    ['2008/09', 123, 491, 829, 826, 366, 569.6]];

    // Create and populate the data tables.
    var data = [];
    data[0] = google.visualization.arrayToDataTable(rowData1);
    data[1] = google.visualization.arrayToDataTable(rowData2);

    var options = {
      width: 400,
      height: 240,
      vAxis: {title: "Cups"},
      hAxis: {title: "Month"},
      seriesType: "bars",
      series: {5: {type: "line"}},
      animation:{
        duration: 1000,
        easing: 'out'
      },
    };
    var current = 0;
    // Create and draw the visualization.
    var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
            button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee');
          });
      options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country';

      chart.draw(data[current], options);
    }
    drawChart();

    button.onclick = function() {
      current = 1 - current;
      drawChart();
    }

Ajouter et supprimer des lignes

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:100},
      animation: {
        duration: 1000,
        easing: 'in'
      }
    };

    var chart = new google.visualization.LineChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    data.addRow(['100', 123]);
    data.addRow(['700', 17]);
    var button = document.getElementById('b1');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      button.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            button.disabled = false;
          });
      chart.draw(data, options);
    }

    button.onclick = function() {
      if (data.getNumberOfRows() > 5) {
        data.removeRow(Math.floor(Math.random() * data.getNumberOfRows()));
      }
      // Generating a random x, y pair and inserting it so rows are sorted.
      var x = Math.floor(Math.random() * 1000);
      var y = Math.floor(Math.random() * 100);
      var where = 0;
      while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) {
        where++;
      }
      data.insertRows(where, [[x.toString(), y]]);
      drawChart();
    }
    drawChart();

Ajouter et supprimer des colonnes

    var options = {
      width: 400,
      height: 240,
      vAxis: {minValue:0, maxValue:1000},
      animation: {
        duration: 1000,
        easing: 'out'
      }
    };

    var chart = new google.visualization.ColumnChart(
        document.getElementById('visualization'));
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'A');
    data.addColumn('number', 'B');
    data.addRow(['A', 123, 40]);
    data.addRow(['B', 17, 20]);
    var addButton = document.getElementById('b1');
    var removeButton = document.getElementById('b2');
    function drawChart() {
      // Disabling the buttons while the chart is drawing.
      addButton.disabled = true;
      removeButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            // Enabling only relevant buttons.
            addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length;
            removeButton.disabled = (data.getNumberOfColumns() - 1) < 2;
          });
      chart.draw(data, options);
    }
    function shuffleAndDrawChart() {
      for (var i = 0; i < data.getNumberOfRows(); ++i) {
        for (var j = 1; j < data.getNumberOfColumns(); ++j) {
          var num = Math.floor(Math.random() * 1000);
          data.setValue(i, j, num);
        }
      }
      drawChart();
    }
    addButton.onclick = function() {
      data.addColumn('number', chars[data.getNumberOfColumns() - 1]);
      shuffleAndDrawChart();
    }
    removeButton.onclick = function() {
      data.removeColumn(data.getNumberOfColumns() - 1);
      shuffleAndDrawChart();
    }
    drawChart();

Modifier la fenêtre d'affichage

    var options = {
      width: 400,
      height: 240,
      animation: {
        duration: 1000,
        easing: 'in'
      },
      hAxis: {viewWindow: {min:0, max:5}}
    };

    var chart = new google.visualization.SteppedAreaChart(
        document.getElementById('visualization'));
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'x');
    data.addColumn('number', 'y');
    var MAX = 10;
    for (var i = 0; i < MAX; ++i) {
      data.addRow([i.toString(), Math.floor(Math.random() * 100)]);
    }
    var prevButton = document.getElementById('b1');
    var nextButton = document.getElementById('b2');
    var changeZoomButton = document.getElementById('b3');
    function drawChart() {
      // Disabling the button while the chart is drawing.
      prevButton.disabled = true;
      nextButton.disabled = true;
      changeZoomButton.disabled = true;
      google.visualization.events.addListener(chart, 'ready',
          function() {
            prevButton.disabled = options.hAxis.viewWindow.min <= 0;
            nextButton.disabled = options.hAxis.viewWindow.max >= MAX;
            changeZoomButton.disabled = false;
          });
      chart.draw(data, options);
    }

    prevButton.onclick = function() {
      options.hAxis.viewWindow.min -= 1;
      options.hAxis.viewWindow.max -= 1;
      drawChart();
    }
    nextButton.onclick = function() {
      options.hAxis.viewWindow.min += 1;
      options.hAxis.viewWindow.max += 1;
      drawChart();
    }
    var zoomed = false;
    changeZoomButton.onclick = function() {
      if (zoomed) {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = 5;
      } else {
        options.hAxis.viewWindow.min = 0;
        options.hAxis.viewWindow.max = MAX;
      }
      zoomed = !zoomed;
      drawChart();
    }
    drawChart();

Modifier la taille d'un graphique

      google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart () {

      function genData () {
        var array = [];

        for (var i = 0; i < 10; i++) {
          var x = i,
              y = Math.floor(Math.random() * 50),
              z = Math.floor(Math.random() * 25);
          array.push([x, y, z]);
        }
        return array;
      }

      function doubleIt() {
        options.chartArea.height = '100%';
        options.chartArea.width = '100%';
      }

      function halveIt() {
        options.chartArea.height = '50%';
        options.chartArea.width = '50%';
      }

      function goTo50() {
        options.chartArea.left = '50%';
        options.chartArea.top = '50%';
      }

      function goTo10() {
        options.chartArea.left = '10%';
        options.chartArea.top = '10%';
      }

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Y');
      data.addColumn('number', 'Z');

      data.addRows(genData());

      var options = {
        height: 500,
        chartArea: {
          height: '50%',
          width: '50%',
          top: '10%',
          left: '10%'
        },
        colors: ['#ee8100', '#9575cd'],
        animation: {
          duration: 1500,
          easing: 'linear',
          startup: true
        },
        vAxis: {
          ticks: [10, 20, 30, 40, 50, 60],
          gridlines: {color: '#ccc'}
        },
        hAxis: {
          ticks: [0, 4, 8, 12],
          gridlines: {color: '#ccc'}
        },
        legend: {position: 'none'},
        enableInteractivity: false
      };

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


      chart.draw(data, options);

      var btns = document.querySelector('#btns');
      btns.onclick = function (e) {
        switch(e.target.id) {
            case "size":
              options.chartArea.height === '50%' ? doubleIt() : halveIt();
              break;
            case "slide":
              options.chartArea.left === '10%' ? goTo50() : goTo10();
        }

        chart.draw(data, options);
      }

    }