Animacja

Na tej stronie opisujemy, jak animować zmiany wprowadzone na wykresie, zamiast je od razu stosować.

Spis treści

  1. Przegląd
  2. Obsługiwane zmiany
  3. Działanie przejścia
  4. Zdarzenia
  5. Przykłady

Omówienie

Animacje Google umożliwiają płynne animowanie na jeden z 2 sposobów – po pierwszym uruchomieniu wykresu lub przy ponownym rysowaniu wykresu po wprowadzeniu zmian w danych lub opcjach.

Aby włączyć animację podczas uruchamiania:

  1. Ustaw dane wykresu i opcje. Pamiętaj, by ustawić czas trwania animacji i typ wygładzania.
  2. Ustaw animation: {"startup": true} – ustawienie tej opcji spowoduje, że początek wykresu będzie oparty na wartościach serii i zostanie animowany do stanu końcowego.
  3. Zadzwoń pod numer chart.draw(), przekazując swoje dane i opcje.

Aby animować przejście:

  1. Zacznij od wykresu, który jest już renderowany.
  2. Zmodyfikuj tabelę lub opcje danych. Różne typy wykresów obsługują różne modyfikacje. Informacje o tym, jakie modyfikacje są obsługiwane w przypadku poszczególnych typów wykresów, znajdziesz w artykule Obsługiwane modyfikacje.
  3. Określ sposób przejścia za pomocą opcji animacji.
  4. Aby przełączyć się na nowe wartości, wywołaj parametr chart.draw() na wykresie.

Oto prosty przykład zmiany pojedynczej wartości przedstawionej na wykresie słupkowym po każdym kliknięciu przycisku: 

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

Obsługiwane zmiany

Różne typy przejść różnią się obsługą poszczególnych wykresów. Różne typy przejść:

  • Zmieniają się tylko wartości w tabeli danych. Liczba wierszy i kolumn jest taka sama, a kolumny zachowują pierwotne typy i role.
  • Dodawanie lub usuwanie kolumn (seria).
  • dodanie lub usunięcie wierszy (kategorii),
  • Zmiany opcji wykresu. Obecnie dostępne są między innymi następujące opcje animacji:
    • okna widoku (vAxis.viewWindow.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max) – zmiana okna widoku jest przydatna do osiągnięcia efektów „powiększenia” i ciągłego dryfu (zobacz przykłady poniżej).
    • Wartości vAxis.ticks i hAxis.ticks
    • vAxis.gridlines.count i hAxis.gridlines.count
    • vAxis.direction i hAxis.direction
    • vAxis.baseline i hAxis.baseline
    • vAxis.logScale i hAxis.logScale
    • rozmiar wykresu (height i width)
    • obszar wykresu (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
Typ modyfikacji Prawidłowe typy wykresów
Zmiany wartości Wykres punktowy, wykres liniowy, wykres warstwowy, wykres słupkowy, wykres bąbelkowy, wykres świecowy, wykres krokowy, wykres mieszany, wykres
Dodawanie/usuwanie wierszy Wykres punktowy, liniowy, warstwowy, bąbelkowy, łączony (tylko seria liniowa i warstwowa)
Dodawanie i usuwanie kolumn Wykres rozproszony, wykres liniowy, wykres warstwowy, wykres słupkowy, wykres bąbelkowy, wykres kolumnowy, świecowy, wykres krokowy, wykres mieszany
Modyfikowanie opcji wykresu Wykres rozproszony, wykres liniowy, wykres warstwowy, wykres słupkowy, wykres bąbelkowy, wykres kolumnowy, świecowy, wykres krokowy, wykres mieszany

Działanie przejścia

Nazwa
animacja.czas trwania

Czas trwania animacji w milisekundach. Szczegółowe informacje znajdziesz w dokumentacji animacji.

Typ: liczba
Wartość domyślna: 0
animacja.wygładzanie

Funkcja wygładzania zastosowana w animacji. Dostępne są te opcje:

  • „linear” – stała szybkość.
  • „in” – Łatwość – Zacznij powoli i przyspieszaj.
  • „out” – zwolnij – uruchamiaj szybko i zwolnij.
  • „inAndOut” – Łatwe włączanie i wyłączanie – zacznij spowalniać, przyspieszać i zwalniać.
Typ: ciąg znaków
Domyślnie: „linear”
animacje.startup,

Określa, czy wykres będzie animowany podczas pierwszego rysowania. Jeśli true, wykres zacznie się w punkcie odniesienia i będzie animowany do ostatniego stanu.

Typ: wartość logiczna
Default (Fałsz) – wartość domyślna

Zdarzenia

Podczas rysowania wykresu zdarzenie „gotowe” jest wywoływane, gdy wykres jest gotowy do wywołań metod zewnętrznych. Po zakończeniu przenoszenia wykres uruchomi zdarzenie animationfinish.

Nazwa
animationfinish

Uruchamiane po zakończeniu animacji przejścia.

Właściwości: brak

Przykłady

Zmiany wartości

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

Dodawanie i usuwanie wierszy

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

Dodawanie i usuwanie kolumn

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

Zmienianie okna widoku

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

Zmienianie rozmiaru wykresu

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

    }