Animation

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

Contenus

1. Présentation
2. Modifications compatibles
3. Comportement de transition
4. Événements
5. Exemples

Présentation

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

Pour animer le modèle au démarrage:

1. Définissez les données et les options de votre graphique. Veillez à définir une durée d'animation et un type de lissage.
2. Définir animation: {"startup": true} : si vous définissez cette option dans vos options, le graphique démarrera avec des valeurs de séries dessinées à la référence et s'animera à son é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. Différents types de graphiques acceptent différentes modifications. Reportez-vous à la section Modifications compatibles pour savoir quelles modifications sont acceptées pour quels types de graphiques.
3. Spécifiez le comportement de transition à l'aide de l'option animation.
4. Appelez chart.draw() sur votre graphique pour passer aux 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 compatibles

La compatibilité des différents types de transitions varie d'un graphique à l'autre. Les différents types de transitions sont les suivants:

• Modifications apportées aux valeurs du tableau de données uniquement. Le nombre de lignes et de colonnes est le même, et les colonnes conservent leurs types et leurs rôles d'origine.
• Ajout ou suppression de colonnes (séries).
• 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) : modifier la fenêtre d'affichage est utile pour obtenir des effets de zoom et de dérive (voir les exemples ci-dessous)
  • Valeurs vAxis.ticks et 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 du graphique (chartArea.height, chartArea.width, chartArea.top, chartArea.left)

Type de modification	Types de graphiques valides
Changements de valeur	ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Jauge
Ajouter/supprimer des lignes	Graphique à nuage de points, graphique à courbes, aire, graphique à bulles, graphique combiné (avec des lignes et des aires uniquement)
Ajouter/Supprimer des colonnes	ScatterChart, LineChart, AreaChart, BarBar, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart et ComboChart
Modifier les options du graphique	ScatterChart, LineChart, AreaChart, BarBar, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart et ComboChart

Comportement de transition

Nom
durée.animation	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 lentement et accélérez. "out" - Ease out - Démarrage rapide et ralenti. "inAndOut" : lissez l'entrée et la sortie : démarrez lentement, accélérez, puis ralentissez. Type : chaîne Par défaut : "linear"
animation.startup	Détermine si le graphique doit s'animer lors du tracé 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 "Prêt" est déclenché une fois qu'il est prêt pour les appels de méthodes externes. Le graphique déclenchera l'événement animationfinish lorsque la transition sera terminée.

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

Exemples

Modifications 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 du 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);
      }

    }