Animation

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

Inhalt

  1. Overview
  2. Unterstützte Änderungen
  3. Verhalten bei Wechsel
  4. Ereignisse
  5. Beispiele

Übersicht

Google-Diagramme können auf zwei Arten reibungslos animiert werden: 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.

Animation 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 diese Option in den Optionen festlegen, beginnt das Diagramm mit Reihenwerten, die an der Basis gezeichnet werden, und animiert sich in ihrem endgültigen Zustand.
  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 die Optionen. Bei verschiedenen Diagrammtypen werden unterschiedliche Änderungen unterstützt. Unter Unterstützte Änderungen erfahren Sie, welche Änderungen für welche Diagrammtypen unterstützt werden.
  3. Legen Sie das Übergangsverhalten mit der Option Animation fest.
  4. Rufen Sie chart.draw() in Ihrem Diagramm auf, um zu den neuen Werten überzugehen.

Hier ist ein einfaches Beispiel, bei dem der einzelne Wert in einem Balkendiagramm bei jedem Klick auf eine Schaltfläche geändert wird: 

   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 Arten von Übergängen variiert von Diagramm zu Diagramm. Es gibt folgende Arten von Übergängen:

  • Nur Änderungen an Datentabellenwerten. Die Anzahl der Zeilen und Spalten ist gleich und die Spalten behalten ihre ursprünglichen Typen und Rollen.
  • Spalten (Reihen) hinzufügen oder entfernen
  • Hinzufügen oder Entfernen von Zeilen (Kategorien)
  • Änderungen an den Diagrammoptionen. Derzeit werden die folgenden Optionen bei einer Änderung animiert:
    • Ansichtsfenster (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max): Das Ändern des Ansichtsfensters ist nützlich, um Zoomeffekte 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 ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge
Zeilen hinzufügen/entfernen ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (nur mit Linien-/Flächendiagramm)
Spalten hinzufügen/entfernen ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart
Diagrammoptionen ändern ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart

Verhalten bei der Umstellung

Name
animation.duration

Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen.

Typ:Zahl
Standard: 0
animation.easing

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

  • "linear" – Konstante Geschwindigkeit
  • „in“ – Beschleunigen – langsam starten.
  • „out“ – Ease Out – Starte schnell und langsamer.
  • „inAndOut“ – Leichtes Hin- und Herausbewegen: Starte langsam, beschleunige und dann langsamer.
Typ: String
Standardeinstellung: „linear“
animation.startup

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

Typ: Boolesch
Standard falsch

Ereignisse

Beim Zeichnen eines Diagramms wird ein "ready"-Ereignis ausgelöst, sobald das Diagramm für externe Methodenaufrufe bereit ist. Das Diagramm löst das animationfinish-Ereignis aus, wenn der Übergang abgeschlossen ist.

Name
animationfinish

Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist.

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

Diagrammgröße ä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);
      }

    }