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 biểu đồ, thay vì áp dụng ngay những nội dung đó.
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, đó là khi khởi động khi bạn vẽ biểu đồ lần đầu hoặc khi bạn vẽ lại biểu đồ sau khi chỉnh sửa dữ liệu hoặc các lựa chọn.
Cách tạo ảnh động khi khởi động:
- Đặt dữ liệu biểu đồ và các lựa chọn. Hãy nhớ đặt thời lượng ảnh động và loại tốc độ.
-
Đặt
animation: {"startup": true}– việc đặt giá trị này trong các tuỳ chọn sẽ khiến biểu đồ bắt đầu với các giá trị chuỗi được vẽ tại đường cơ sở và tạo hiệu ứng động cho trạng thái cuối cùng của biểu đồ đó. - Gọi
chart.draw(), truyền dữ liệu và các tuỳ chọn của bạn vào.
Cách tạo ảnh động cho hiệu ứng chuyển đổi:
- Bắt đầu với một biểu đồ đã hiển thị.
- Sửa đổi bảng dữ liệu hoặc tuỳ chọn. Các loại biểu đồ khác nhau sẽ hỗ trợ các nội dung sửa đổi khác nhau; hãy xem phần Các nội dung sửa đổi được hỗ trợ để tìm hiểu những nội dung sửa đổi được hỗ trợ cho những loại biểu đồ nào.
- 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 sang các giá trị mới.
Sau đây là một ví dụ đơn giản về cách thay đổi giá trị duy nhất được trình bày trong biểu đồ thanh khi bạn 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();
}
Nội dung 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 đồ. Sau đây là các loại hiệu ứng chuyển đổi:
- Chỉ thay đổi giá trị của bảng dữ liệu. Số lượng hàng và cột giống nhau, đồng thời các cột vẫn giữ nguyên loại và vai trò như ban đầu.
- Thêm hoặc xoá cột (chuỗi).
- Thêm hoặc xóa hàng (danh mục).
-
Thay đổi đối với tuỳ chọn biểu đồ. Hiện tại, các lựa 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 sẽ hữu ích để đạt được hiệu ứng "thu phóng" và "trôi" liên tục (xem ví dụ dưới đây) -
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) -
vùng biểu đồ (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
cửa sổ chế độ xem (
| Loại sửa đổi | Loại biểu đồ hợp lệ |
|---|---|
| Các thay đổi về giá trị | Biểu đồ tán xạ, Biểu đồ dạng đường, Biểu đồ vùng, Biểu đồ thanh, Biểu đồ bong bóng, Biểu đồ cột, Biểu đồ hình nến, Biểu đồ dạng bước, Biểu đồ kết hợp, Biểu đồ dạng đồng hồ đo |
| Thêm/xoá hàng | Biểu đồ tán xạ, Biểu đồ dạng đường, Biểu đồ vùng, Biểu đồ bong bóng, Biểu đồ kết hợp (chỉ áp dụng cho chuỗi biểu đồ dạng đường/khu vực) |
| Thêm/xoá cột | Biểu đồ tán xạ, Biểu đồ dạng đường, Biểu đồ vùng, Biểu đồ thanh, Biểu đồ bong bóng, Biểu đồ cột, Biểu đồ hình nến, Biểu đồ dạng bước, Biểu đồ kết hợp |
| Sửa đổi tuỳ chọn biểu đồ | Biểu đồ tán xạ, Biểu đồ dạng đường, Biểu đồ vùng, Biểu đồ thanh, Biểu đồ bong bóng, Biểu đồ cột, Biểu đồ hình nến, Biểu đồ dạng bước, Biểu đồ kết hợp |
Hành vi chuyển đổi
| Tên | |
|---|---|
| animation.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
|
| animation.easing |
Hàm easing được áp dụng cho ảnh động. Bạn có thể chọn trong các phương án sau đây:
Loại: chuỗi
Mặc định: "tuyến tính"
|
| animation.startup |
Xác định xem biểu đồ có tạo hiệu ứng động trong lần vẽ đầu tiên hay không. Nếu là Loại: boolean
Mặc định là false
|
Sự kiện
Khi vẽ biểu đồ, sự kiện "sẵn sàng" sẽ được kích hoạt sau 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à xoá 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à xoá 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ổ 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);
}
}