Animación

En esta página, se describe cómo animar las modificaciones realizadas en un gráfico, en lugar de aplicarlas al instante.

Contenido

  1. Overview
  2. Modificaciones admitidas
  3. Comportamiento de la transición
  4. Eventos
  5. Ejemplos

Descripción general

Los gráficos de Google pueden animarse sin problemas de dos maneras: al inicio, cuando dibujas el gráfico por primera vez o cuando vuelves a dibujarlo después de realizar un cambio en los datos o las opciones.

Para animar al inicio, haz lo siguiente:

  1. Establece los datos y las opciones del gráfico. Asegúrate de configurar la duración y el tipo de aceleración de la animación.
  2. Establece animation: {"startup": true}: Si configuras esto en tus opciones, el gráfico comenzará con valores de serie dibujados en el modelo de referencia y se animará a su estado final.
  3. Llama a chart.draw() y pasa tus datos y opciones.

Para animar una transición, haz lo siguiente:

  1. Comienza con un gráfico ya renderizado.
  2. Modifica la tabla o las opciones de datos. Los diferentes tipos de gráficos admiten modificaciones diferentes. Consulta Modificaciones admitidas para obtener información sobre las modificaciones compatibles con los tipos de gráficos.
  3. Especifica el comportamiento de la transición con la opción de animación.
  4. Llama a chart.draw() en tu gráfico para realizar la transición a los valores nuevos.

A continuación, te mostramos un ejemplo simple que cambia el valor único presentado en un gráfico de barras con cada clic en un botón: 

   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();
  }

Modificaciones admitidas

La compatibilidad con diferentes tipos de transiciones difiere de un gráfico a otro. Los diferentes tipos de transiciones son los siguientes:

  • Solo cambios en los valores de la tabla de datos. La cantidad de filas y columnas es la misma, y las columnas mantienen sus tipos y funciones originales.
  • Adición o eliminación de columnas (serie).
  • Adición o eliminación de filas (categorías).
  • Cambios en las opciones del gráfico. Actualmente, las opciones que se animarán con los cambios incluyen las siguientes:
    • la ventana de vista (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max): Cambiar la ventana de vista resulta útil para lograr efectos de "zoom" y de "desvío" continuos (consulta los ejemplos a continuación)
    • Valores vAxis.ticks y hAxis.ticks
    • vAxis.gridlines.count y hAxis.gridlines.count
    • vAxis.direction y hAxis.direction
    • vAxis.baseline y hAxis.baseline
    • vAxis.logScale y hAxis.logScale
    • tamaño del gráfico (height y width)
    • área del gráfico (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
Tipo de modificación Tipos de gráficos válidos
Cambios en los valores ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge
Agregar o quitar filas Diagrama de dispersión, Gráfico de líneas, Gráfico de áreas, Gráfico de burbujas y Gráfico combinado (solo con serie de líneas/áreas)
Agregar o quitar columnas ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart
Modificando las opciones del gráfico ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart

Comportamiento de la transición

Nombre
animation.duration

Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones.

Tipo: Número
Valor predeterminado: 0
animation.easing

Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:

  • "lineal": velocidad constante.
  • "in" - Acercarse con suavidad: Comienza despacio y auméntalo.
  • "out": aléjate con facilidad: comienza rápido y desacelera.
  • "inAndOut": Entra y sale con cuidado. Comienza despacio, auméntalo y luego desacelera.
Tipo: string
Predeterminado: "lineal"
animation.startup

Determina si se animará el gráfico en el dibujo inicial. Si es true, el gráfico comenzará en el modelo de referencia y se animará a su estado final.

Tipo: booleano
Predeterminado falso

Eventos

Cuando se dibuja un gráfico, se activa un evento "listo" una vez que el gráfico está listo para llamadas de método externas. El gráfico activará el evento animationfinish cuando se complete la transición.

Nombre
animationfinish

Se activa cuando se completa la animación de transición.

Propiedades: ninguna

Ejemplos

Cambios en los valores

   // 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();
    }

Cómo agregar y quitar filas

    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();

Cómo agregar y quitar columnas

    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();

Cómo cambiar la ventana de vista

    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();

Cómo cambiar el tamaño del gráfico

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

    }