หน้านี้อธิบายวิธีสร้างภาพเคลื่อนไหวของการแก้ไขแผนภูมิแทนการแก้ไขทันที
เนื้อหา
ภาพรวม
แผนภูมิของ Google อาจสร้างภาพเคลื่อนไหวได้อย่างราบรื่นโดยใช้ 1 ใน 2 วิธีต่อไปนี้ ไม่ว่าจะเป็นการเริ่มต้นใช้งานเมื่อวาดแผนภูมิเป็นครั้งแรก หรือเมื่อวาดแผนภูมิใหม่หลังจากทําการเปลี่ยนแปลงข้อมูลหรือตัวเลือก
วิธีการสร้างภาพเคลื่อนไหวเมื่อเปิดเครื่อง
- ตั้งค่าข้อมูลแผนภูมิและตัวเลือก อย่าลืมกําหนดระยะเวลาของภาพเคลื่อนไหวและประเภทการค่อยๆ เปลี่ยน
-
การตั้งค่า
animation: {"startup": true}
- การตั้งค่าในตัวเลือกจะทําให้แผนภูมิเริ่มต้นด้วยค่าชุดที่วาดเป็นฐาน และทําให้เคลื่อนไหวเป็นสถานะสุดท้าย - โทรหา
chart.draw()
เพื่อส่งผ่านข้อมูลและตัวเลือกของคุณ
วิธีการสร้างภาพเคลื่อนไหวการเปลี่ยน
- เริ่มต้นด้วยแผนภูมิที่แสดงผลแล้ว
- แก้ไขตารางหรือตัวเลือกข้อมูล แผนภูมิประเภทต่างๆ รองรับการแก้ไขที่ต่างกัน ไปที่การแก้ไขที่รองรับเพื่อดูการแก้ไขที่รองรับสําหรับแผนภูมิประเภทต่างๆ
- ระบุลักษณะการเปลี่ยนโดยใช้ตัวเลือกภาพเคลื่อนไหว
- เรียกใช้
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
)
-
หน้าต่างมุมมอง (
ประเภทการแก้ไข | ประเภทแผนภูมิที่ถูกต้อง |
---|---|
การเปลี่ยนแปลงมูลค่า | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Candle StickChart, SteppedAreaChart, ComboChart, Gauge |
การเพิ่ม/นําแถวออก | ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (ใช้ได้เมื่อมีแผนภูมิเส้น/พื้นที่เท่านั้น) |
การเพิ่ม/นําคอลัมน์ออก | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Candle StickChart, SteppedAreaChart, ComboChart |
การแก้ไขตัวเลือกแผนภูมิ | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, Candle StickChart, SteppedAreaChart, ComboChart |
ลักษณะการทํางานของการเปลี่ยน
ชื่อ | |
---|---|
ภาพเคลื่อนไหว.ระยะเวลา |
ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
การปรับขนาดภาพเคลื่อนไหว |
ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
|
ภาพเคลื่อนไหว.startup |
กําหนดว่าแผนภูมิจะแสดงภาพเคลื่อนไหวของการวาดครั้งแรกหรือไม่ หาก ประเภท: บูลีน
ค่าเริ่มต้น เท็จ
|
เหตุการณ์
เมื่อวาดแผนภูมิ เหตุการณ์ "พร้อม" จะเริ่มทํางานเมื่อแผนภูมิพร้อมสําหรับการเรียกเมธอดภายนอก
แผนภูมิจะเริ่มทํางานเหตุการณ์ 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); } }