Trang này liệt kê những cách mà bạn có thể tạo thực thể và vẽ biểu đồ trên trang. Mỗi phương pháp đều có ưu và nhược điểm riêng, như được liệt kê dưới đây.
Nội dung
chart.draw()
Đây là phương thức cơ bản được đề cập trong ví dụ về Hello Chart! 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, hình ảnh trực quan của Google và thư viện biểu đồ
- Chuẩn bị dữ liệu của bạn
- Chuẩn bị các tuỳ chọn cho biểu đồ
- Tạo thực thể cho lớp biểu đồ, truyền tên người dùng đến phần tử vùng chứa trang.
- Tùy chọn đăng ký để nhận bất kỳ sự kiện biểu đồ nào. Nếu dự định gọi các phương thức trên biểu đồ, bạn nên theo dõi sự kiện "sẵn sàng".
- Gọi
chart.draw(), truyền dữ liệu và tuỳ chọn vào.
Ưu điểm:
- Bạn có toàn quyền kiểm soát từng bước của quy trình này.
- 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 tất cả thư viện biểu đồ bắt buộc một cách rõ ràng.
- 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ề rồi truyề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>
ChartWrapper
ChartWrapper là một lớp tiện lợi giúp bạn xử lý việc tải tất cả các thư viện biểu đồ phù hợp, đồng thời đơn giản hoá việc gửi truy vấn đến Nguồn dữ liệu của Công cụ biểu đồ.
Ưu điểm:
- Mã ít hơn nhiều
- Tải tất cả thư viện biểu đồ cần thiết cho bạn
- Giúp việc truy vấn các 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ã phần tử vùng chứa và mã này sẽ 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ảng giá trị, dưới dạng chuỗi giá trị JSON hoặc tên người dùng
DataTable
Nhược điểm:
ChartWrapperhiện chỉ truyền các sự kiện chọn, sẵn sàng và lỗi. Để nhận các sự kiện khác, bạn phải sử dụng một tên người dùng cho biểu đồ được gói và đăng ký các sự kiện ở đó. Hãy xem tài liệuChartWrapperđể biết các ví dụ.
Ví dụ:
Sau đây là ví dụ về biểu đồ cột với dữ liệu được tạo cục bộ được chỉ định dưới dạng một 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ạo đối tượng DataTable theo cách thủ công với các giá trị này 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ã này không cần 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>
Kết hợp với tính năng tự động tải, tính năng này có thể giúp 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 đồ với ChartWrapper
Bạn có thể sử dụng hộp thoại Trình chỉnh sửa biểu đồ được tích hợp sẵn trong Bảng tính Google để thiết kế biểu đồ rồi yêu cầu chuỗi ChartWrapper được chuyển đổi tuần tự biểu thị biểu đồ đó. Sau đó, bạn có thể sao chép và dán chuỗi này cũng như sử dụng như mô tả ở trên trong ChartWrapper.
Bạn có thể nhúng một trình chỉnh sửa biểu đồ trên trang của mình và cung cấp 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 bao bọc một ChartWrapper.
Ưu điểm:
- Giống như
ChartWrapper, nhưng ngắn hơn một chút để sử dụng.
Nhược điểm:
- Không trả về 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>