Trang này liệt kê các cách để tạo bản sao và vẽ biểu đồ trên trang. Mỗi phương pháp đều có những ưu và nhược điểm như trong danh sách dưới đây.
Nội dung
chart.draw()
Đây là phương thức cơ bản được đề cập trong ví dụ về biểu đồ Xin chào! trong tài liệu này. Dưới đây là các bước cơ bản:
- Tải trình tải thư viện gstatic, Google Visual và thư viện biểu đồ
- Chuẩn bị dữ liệu
- Chuẩn bị bất kỳ tùy chọn biểu đồ nào
- Tạo bản sao lớp biểu đồ, truyền một ô điều khiển cho phần tử vùng chứa trang.
- Có thể đăng ký để nhận mọi sự kiện trên biểu đồ. Nếu có ý định gọi các phương thức trên biểu đồ, bạn nên theo dõi sự kiện "ready".
- Gọi
chart.draw(), truyền dữ liệu và các tuỳ chọn.
Ưu điểm:
- Bạn có toàn quyền kiểm soát đối với từng bước của quy trình.
- Bạn có thể đăng ký nghe tất cả các sự kiện do biểu đồ gửi.
Nhược điểm:
- Chi tiết
- Bạn phải tải rõ ràng tất cả thư viện biểu đồ bắt buộc.
- Nếu gửi truy vấn, bạn phải triển khai lệnh gọi lại theo cách thủ công, kiểm tra xem có thành công không, trích xuất
DataTableđược trả về và chuyển vào biểu đồ.
Ví dụ:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var data;
var chart;
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create our data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
Bảng điều khiển
ChartWrapper là một lớp thuận tiện xử lý việc tải tất cả các thư viện biểu đồ thích hợp cho bạn, đồng thời cũng đơn giản hóa việc gửi truy vấn đến Nguồn dữ liệu của công cụ biểu đồ.
Ưu điểm:
- Ít mã hơn nhiều
- Tải tất cả thư viện biểu đồ bắt buộc cho bạn
- Giúp việc truy vấn Nguồn dữ liệu trở nên dễ dàng hơn nhiều bằng cách tạo đối tượng
Queryvà xử lý lệnh gọi lại cho bạn - Truyền vào mã nhận dạng phần tử vùng chứa để gọi getElementByID cho bạn.
- Bạn có thể gửi dữ liệu ở nhiều định dạng: dưới dạng một mảng giá trị, dưới dạng chuỗi ký tự JSON hoặc xử lý
DataTable
Nhược điểm:
ChartWrapperhiện chỉ áp dụng các sự kiện chọn, sẵn sàng và lỗi. Để tải các sự kiện khác, bạn phải chọn một tên người dùng cho biểu đồ được bao bọc và đăng ký các sự kiện ở đó. Xem tài liệu vềChartWrapperđể biết ví dụ.
Ví dụ:
Dưới đây là ví dụ về biểu đồ cột có dữ liệu được tạo cục bộ được chỉ định dưới dạng mảng. Bạn không thể chỉ định nhãn biểu đồ hoặc giá trị ngày giờ bằng cú pháp mảng, nhưng bạn có thể tự tạo một đối tượng DataTable có các giá trị đó và truyền đối tượng đó vào thuộc tính dataTable.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
['', 700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw();
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Dưới đây là ví dụ về biểu đồ dạng đường nhận dữ liệu bằng cách truy vấn Bảng tính Google. Lưu ý rằng mã không cần phải xử lý lệnh gọi lại.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current');
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
// No query callback handler needed!
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Khi kết hợp với tính năng tự động nạp tiền, tính năng này có thể tạo ra mã rất nhỏ gọn:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'LineChart',
dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
query: 'SELECT A,D WHERE D > 100 ORDER BY D',
options: {'title': 'Countries'},
containerId: 'vis_div'
});
wrapper.draw()
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="vis_div" style="width: 600px; height: 400px;"></div>
</body>
</html>
Sử dụng Trình chỉnh sửa biểu đồ bằng ChartWrapper
Bạn có thể dùng hộp thoại Trình chỉnh sửa biểu đồ được tích hợp trong Bảng tính Google để thiết kế biểu đồ, sau đó yêu cầu chuỗi ChartWrapper
được chuyển đổi tuần tự đại diện cho biểu đồ. Sau đó, bạn có thể sao chép và dán chuỗi này cũng như sử dụng như được mô tả ở trên trong ChartWrapper.
Bạn có thể nhúng trình chỉnh sửa biểu đồ trên trang của riêng bạn và hiển thị các phương thức để người dùng kết nối với các nguồn dữ liệu khác và trả về chuỗi ChartWrapper. Hãy xem tài liệu tham khảo về ChartEditor để biết thêm thông tin.
DrawChart()
DrawChart là một phương thức tĩnh toàn cầu để gói ChartWrapper.
Ưu điểm:
- Tương tự như
ChartWrapper, nhưng ngắn hơn một chút để sử dụng.
Nhược điểm:
- Không trả về một tên người dùng cho trình bao bọc, vì vậy, bạn không thể xử lý bất kỳ sự kiện nào.
<DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current'); // Don't need to specify chart libraries!
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
"query":"SELECT A,D WHERE D > 100 ORDER BY D",
"refreshInterval": 5,
"chartType": "Table",
"options": {
"alternatingRowStyle": true,
"showRowNumber" : true
}
});
}
google.charts.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
</body>
</html>