Trang này mô tả cách sử dụng Bảng xếp hạng của Google cùng với Bảng tính Google.
Giới thiệu
Google Biểu đồ và Bảng tính Google được tích hợp chặt chẽ. Bạn có thể đặt biểu đồ của Google trong bảng tính Google và Google Biểu đồ có thể trích xuất dữ liệu ra khỏi bảng tính Google. Tài liệu này sẽ hướng dẫn bạn cách thực hiện cả hai.
Dù bạn chọn phương pháp nào, biểu đồ của bạn sẽ thay đổi mỗi khi bảng tính cơ bản thay đổi.
Nhúng biểu đồ trong bảng tính
Dễ dàng đưa một biểu đồ vào bảng tính. Từ thanh công cụ Bảng tính, chọn "Chèn" và sau đó chọn "Biểu đồ", bạn sẽ có thể chọn loại biểu đồ và chọn các tùy chọn khác nhau:
Tạo biểu đồ từ bảng tính riêng biệt
Thông thường, mọi người tạo ra Biểu đồ Google bằng cách điền vào bảng dữ liệu và vẽ biểu đồ sử dụng dữ liệu đó. Nếu muốn truy xuất dữ liệu từ một bảng tính trên Google, bạn sẽ truy vấn bảng tính để lấy dữ liệu cần lập biểu đồ:
function drawChart() {
var query = new google.visualization.Query(URL);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, null);
}
Cách này mang lại hiệu quả vì Bảng tính Google hỗ trợ ngôn ngữ truy vấn Google Biểu đồ để sắp xếp và lọc dữ liệu; mọi hệ thống hỗ trợ ngôn ngữ truy vấn đều có thể được dùng làm nguồn dữ liệu.
Xin lưu ý rằng biểu đồ không thể sử dụng đặc quyền của người xem khi chưa có sự cho phép rõ ràng. Bảng tính phải hiển thị rõ ràng với mọi người hoặc trang phải thể hiện rõ thông tin đăng nhập của người dùng cuối như được nêu trong phần Uỷ quyền của trang này.
Để sử dụng Bảng tính Google làm nguồn dữ liệu, bạn cần có URL:
- Mở một bảng tính hiện có. Bảng tính này phải có định dạng đúng như hình ảnh trực quan của bạn và phải có đặc quyền xem phù hợp. (Xem đặc quyền "Công khai trên web" hoặc "Bất kỳ ai có đường liên kết" để dễ dàng nhất và hướng dẫn trong phần này sẽ giả định một bảng tính đã được thiết lập theo cách này. Bạn có thể hạn chế bằng cách giữ bảng tính "Riêng tư" và cấp quyền truy cập vào từng Tài khoản Google, nhưng bạn cần làm theo hướng dẫn ủy quyền dưới đây.
- Sao chép URL trên trình duyệt. Vui lòng xem Phạm vi nguồn truy vấn để biết chi tiết về cách chọn các phạm vi cụ thể.
- Hãy cung cấp URL cho
google.visualization.Query(). Truy vấn hỗ trợ các tham số không bắt buộc sau:headers=N: Chỉ định số lượng hàng là hàng tiêu đề, trong đó N là một số nguyên từ 0 trở lên. Những dữ liệu này sẽ bị loại trừ khỏi dữ liệu và được chỉ định là nhãn cột trong bảng dữ liệu. Nếu bạn không chỉ định thông số này, bảng tính sẽ đoán bao nhiêu hàng là hàng tiêu đề. Xin lưu ý rằng nếu tất cả các cột của bạn đều là dữ liệu chuỗi, thì bảng tính có thể khó xác định những hàng nào là hàng tiêu đề nếu không có tham số này.gid=N: Chỉ định trang tính trong một tài liệu nhiều trang tính để liên kết, nếu bạn không liên kết đến trang tính đầu tiên. N là mã nhận dạng của trang tính. Bạn có thể tìm hiểu số nhận dạng bằng cách chuyển đến phiên bản đã phát hành của trang tính đó và tìm tham sốgid=Ntrong URL. Bạn cũng có thể sử dụng tham sốsheetthay vì tham số này. Tôi đã hiểu rõ: Bảng tính Google có thể sắp xếp lại tham số cố định trong URL khi xem trong trình duyệt. Nếu bạn sao chép tham số trên một trình duyệt, hãy đảm bảo tất cả các tham số đều nằm trước dấu#của URL. Ví dụ:gid=1545912003.sheet=sheet_name: Chỉ định trang tính trong một tài liệu nhiều trang tính mà bạn đang liên kết, nếu bạn không liên kết đến trang tính đầu tiên. sheet_name là tên hiển thị của trang tính. Ví dụ:sheet=Sheet5.
Sau đây là một ví dụ đầy đủ:
Dưới đây là hai cách để vẽ biểu đồ này, một cách sử dụng tham số gid và cách còn lại sử dụng tham số sheet. Việc nhập một trong hai URL vào trình duyệt sẽ tạo ra cùng một kết quả/dữ liệu cho biểu đồ.
function drawGID() {
var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?gid=0&headers=1&tq=' + queryString);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
function drawSheetName() {
var queryString = encodeURIComponent('SELECT A, H, O, Q, R, U LIMIT 5 OFFSET 8');
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
query.send(handleSampleDataQueryResponse);
}
function handleSampleDataQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, { height: 400 });
}
Phạm vi nguồn truy vấn
URL nguồn truy vấn chỉ định phần nào của bảng tính sẽ sử dụng trong truy vấn: một ô cụ thể, dải ô, hàng, cột hoặc toàn bộ bảng tính. Hãy chỉ định dải ô bằng cú pháp "range=<range_expr>", ví dụ:
https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq?range=A1:C4
Sau đây là một vài ví dụ minh họa cú pháp:
A1:B10– Một dải ô từ ô A1 đến B105:7– Hàng 5-7D:F– Cột D-FA:A70– 70 ô đầu tiên trong cột A-
A70:A– Cột A từ hàng 70 đến cuối B5:5– B5 đến cuối hàng 5D3:D– D3 ở cuối cột DC:C10– Từ đầu cột C đến C10
Uỷ quyền
Google Trang tính yêu cầu thông tin xác thực của người dùng cuối để truy cập vào bảng tính riêng tư thông qua API Hình ảnh trực quan của Google ("/tq request").Lưu ý: Bảng tính được chia sẻ với "bất kỳ ai có đường liên kết đều có thể xem" không yêu cầu thông tin xác thực. Thay đổi cài đặt chia sẻ của bảng tính dễ dàng hơn nhiều so với việc triển khai uỷ quyền.
Trong trường hợp việc chia sẻ đường liên kết không phải là một giải pháp khả thi, nhà phát triển sẽ cần thay đổi mã để chuyển thông tin xác thực OAuth 2.0 được ủy quyền cho phạm vi API Google Trang tính (https://www.googleapis.com/auth/spreadsheets).
Có thêm thông tin cơ bản về OAuth 2.0 trong phần Sử dụng OAuth 2.0 để truy cập API của Google
Ví dụ: Sử dụng OAuth để truy cập vào /gviz/tq
Điều kiện tiên quyết: Lấy Mã ứng dụng từ Google Developer Console
Bạn có thể xem hướng dẫn chi tiết về việc tích hợp với Nền tảng nhận dạng của Google tại Đăng nhập bằng Google và Tạo dự án Bảng điều khiển API của Google và mã ứng dụng khách.
Để có được mã thông báo OAuth cho người dùng cuối, trước tiên, bạn phải đăng ký dự án của mình với Google Developer Console và nhận được một Client-ID.
- Từ bảng điều khiển dành cho nhà phát triển, tạo một ID ứng dụng khách OAuth mới.
- Chọn Ứng dụng web làm loại ứng dụng.
- Hãy chọn bất kỳ tên nào; tên này chỉ nhằm mục đích cung cấp thông tin cho bạn.
- Thêm tên miền của bạn (và mọi miền thử nghiệm) dưới dạng Nguồn gốc JavaScript được cho phép.
- Để trống URI chuyển hướng được ủy quyền.
Sau khi nhấp vào Tạo, hãy sao chép mã ứng dụng để tham khảo trong tương lai. Bạn không cần mật khẩu ứng dụng cho bài tập này.
Cập nhật trang web của bạn để có thông tin xác thực OAuth.
Google cung cấp thư viện gapi.auth để đơn giản hoá quá trình
thu nạp thông tin xác thực OAuth. Mã mẫu bên dưới sử dụng thư viện này để lấy thông tin xác thực (yêu cầu uỷ quyền nếu cần) và chuyển thông tin xác thực kết quả đến điểm cuối /gviz/tq.
<html> <body> <button id="authorize-button" style="visibility: hidden">Authorize</button> <script src="./demo.js" type="text/javascript"></script> <script src="https://apis.google.com/js/auth.js?onload=init"></script> </body> </html>demo.js
// NOTE: You must replace the client id on the following line.
var clientId = '549821307845-9ef2xotqflhcqbv10.apps.googleusercontent.com';
var scopes = 'https://www.googleapis.com/auth/spreadsheets';
function init() {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: true},
handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
gapi.auth.authorize(
{client_id: clientId, scope: scopes, immediate: false},
handleAuthResult);
return false;
}
function makeApiCall() {
// Note: The below spreadsheet is "Public on the web" and will work
// with or without an OAuth token. For a better test, replace this
// URL with a private spreadsheet.
var tqUrl = 'https://docs.google.com/spreadsheets' +
'/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE/gviz/tq' +
'?tqx=responseHandler:handleTqResponse' +
'&access_token=' + encodeURIComponent(gapi.auth.getToken().access_token);
document.write('<script src="' + tqUrl +'" type="text/javascript"></script>');
}
function handleTqResponse(resp) {
document.write(JSON.stringify(resp));
}
Sau khi uỷ quyền thành công, gapi.auth.getToken() sẽ trả về tất cả thông tin xác thực, bao gồm cả access_token có thể thêm vào yêu cầu /gviz/tq.
Để biết thêm thông tin về cách sử dụng thư viện gapi để xác thực, hãy xem:
- Xác thực bằng Thư viện ứng dụng API của Google cho JavaScript
- Cách sử dụng CORS để truy cập Google API
Sử dụng phạm vi drive.file
Ví dụ trước sử dụng phạm vi API Google Trang tính. API này cấp quyền đọc và ghi vào tất cả nội dung bảng tính của người dùng. Tuỳ thuộc vào ứng dụng, điều này có thể dễ dàng hơn so với mức cần thiết. Đối với quyền chỉ có thể đọc, hãy sử dụng phạm vi spreadsheets.readonly để cấp quyền chỉ có thể đọc đối với trang tính của người dùng và các thuộc tính của họ.
Phạm vi drive.file(https://www.googleapis.com/auth/drive.file) chỉ cấp quyền truy cập vào những tệp mà người dùng thể hiện rõ bằng bộ chọn tệp Google Drive, khởi chạy thông qua API bộ chọn.
Việc sử dụng Bộ chọn (Picker) sẽ thay đổi luồng ứng dụng của bạn. Thay vì dán URL hoặc có bảng tính được mã hoá cứng như trong ví dụ trên, người dùng phải sử dụng hộp thoại Bộ chọn để chọn bảng tính họ muốn trang của mình truy cập. Hãy làm theo ví dụ về "Bộ chọn "Xin chào thế giới", sử dụng google.picker.ViewId.SPREADSHEETS thay cho google.picker.ViewId.PHOTOS.