Kiến thức cơ bản về Apps Script với Google Trang tính #5: Biểu đồ và trình bày dữ liệu trong Trang trình bày
Thông tin về lớp học lập trình này
1. Giới thiệu
Chào mừng bạn đến với phần thứ năm của danh sách phát lớp học lập trình Kiến thức cơ bản về Apps Script với Google Trang tính. Lớp học lập trình này hướng dẫn bạn cách sử dụng dịch vụ Bảng tính trong Apps Script để lập biểu đồ cho một tập dữ liệu. Bạn cũng sẽ tìm hiểu cách sử dụng dịch vụ Trang trình bày để xuất biểu đồ sang một bản trình bày mới trong Google Trang trình bày.
Kiến thức bạn sẽ học được
- Cách tạo biểu đồ dạng đường bằng Apps Script.
- Cách xuất biểu đồ sang một bản trình bày mới trên Trang trình bày.
- Cách trình bày hộp thoại cho người dùng trong Trang tính.
Trước khi bắt đầu
Đây là lớp học lập trình thứ năm trong danh sách phát Kiến thức cơ bản về Apps Script với Google Trang tính. Trước khi bắt đầu lớp học lập trình này, hãy nhớ hoàn thành các lớp học lập trình trước đó:
Bạn cần có
- Hiểu rõ các chủ đề cơ bản về Apps Script đã được khám phá trong các lớp học lập trình trước đây của danh sách phát này.
- Hiểu biết cơ bản về trình chỉnh sửa Apps Script
- Hiểu biết cơ bản về Google Trang tính
- Có thể đọc Ký hiệu A1 của Trang tính
- Hiểu biết cơ bản về JavaScript và lớp
String
của ngôn ngữ này
2. Thiết lập
Trước khi tiếp tục, bạn cần có một bảng tính chứa một số dữ liệu. Như trước đây, chúng tôi đã cung cấp một bảng dữ liệu mà bạn có thể sao chép cho các bài tập này. Hãy làm theo các bước sau:
- Nhấp vào đường liên kết này để sao chép trang dữ liệu, rồi nhấp vào Tạo bản sao. Bảng tính mới sẽ được đặt trong thư mục Google Drive của bạn và có tên là "Bản sao của Ngày và tỷ giá hối đoái USD".
- Nhấp vào tiêu đề bảng tính rồi thay đổi tiêu đề từ "Bản sao của Ngày và tỷ giá hối đoái của USD" thành "Ngày và tỷ giá hối đoái của USD". Bảng tính của bạn sẽ có dạng như sau, với một số thông tin cơ bản về các tỷ giá hối đoái khác nhau của đô la Mỹ tại các ngày khác nhau:
- Để mở trình chỉnh sửa tập lệnh, hãy nhấp vào Tiện ích bổ sung> Apps Script.
Để tiết kiệm thời gian cho bạn, chúng tôi đã thêm một đoạn mã để thiết lập trình đơn tuỳ chỉnh trong bảng tính này. Có thể bạn đã thấy trình đơn này xuất hiện khi mở bản sao của bảng tính:
Với bảng tính và dự án này, bạn đã sẵn sàng bắt đầu lớp học lập trình. Chuyển sang phần tiếp theo để bắt đầu tìm hiểu về biểu đồ và trình kích hoạt dựa trên thời gian.
3. Tạo biểu đồ trong Trang tính bằng Apps Script
Giả sử bạn muốn thiết kế một biểu đồ cụ thể để trực quan hoá một tập dữ liệu. Bạn có thể dùng Apps Script để tạo, chỉnh sửa và chèn biểu đồ vào Google Trang tính. Khi một biểu đồ nằm trong bảng tính, biểu đồ đó được gọi là biểu đồ được nhúng.
Biểu đồ được dùng để trực quan hoá một hoặc nhiều chuỗi dữ liệu. Đối với biểu đồ được nhúng, dữ liệu mà biểu đồ trình bày thường nằm trong bảng tính. Thông thường, việc cập nhật dữ liệu trong bảng tính cũng khiến Trang tính tự động cập nhật biểu đồ.
Bạn có thể dùng Apps Script để tạo biểu đồ tuỳ chỉnh được nhúng từ đầu hoặc cập nhật biểu đồ hiện có. Phần này giới thiệu những kiến thức cơ bản về cách tạo biểu đồ nhúng trong Trang tính bằng Apps Script và dịch vụ Spreadsheet
.
Triển khai
Trong bản sao của bảng tính dữ liệu, tập dữ liệu "Ngày và tỷ giá hối đoái" cho biết tỷ giá hối đoái (cho 1 đô la Mỹ) của các đơn vị tiền tệ khác nhau tại các ngày khác nhau. Bạn sẽ triển khai một hàm Apps Script để tạo biểu đồ trực quan hoá một phần dữ liệu này.
Hãy làm theo các bước sau:
- Trong trình chỉnh sửa Apps Script, hãy thêm hàm sau vào cuối tập lệnh
Code.gs
của dự án tập lệnh, sau hàmonOpen()
:
/**
* Creates and inserts an embedded
* line chart into the active sheet.
*/
function createEmbeddedLineChart() {
var sheet = SpreadsheetApp.getActiveSheet();
var chartDataRange = sheet.getRange(
'Dates and USD Exchange Rates dataset!A2:F102');
var hAxisOptions = {
slantedText: true,
slantedTextAngle: 60,
gridlines: {
count: 12
}
};
var lineChartBuilder = sheet.newChart().asLineChart();
var chart = lineChartBuilder
.addRange(chartDataRange)
.setPosition(5, 8, 0, 0)
.setTitle('USD Exchange rates')
.setNumHeaders(1)
.setLegendPosition(Charts.Position.RIGHT)
.setOption('hAxis', hAxisOptions)
.setOption("useFirstColumnAsDomain", true)
.build();
sheet.insertChart(chart);
}
- Lưu dự án tập lệnh.
Đánh giá mã
Mã bạn đã thêm sẽ triển khai hàm do mục trình đơn Chart "Dates and USD Exchange Rates dataset" (Biểu đồ "Tập dữ liệu về ngày và tỷ giá hối đoái của USD") gọi để tạo biểu đồ đường cơ bản. Hãy xem lại mã này.
Các dòng đầu tiên thiết lập 3 biến sau:
sheet
: một tham chiếu đến trang tính hiện đang hoạt động.chartDataRange
: dải ô dữ liệu mà chúng ta muốn trực quan hoá. Mã này sử dụng ký hiệu A1 để chỉ định dải ô bao gồm các ô từ A2 đến F102 trong trang tính có tên là Dates and USD Exchange Rates dataset (Tập dữ liệu về ngày và tỷ giá hối đoái của USD). Bằng cách đặt tên cụ thể cho trang tính, chúng ta đảm bảo rằng mục trong trình đơn sẽ hoạt động ngay cả khi một trang tính khác đang hoạt động vì dải ô luôn bao gồm vị trí dữ liệu. Bắt đầu từ hàng 2 có nghĩa là chúng ta sẽ đưa tiêu đề cột vào và chỉ lập biểu đồ cho 100 ngày (hàng) gần đây nhất.hAxisOptions
: một đối tượng JavaScript cơ bản bao gồm một số thông tin về chế độ cài đặt mà mã này dùng để định cấu hình giao diện của trục hoành. Cụ thể, mã này đặt nhãn văn bản trên trục ngang ở góc nghiêng 60 độ và đặt số lượng đường lưới dọc thành 12.
Dòng tiếp theo sẽ tạo một đối tượng trình tạo biểu đồ dạng đường. Biểu đồ được nhúng trong Apps Script được tạo bằng mẫu thiết kế Trình tạo. Phần giải thích đầy đủ về mẫu thiết kế này nằm ngoài phạm vi của lớp học lập trình này. Vì vậy, hiện tại, bạn chỉ cần hiểu rằng dịch vụ Spreadsheet
cung cấp một số lớp EmbeddedChartBuilder
. Để tạo biểu đồ, trước tiên, mã của bạn sẽ tạo một đối tượng trình tạo biểu đồ nhúng, sử dụng các phương thức của đối tượng này để xác định chế độ cài đặt biểu đồ, sau đó gọi phương thức build()
để tạo đối tượng EmbeddedChart
cuối cùng. Mã của bạn không bao giờ sửa đổi trực tiếp đối tượng EmbeddedChart
vì mọi cấu hình biểu đồ đều được quản lý thông qua các lớp trình tạo.
Dịch vụ Bảng tính cung cấp một lớp mẹ EmbeddedChartBuilder
và nhiều lớp trình tạo con (chẳng hạn như EmbeddedLineChartBuilder
) kế thừa từ lớp mẹ đó. Các lớp con cho phép Apps Script cung cấp các phương thức định cấu hình biểu đồ của trình tạo chỉ áp dụng cho một số loại biểu đồ nhất định. Ví dụ: lớp EmbeddedPieChartBuilder
cung cấp một phương thức set3D()
chỉ áp dụng cho biểu đồ hình tròn.
Trong mã của bạn, dòng này sẽ tạo biến đối tượng trình tạo lineChartBuilder
:
var lineChartBuilder = sheet.newChart().asLineChart();
Mã này gọi phương thức Sheet.newChart()
để tạo một đối tượng EmbeddedChartBuilder
, sau đó dùng EmbeddedChartBuilder.asLineChart()
để đặt loại trình tạo thành EmbeddedLineChartBuilder
.
Sau đó, mã này sẽ tạo biểu đồ bằng lineChartBuilder. Phần mã này chỉ là một chuỗi các lệnh gọi phương thức để xác định chế độ cài đặt biểu đồ, sau đó là lệnh gọi build()
để tạo biểu đồ. Như bạn đã thấy trong các lớp học lập trình trước, mã này sử dụng chuỗi phương thức để giúp mã dễ đọc. Sau đây là những việc mà các lệnh gọi phương thức đang thực hiện:
addRange(range)
: Xác định phạm vi dữ liệu mà biểu đồ hiển thị.setPosition(anchorRowPos, anchorColPos, offsetX, offsetY)
: Xác định vị trí của biểu đồ trong trang tính. Ở đây, mã đang chèn góc trên bên trái của biểu đồ vào ô H5.setTitle(title)
: Đặt tiêu đề biểu đồ.setNumHeaders(headers)
: Xác định số lượng hàng hoặc cột trong dải ô dữ liệu cần được coi là tiêu đề. Ở đây, mã này sử dụng hàng đầu tiên trong dải ô dữ liệu làm tiêu đề, tức là văn bản trong hàng đó được dùng làm nhãn cho từng chuỗi dữ liệu trong biểu đồ.setLegendPosition(position)
: Di chuyển chú giải biểu đồ sang bên phải biểu đồ. Phương thức này sử dụng enum Charts.Position làm tham số.setOption(option, value)
: Đặt các lựa chọn phức tạp cho biểu đồ. Ở đây, mã này đặt lựa chọnhAxis
thành đối tượnghAxisOptions
. Bạn có thể thiết lập một số lựa chọn bằng phương thức này. Các lựa chọn và giá trị có thể có cho từng loại biểu đồ được ghi lại trong Thư viện biểu đồ của Charts API. Ví dụ: các lựa chọn mà bạn có thể đặt cho biểu đồ dạng đường được ghi lại trong phần Các lựa chọn cấu hình biểu đồ dạng đường. Phương thứcsetOption(option, value)
là một chủ đề nâng cao, vì vậy, bạn nên tránh sử dụng phương thức này cho đến khi bạn thành thạo hơn về việc tạo biểu đồ trong Apps Script.build()
: Tạo và trả về một đối tượngEmbeddedChart
bằng các chế độ cài đặt ở trên.
Cuối cùng, mã sẽ gọi Sheet.insertChart(chart)
để đặt biểu đồ đã tạo vào trang tính đang hoạt động.
Kết quả
Bạn có thể xem chức năng định dạng hoạt động bằng cách làm như sau:
- Nếu bạn chưa thực hiện, hãy lưu dự án tập lệnh trong trình chỉnh sửa Apps Script.
- Nhấp vào mục trình đơn Present dataset > Chart "Dates and USD Exchange Rates dataset" (Trình bày tập dữ liệu > Biểu đồ "Tập dữ liệu về ngày và tỷ giá hối đoái của USD").
Tập lệnh của bạn hiện sẽ đặt một biểu đồ mới ở bên phải dữ liệu:
Xin chúc mừng, bạn đã tạo một biểu đồ dạng đường được nhúng bằng Apps Script. Phần tiếp theo sẽ hướng dẫn bạn cách xuất biểu đồ sang Google Trang trình bày.
4. Xuất biểu đồ sang Trang trình bày
Một trong những điểm mạnh của Apps Script là giúp bạn dễ dàng di chuyển dữ liệu từ ứng dụng này sang ứng dụng khác trong Google Workspace. Hầu hết các ứng dụng này đều có một dịch vụ Apps Script chuyên dụng, tương tự như dịch vụ Trang tính. Ví dụ: Gmail có dịch vụ Gmail, Google Tài liệu có dịch vụ Tài liệu và Google Trang trình bày có dịch vụ Trang trình bày. Với tất cả các dịch vụ tích hợp này, bạn có thể trích xuất dữ liệu từ một ứng dụng, xử lý dữ liệu đó và ghi kết quả vào một ứng dụng khác.
Trong phần này, bạn sẽ tìm hiểu cách xuất mọi biểu đồ được nhúng trong một bảng tính Google sang một bản trình bày mới trên Google Trang trình bày. Bạn cũng sẽ thấy 2 cách hiển thị thông báo tuỳ chỉnh cho người dùng trong Trang tính.
Triển khai
Tại đây, bạn sẽ triển khai hàm được gọi theo mục trình đơn Trình bày tập dữ liệu > Xuất biểu đồ sang Trang trình bày. Hãy làm theo các bước sau:
- Trong trình chỉnh sửa Apps Script, hãy thêm hàm sau vào cuối tập lệnh
Code.gs
của dự án tập lệnh, sau hàmcreateEmbeddedLineChart()
:
/**
* Create a Slides presentation and export
* all the embedded charts in this spreadsheet
* to it, one chart per slide.
*/
function exportChartsToSlides() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Fetch a list of all embedded charts in this
// spreadsheet.
var charts = [];
var sheets = ss.getSheets();
for (var i = 0; i < sheets.length; i++) {
charts = charts.concat(sheets[i].getCharts());
}
// If there aren't any charts, display a toast
// message and return without doing anything
// else.
if (charts.length == 0) {
ss.toast('No charts to export!');
return;
}
// Create a Slides presentation, removing the default
// title slide.
var presentationTitle =
ss.getName() + " Presentation";
var slides = SlidesApp.create(presentationTitle);
slides.getSlides()[0].remove();
// Add charts to the presentation, one chart per slide.
var position = {left: 40, top: 30};
var size = {height: 340, width: 430};
for (var i = 0; i < charts.length; i++) {
var newSlide = slides.appendSlide();
newSlide.insertSheetsChart(
charts[i],
position.left,
position.top,
size.width,
size.height);
}
// Create and display a dialog telling the user where to
// find the new presentation.
var slidesUrl = slides.getUrl();
var html = "<p>Find it in your home Drive folder:</p>"
+ "<p><a href=\"" + slidesUrl + "\" target=\"_blank\">"
+ presentationTitle + "</a></p>";
SpreadsheetApp.getUi().showModalDialog(
HtmlService.createHtmlOutput(html)
.setHeight(120)
.setWidth(350),
"Created a presentation!"
);
}
- Lưu dự án tập lệnh.
Đánh giá mã
Mã này có thể ngắn hơn dự kiến. Hãy xem xét những gì nó đang làm bằng cách chia mã thành 5 phần:
1: Lấy biểu đồ
Một vài dòng đầu tiên sẽ tìm kiếm trong bảng tính đang hoạt động để tìm tất cả biểu đồ được nhúng, sau đó thu thập các biểu đồ đó vào mảng charts
. Các dòng này sử dụng phương thức Spreadsheet.getSheets()
và phương thức Sheet.getCharts()
để lấy danh sách trang tính và biểu đồ. Phương thức JavaScript Array.concat()
được dùng để thêm danh sách biểu đồ từ mỗi trang vào charts
.
2: Kiểm tra xem có biểu đồ nào để xuất hay không
Mã này xác minh xem có biểu đồ nào cần xuất hay không. Chúng ta muốn tránh tạo một bản trình bày trống, vì vậy nếu không có biểu đồ, mã sẽ tạo một thông báo tạm thời bằng Spreadsheet.toast(message)
. Đây là một hộp thoại "xem nhanh" nhỏ xuất hiện ở góc dưới bên phải của Trang tính, tồn tại trong vài giây rồi biến mất:
Nếu không có biểu đồ nào để xuất, mã sẽ tạo thông báo dạng toast và thoát mà không làm gì khác. Nếu có biểu đồ cần xuất, mã sẽ tiếp tục tạo bản trình bày trong vài dòng tiếp theo.
3: Tạo bản trình bày
Biến presentationTitle
được tạo để lưu trữ tên tệp của bản trình bày mới. Tên này được đặt làm tên của bảng tính, có thêm " Presentation
" ở cuối. Sau đó, mã này sẽ gọi phương thức dịch vụ Trang trình bày SlidesApp.create(name)
để tạo một bản trình bày.
Bản trình bày mới được tạo chỉ có một trang trình bày trống. Chúng ta không muốn điều đó trong bản trình bày, vì vậy, mã sẽ xoá điều đó bằng Presentation.getSlides()
và Slide.remove()
.
4: Xuất biểu đồ
Trong phần tiếp theo, mã này sẽ xác định position
và size
của các đối tượng JavaScript để đặt vị trí các biểu đồ được nhập trong trang trình bày và kích thước của biểu đồ (tính bằng pixel).
Mã này lặp lại trên mọi biểu đồ trong danh sách biểu đồ. Đối với mỗi biểu đồ, một newSlide
sẽ được tạo bằng Presentation.appendSlide()
, thêm trang trình bày vào cuối bản trình bày. Phương thức Slide.insertSheetsChart(sourceChart, left, top, width, height)
được dùng để nhập biểu đồ vào trang trình bày với position
và size
đã chỉ định.
5: Chia sẻ vị trí của bản trình bày
Cuối cùng, mã cần cho người dùng biết vị trí của bản trình bày mới, tốt nhất là có một đường liên kết mà họ có thể nhấp vào để mở bản trình bày đó. Để làm việc này, mã sẽ dùng HTML
dịch vụ HTML
của Apps Script để tạo một hộp thoại phương thức tuỳ chỉnh. Hộp thoại phương thức (còn được gọi là hộp thoại tuỳ chỉnh trong Apps Script) là những cửa sổ xuất hiện trên giao diện Trang tính. Khi xuất hiện, hộp thoại tuỳ chỉnh sẽ ngăn người dùng tương tác với Trang tính.
Để tạo một hộp thoại tuỳ chỉnh, mã cần có HTML xác định nội dung của hộp thoại đó. Thông tin này được cung cấp trong biến html
. Nội dung bao gồm một đoạn văn ngắn và một siêu liên kết. Siêu liên kết là biến presentationTitle
, được liên kết với URL trình bày do Presentation.getUrl()
cung cấp. Siêu liên kết này cũng sử dụng thuộc tính target="_blank"
để bản trình bày mở trong một thẻ trình duyệt mới, thay vì trong hộp thoại.
HTML được phân tích cú pháp thành một đối tượng HtmlOutput
bằng phương thức HtmlService.createHtmlOutput(html)
. Đối tượng HtmlOutput
cho phép mã đặt kích thước của hộp thoại tuỳ chỉnh bằng HtmlOutput.setHeight(height)
và HtmlOutput.setWidth(width)
.
Sau khi htmlOutput
được tạo, mã sẽ sử dụng phương thức Ui.showModalDialog(htmlOutput, title)
để hiển thị hộp thoại có tiêu đề đã cho.
Kết quả
Giờ đây, sau khi triển khai mục thứ hai trong trình đơn, bạn có thể thấy mục đó đang hoạt động. Cách kiểm thử hàm exportChartsToSlides()
:
- Nếu bạn chưa thực hiện, hãy lưu dự án tập lệnh trong trình chỉnh sửa Apps Script.
- Mở bảng tính rồi nhấp vào mục trình đơn Trình bày tập dữ liệu > Biểu đồ "Tập dữ liệu về ngày và tỷ giá hối đoái của USD" để tạo biểu đồ cần xuất. Thẻ này sẽ xuất hiện được cố định vào ô H5 trong trang tính đang hoạt động.
- Nhấp vào mục trình đơn Trình bày tập dữ liệu > Xuất biểu đồ sang Trang trình bày. Bạn có thể được yêu cầu uỷ quyền lại cho tập lệnh.
- Bạn sẽ thấy tập lệnh xử lý yêu cầu và hiển thị hộp thoại tuỳ chỉnh.
- Để mở bản trình bày mới trên Trang trình bày, hãy nhấp vào đường liên kết Bản trình bày về ngày và tỷ giá hối đoái của USD:
Nếu muốn, bạn cũng có thể thêm nhiều biểu đồ khác vào bảng tính rồi chọn lại mục trình đơn để tạo bản trình bày có nhiều trang trình bày.
Giờ đây, bạn có thể xuất các biểu đồ được tạo trong Trang tính sang bản trình bày trên Trang trình bày. Bạn cũng có thể viết mã để tạo hộp thoại tuỳ chỉnh.
Bạn đã hoàn thành bài tập cuối cùng của lớp học lập trình này. Chuyển đến phần tiếp theo để xem lại những kiến thức bạn đã học.
5. Kết luận
Chúc mừng bạn đã hoàn thành lớp học lập trình này và toàn bộ danh sách phát Lớp học lập trình về kiến thức cơ bản về Apps Script với Google Trang tính. Bạn có thể sử dụng các nguyên tắc được dạy trong danh sách phát này để mở rộng trải nghiệm sử dụng Trang tính và khám phá các chức năng của Apps Script.
Bạn có thấy lớp học lập trình này hữu ích không?
Kiến thức bạn học được
- Cách tạo biểu đồ dạng đường được nhúng bằng Apps Script.
- Cách trình bày thông báo dạng thông báo và hộp thoại tuỳ chỉnh cho người dùng trong Trang tính.
- Cách xuất biểu đồ sang một bản trình bày mới trên Trang trình bày.
Bước tiếp theo
Bạn đã hoàn tất thành công danh sách phát này. Tuy nhiên, bạn vẫn cần tìm hiểu thêm về Apps Script.
Hãy tham khảo các nguồn thông tin sau:
- Tài liệu dành cho nhà phát triển Apps Script
- Hướng dẫn về Apps Script
- Tài liệu tham khảo về Apps Script
- Câu hỏi về Apps Script trên StackOverflow
- Mã mẫu Apps Script trên GitHub
Chúc bạn viết tập lệnh vui vẻ!