Trang này mô tả cách tạo ảnh động cho các nội dung sửa đổi được thực hiện trên một biểu đồ, thay vì áp dụng ngay lập tức.
Nội dung
Tổng quan
Các biểu đồ của Google có thể tạo ảnh động mượt mà theo một trong hai cách, khi khởi động khi bạn vẽ biểu đồ lần đầu tiên hoặc khi bạn vẽ lại biểu đồ sau khi thực hiện thay đổi về dữ liệu hoặc tùy chọn.
Cách tạo ảnh động khi khởi động:
- Đặt dữ liệu biểu đồ và các tuỳ chọn của bạn. Hãy nhớ đặt thời lượng hoạt ảnh và loại easing.
-
Nếu bạn đặt
animation: {"startup": true}– việc đặt thuộc tính này trong các tùy chọn sẽ khiến biểu đồ của bạn bắt đầu bằng các giá trị chuỗi được vẽ ở đường cơ sở và chuyển sang trạng thái cuối cùng. - Gọi
chart.draw(), truyền dữ liệu và các tuỳ chọn của bạn.
Cách tạo ảnh động cho hiệu ứng chuyển đổi:
- Hãy bắt đầu bằng một biểu đồ đã kết xuất.
- Sửa đổi bảng dữ liệu hoặc các tùy chọn. Mỗi loại biểu đồ lại hỗ trợ những loại biểu đồ khác nhau. Bạn có thể xem phần Các nội dung sửa đổi được hỗ trợ để biết những nội dung sửa đổi được hỗ trợ cho các loại biểu đồ.
- Chỉ định hành vi chuyển đổi bằng cách sử dụng tuỳ chọn ảnh động.
- Gọi
chart.draw()trên biểu đồ để chuyển đổi sang các giá trị mới.
Dưới đây là ví dụ đơn giản về cách thay đổi giá trị đơn nhất xuất hiện trong biểu đồ thanh cho mỗi lượt nhấp vào một nút:
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();
}
Sửa đổi được hỗ trợ
Hỗ trợ cho các loại chuyển đổi khác nhau giữa các biểu đồ là khác nhau. Sau đây là các loại chuyển đổi:
- Chỉ thay đổi các giá trị của bảng dữ liệu. Số hàng và cột giống nhau, các cột giữ nguyên loại và vai trò ban đầu.
- Thêm hoặc xoá cột (chuỗi).
- Thêm hoặc xoá hàng (danh mục).
-
Các thay đổi đối với tuỳ chọn biểu đồ. Hiện tại, các tuỳ chọn sẽ tạo ảnh động khi thay đổi bao gồm:
-
cửa sổ chế độ xem (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max) — Việc thay đổi cửa sổ chế độ xem rất hữu ích để đạt được hiệu ứng "thu phóng" và liên tục "drift" (xem ví dụ bên dưới) -
Các giá trị
vAxis.ticksvàhAxis.ticks vAxis.gridlines.countvàhAxis.gridlines.countvAxis.directionvàhAxis.directionvAxis.baselinevàhAxis.baselinevAxis.logScalevàhAxis.logScale- kích thước biểu đồ (
heightvàwidth) -
khu vực biểu đồ (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
cửa sổ chế độ xem (
| Loại sửa đổi | Các loại biểu đồ hợp lệ |
|---|---|
| Thay đổi giá trị | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CurveChartChart, SteppedAreaChart, BundleChart, Máy đo |
| Thêm/xoá hàng | ScatterChart, LineChart, AreaChart, BubbleChart, BundleChart (chỉ dành cho chuỗi dòng/khu vực) |
| Thêm/xóa cột | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CurvequeChart, SteppedAreaChart, BundleChart |
| Sửa đổi các tuỳ chọn biểu đồ | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CurvequeChart, SteppedAreaChart, BundleChart |
Hành vi chuyển đổi
| Tên | |
|---|---|
| animate.duration |
Thời lượng của ảnh động, tính bằng mili giây. Để biết thông tin chi tiết, hãy xem tài liệu về ảnh động. Loại: số
Mặc định: 0
|
| hoạt ảnh. |
Hàm easing được áp dụng cho ảnh động. Bạn có các tuỳ chọn sau đây:
Loại: chuỗi
Mặc định: "tuyến tính"
|
| ảnh khởi động. |
Xác định xem biểu đồ có hoạt ảnh xuất hiện trong lần vẽ đầu tiên hay không. Nếu Loại: Boolean
sai mặc định
|
Sự kiện
Khi vẽ biểu đồ, sự kiện "ready" được kích hoạt khi biểu đồ sẵn sàng cho các lệnh gọi phương thức bên ngoài.
Biểu đồ sẽ kích hoạt sự kiện animationfinish khi quá trình chuyển đổi hoàn tất.
| Tên | |
|---|---|
animationfinish |
Được kích hoạt khi ảnh động chuyển đổi hoàn tất. Thuộc tính: không có
|
Ví dụ
Các thay đổi về giá trị
// 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();
}
Thêm và xóa hàng
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();
Thêm và xóa cột
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();
Thay đổi cửa sổ chế độ xem
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();
Thay đổi kích thước biểu đồ
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);
}
}