Animation

Auf dieser Seite wird beschrieben, wie Sie Änderungen an einem Diagramm animieren, anstatt sie sofort anzuwenden.

Inhalt

Übersicht

Google-Diagramme können auf zwei Arten reibungslos animiert werden: entweder beim Start, wenn Sie das Diagramm zum ersten Mal zeichnen, oder wenn Sie ein Diagramm neu zeichnen, nachdem Sie eine Änderung an Daten oder Optionen vorgenommen haben.

So animieren Sie Ihre Creatives beim Start:

  1. Legen Sie die Diagrammdaten und -optionen fest. Legen Sie eine Animationsdauer und einen Easing-Typ fest.
  2. Legen Sie animation: {"startup": true} fest. Wenn Sie dies in den Optionen festlegen, beginnt das Diagramm mit den in der Referenz gezeichneten Serienwerten und wird in den endgültigen Zustand animiert.
  3. Rufen Sie chart.draw() auf und übergeben Sie Ihre Daten und Optionen.

So animieren Sie einen Übergang:

  1. Beginnen Sie mit einem bereits gerenderten Diagramm.
  2. Ändern Sie die Datentabelle oder -optionen. Verschiedene Diagrammtypen unterstützen unterschiedliche Änderungen. Unter Unterstützte Änderungen erfahren Sie, welche Änderungen für welche Diagrammtypen unterstützt werden.
  3. Geben Sie das Übergangsverhalten mit der Option Animation an.
  4. Rufen Sie chart.draw() in Ihrem Diagramm auf, um zu den neuen Werten zu wechseln.

Hier ein einfaches Beispiel, das den einzelnen Wert in einem Balkendiagramm bei jedem Klick auf eine Schaltfläche ändert:

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

Unterstützte Änderungen

Die Unterstützung für verschiedene Übergangstypen unterscheidet sich von Diagramm zu Diagramm. Es gibt folgende Arten von Umstellungen:

  • Nur Änderungen an Datentabellenwerten. Die Anzahl der Zeilen und Spalten ist gleich und die Spalten behalten ihre ursprünglichen Typen und Rollen bei.
  • Spalten (Reihen) hinzufügen oder entfernen.
  • Zeilen (Kategorien) hinzufügen oder entfernen
  • Änderungen an Diagrammoptionen. Derzeit werden folgende Optionen animiert:
    • das Ansichtsfenster (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max) – Das Ändern des Ansichtsfensters ist nützlich, um „Zoomen“ und kontinuierliche „Drift“-Effekte zu erzielen (siehe Beispiele unten)
    • vAxis.ticks- und hAxis.ticks-Werte
    • vAxis.gridlines.count und hAxis.gridlines.count
    • vAxis.direction und hAxis.direction
    • vAxis.baseline und hAxis.baseline
    • vAxis.logScale und hAxis.logScale
    • Diagrammgröße (height und width)
    • Diagrammbereich (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
Änderungstyp Gültige Diagrammtypen
Wertänderungen Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm, Tachometerdiagramm
Zeilen hinzufügen oder entfernen Streudiagramm, Liniendiagramm, Flächendiagramm, Blasendiagramm, Kombinationsdiagramm (nur für Linien-/Flächenreihen)
Spalten hinzufügen/entfernen Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm
Diagrammoptionen ändern Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm

Verhalten bei der Umstellung

Name
Animation.Dauer

Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Animationsdokumentation.

Typ: Zahl
Standard: 0
Animation.Easing

Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:

  • 'linear' - Konstante Geschwindigkeit.
  • 'In' - Ease-In - Startet langsam und beschleunigt.
  • 'out' - Ease Out - Startet schnell und verlangsamt.
  • „inAndOut“ – Einfach ein- und ausschalten – langsam starten, beschleunigen und verlangsamen
Typ: String
Standardeinstellung: „linear“
Animation.Start

Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei true beginnt das Diagramm in der Referenz und wird in den endgültigen Zustand animiert.

Typ: Boolesch
Standardeinstellung false

Ereignisse

Beim Zeichnen eines Diagramms wird das Ereignis „ready“ ausgelöst, sobald das Diagramm für externe Methodenaufrufe bereit ist. Im Diagramm wird das Ereignis animationfinish ausgelöst, wenn die Umstellung abgeschlossen ist.

Name
animationfinish

Wird ausgelöst, wenn die Umstellungsanimation beendet ist.

Eigenschaften:Keine

Beispiele

Wertänderungen

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

Zeilen hinzufügen und entfernen

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

Spalten hinzufügen und entfernen

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

Ansichtsfenster ändern

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

Größe des Diagramms ändern

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

    }