หน้านี้อธิบายวิธีสร้างภาพเคลื่อนไหวของการแก้ไขแผนภูมิ แทนที่จะใช้การแก้ไขทันที
เนื้อหา
ภาพรวม
แผนภูมิของ 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.countvAxis.directionและhAxis.directionvAxis.baselineและhAxis.baselinevAxis.logScaleและhAxis.logScale- ขนาดแผนภูมิ (
heightและwidth) -
พื้นที่ในแผนภูมิ (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
กรอบเวลาการดู (
| ประเภทการปรับเปลี่ยน | ประเภทแผนภูมิที่ถูกต้อง |
|---|---|
| การเปลี่ยนแปลงค่า | แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเทียน, แผนภูมิพื้นที่แบบขั้นบันได, แผนภูมิผสม, แผนภูมิคอลัมน์ |
| การเพิ่ม/นำแถวออก | แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, BubbleChart, แผนภูมิผสม (เฉพาะชุดเส้น/พื้นที่เท่านั้น) |
| การเพิ่ม/ลบคอลัมน์ | แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเชิงเทียน, แผนภูมิพื้นที่แบบขั้น, แผนภูมิผสม |
| การแก้ไขตัวเลือกแผนภูมิ | แผนภูมิกระจาย, แผนภูมิเส้น, แผนภูมิพื้นที่, แผนภูมิแท่ง, แผนภูมิฟองอากาศ, แผนภูมิคอลัมน์, แผนภูมิเชิงเทียน, แผนภูมิพื้นที่แบบขั้น, แผนภูมิผสม |
ลักษณะการทำงานของการเปลี่ยน
| ชื่อ | |
|---|---|
| animation.duration |
ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที โปรดดูรายละเอียดในเอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
|
| animation.easing |
ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
|
| animation.startup |
กำหนดว่าแผนภูมิจะเคลื่อนไหวเมื่อวาดครั้งแรกหรือไม่ หากเป็น ประเภท: บูลีน
ค่าเริ่มต้น 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);
}
}