การออกแบบภาพเคลื่อนไหว

หน้านี้อธิบายวิธีสร้างภาพเคลื่อนไหวของการแก้ไขแผนภูมิ แทนที่จะใช้การแก้ไขทันที

เนื้อหา

ภาพรวม

แผนภูมิของ Google อาจเคลื่อนไหวได้อย่างราบรื่นด้วย 1 ใน 2 วิธี ไม่ว่าจะเป็นเมื่อเริ่มต้นใช้งานเมื่อวาดแผนภูมิเป็นครั้งแรก หรือเมื่อวาดแผนภูมิใหม่หลังจากเปลี่ยนแปลงข้อมูลหรือตัวเลือก

วิธีทำให้เคลื่อนไหวเมื่อเริ่มต้นใช้งาน

  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.min, vAxis.viewWindow.max, hAxis.viewWindow.min, hAxis.viewWindow.max) — การเปลี่ยนหน้าต่างมุมมองมีประโยชน์สำหรับการได้เอฟเฟกต์ "ซูม" และ "ลอย" ต่อเนื่อง (ดูตัวอย่างด้านล่าง)
    • ค่า vAxis.ticks และ hAxis.ticks
    • vAxis.gridlines.countและhAxis.gridlines.count
    • vAxis.directionและhAxis.direction
    • vAxis.baselineและhAxis.baseline
    • vAxis.logScaleและhAxis.logScale
    • ขนาดแผนภูมิ (height และ width)
    • พื้นที่ในแผนภูมิ (chartArea.height, chartArea.width, chartArea.top, chartArea.left)
ประเภทการปรับเปลี่ยน ประเภทแผนภูมิที่ถูกต้อง
การเปลี่ยนแปลงค่า แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเทียน, แผนภูมิพื้นที่แบบขั้นบันได, แผนภูมิผสม, แผนภูมิคอลัมน์
การเพิ่ม/นำแถวออก แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, BubbleChart, แผนภูมิผสม (เฉพาะชุดเส้น/พื้นที่เท่านั้น)
การเพิ่ม/ลบคอลัมน์ แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเชิงเทียน, แผนภูมิพื้นที่แบบขั้น, แผนภูมิผสม
การแก้ไขตัวเลือกแผนภูมิ แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเชิงเทียน, แผนภูมิพื้นที่แบบขั้น, แผนภูมิผสม

ลักษณะการทำงานของการเปลี่ยน

ชื่อ
animation.duration

ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที โปรดดูรายละเอียดในเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
animation.easing

ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้

  • "เชิงเส้น" - ความเร็วคงที่
  • "เข้า" - ค่อยๆ เริ่ม - เริ่มต้นช้าๆ แล้วเร่งความเร็ว
  • "out" - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง
  • 'inAndOut' - ค่อยๆ เข้าและออก - เริ่มช้าๆ เร่งความเร็ว แล้วลดความเร็ว
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
animation.startup

กำหนดว่าแผนภูมิจะเคลื่อนไหวเมื่อวาดครั้งแรกหรือไม่ หากเป็น true แผนภูมิจะเริ่มต้นที่เกณฑ์พื้นฐานและเคลื่อนไหวเป็นสถานะสุดท้าย

ประเภท: บูลีน
ค่าเริ่มต้น false

กิจกรรม

เมื่อวาดแผนภูมิ เหตุการณ์ "พร้อม" จะเริ่มทำงานเมื่อแผนภูมิพร้อมสำหรับการเรียกเมธอดภายนอก แผนภูมิจะเริ่มทํางานเหตุการณ์ 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);
      }

    }