動畫

本頁說明如何為圖表修改內容加上動畫效果,而不是立即套用變更。

目錄

總覽

Google 圖表可透過以下兩種方式之一流暢顯示動畫:首次繪製圖表時啟動,或是在變更資料或選項後重新繪製圖表時。

如要在啟動時建立動畫:

  1. 設定圖表資料和選項。請務必設定動畫時間長度和加/減速類型。
  2. 設定 animation: {"startup": true} — 在選項中設定 — 在圖表中以繪製於基準的序列值開始,並加上動畫到最終狀態的動畫效果。
  3. 呼叫 chart.draw(),傳入您的資料和選項。

如何為轉場效果加上動畫效果:

  1. 從已轉譯的圖表開始著手。
  2. 修改資料表或選項。不同的圖表類型支援不同的修改功能。請參閱支援的修改項目,瞭解支援的圖表類型支援哪些修改項目。
  3. 使用動畫選項指定轉場行為。
  4. 在圖表上呼叫 chart.draw(),以便轉換為新的值。

以下提供一個簡單的範例,每次點選按鈕時,會變更長條圖中顯示的單一值:

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

支援的修改

轉換類型支援不同的圖表類型。不同類型的轉換如下:

  • 僅變更資料表值。資料列和資料欄的數量相同,這些資料欄仍會維持原始類型和角色。
  • 新增或移除資料欄 (系列)。
  • 新增或移除資料列 (類別)。
  • 圖表選項變更。目前可在變更時加入動畫的選項包括:
    • 檢視視窗 (vAxis.viewWindow.minvAxis.viewWindow.maxhAxis.viewWindow.minhAxis.viewWindow.max):變更檢視視窗有助於達成「縮放」和連續「偏移」效果 (請參閱下方範例)
    • vAxis.tickshAxis.ticks
    • vAxis.gridlines.counthAxis.gridlines.count
    • vAxis.directionhAxis.direction
    • vAxis.baselinehAxis.baseline
    • vAxis.logScalehAxis.logScale
    • 圖表大小 (heightwidth)
    • 圖表區域 (chartArea.heightchartArea.widthchartArea.topchartArea.left)
修改類型 有效圖表類型
值變更 散佈圖、折線圖、面積圖、長條圖、泡泡圖、柱圖、K 線圖、SteppedAreaChart、ComboChart、Gauge
新增/移除資料列 散佈圖、折線圖、面積圖、泡泡圖、組合圖 (僅限折線/區域序列)
新增/移除資料欄 散佈圖、折線圖、面積圖、長條圖、泡泡圖、柱狀圖、K 線圖、SteppedAreaChart、ComboChart
修改圖表選項 散佈圖、折線圖、面積圖、長條圖、泡泡圖、柱狀圖、K 線圖、SteppedAreaChart、ComboChart

轉換行為

名稱
animation.duration

此為動畫的時間長度,以毫秒為單位。詳情請參閱動畫說明文件

類型:數字
預設值:0
animation.easing

套用至動畫的加/減速功能。可用選項如下所示:

  • 「線性」- 固定速度。
  • 「in」 - 減輕 - 開始緩慢並加快速度。
  • 'out' - 簡化 - 啟動並放慢速度。
  • 「inAndOut」- 加速進出,先放慢速度、放慢速度再放慢。
類型:字串
預設:「線性」
animation.startup

指定圖表是否會在初次繪圖時顯示動畫。如果設為 true,圖表會從基準開始,並動畫呈現最終狀態。

類型:布林值
預設 false

事件

繪製圖表時,一旦圖表準備好可供外部方法呼叫,就會觸發「Ready」事件。轉換完成後,圖表會觸發 animationfinish 事件。

名稱
animationfinish

轉場動畫播放完畢時觸發。

屬性:

示例

值異動

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

新增及移除資料列

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

新增及移除資料欄

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

變更檢視視窗

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

變更圖表大小

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

   
}