Animazione

In questa pagina viene descritto come animare le modifiche apportate a un grafico, anziché applicarle immediatamente.

Contenuti

  1. Panoramica
  2. Modifiche supportate
  3. Comportamento durante la transizione
  4. Eventi
  5. Esempi

Panoramica

L'animazione dei grafici di Google può avvenire senza problemi in due modi: all'avvio, quando disegna il grafico per la prima volta, o quando ridisegna un grafico dopo aver apportato una modifica ai dati o alle opzioni.

Per eseguire l'animazione all'avvio:

  1. Imposta le opzioni e i dati del grafico. Assicurati di impostare la durata e il tipo di easing dell'animazione.
  2. Imposta animation: {"startup": true}: se imposti questa opzione nelle opzioni, il grafico inizierà con i valori della serie tracciati in base alla base di riferimento e verrà animato per raggiungere lo stato finale.
  3. Chiama chart.draw(), trasmettendo dati e opzioni.

Per animare una transizione:

  1. Inizia con un grafico già sottoposto a rendering.
  2. Modifica la tabella di dati o le opzioni. Tipi di grafico diversi supportano modifiche diverse; consulta la sezione Modifiche supportate per scoprire quali modifiche sono supportate per i tipi di grafici che utilizzi.
  3. Specifica il comportamento della transizione utilizzando l'opzione animation.
  4. Richiama chart.draw() sul grafico per eseguire la transizione ai nuovi valori.

Ecco un semplice esempio che modifica il singolo valore presentato in un grafico a barre a ogni clic su un pulsante: 

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

Modifiche supportate

Il supporto per diversi tipi di transizioni varia da un grafico all'altro. I diversi tipi di transizioni sono:

  • Modifiche solo ai valori della tabella di dati. Il numero di righe e colonne è lo stesso e le colonne mantengono i tipi e i ruoli originali.
  • Aggiunta o rimozione di colonne (serie).
  • Aggiunta o rimozione di righe (categorie).
  • Modifiche alle opzioni del grafico. Al momento, le opzioni che si animano al momento della modifica includono:
    • la finestra di visualizzazione (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max). La modifica della finestra di visualizzazione è utile per ottenere effetti di "zoom" e "deviazione" continui (vedi gli esempi di seguito)
    • Valori di vAxis.ticks e hAxis.ticks
    • vAxis.gridlines.count e hAxis.gridlines.count
    • vAxis.direction e hAxis.direction
    • vAxis.baseline e hAxis.baseline
    • vAxis.logScale e hAxis.logScale
    • dimensioni del grafico (height e width)
    • area del grafico (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
Tipo di modifica Tipi di grafici validi
Modifiche ai valori Grafico a dispersione, grafico a linee, grafico ad area, grafico a barre, grafico a bolle, grafico a colonne, grafico a candele, SteppedAreaChart, grafico combinato, indicatore a contatore
Aggiunta/rimozione di righe Grafico a dispersione, Grafico a linee, Grafico ad area, Grafico a bolle, Grafico combinato (solo con serie a linee/area)
Aggiunta/rimozione di colonne Grafico a dispersione, grafico a linee, grafico ad area, grafico a barre, grafico a bolle, grafico a colonne, grafico a candele, SteppedAreaChart, grafico combinato
Modifica delle opzioni del grafico Grafico a dispersione, grafico a linee, grafico ad area, grafico a barre, grafico a bolle, grafico a colonne, grafico a candele, SteppedAreaChart, grafico combinato

Comportamento della transizione

Nome
animation.duration

La durata dell'animazione, in millisecondi. Per maggiori dettagli, consulta la documentazione sull'animazione.

Tipo:numero
Predefinito:0
animation.easing

La funzione di easing applicata all'animazione. Sono disponibili le seguenti opzioni:

  • 'linear' - Velocità costante.
  • 'in' - Facilità in entrata - Inizia piano e accelera.
  • 'out' - Facilità di uscita - Inizia velocemente e rallenta.
  • 'inAndOut' - Facilità di entrata e uscita - Inizia piano, accelera e poi rallenta.
Tipo:stringa
Predefinito: "lineare"
animation.startup

Determina se il grafico si anima sul disegno iniziale. Se true, il grafico inizierà dalla base di riferimento e si anima fino al suo stato finale.

Tipo: booleano
Predefinito: false

Eventi

Quando disegni un grafico, viene generato un evento "pronto" quando il grafico è pronto per le chiamate di metodi esterne. Il grafico attiverà l'evento animationfinish al termine della transizione.

Nome
animationfinish

Attivato al termine dell'animazione della transizione.

Proprietà:nessuna

Esempi

Modifiche ai valori

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

Aggiungere e rimuovere righe

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

Aggiungere e rimuovere colonne

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

Modificare la finestra di visualizzazione

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

Modificare le dimensioni del grafico

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

    }