1. Giới thiệu
Chào mừng bạn đến với phần thứ năm của Kiến thức cơ bản về Apps Script có danh sách phát lớp học lập trình của 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 đồ 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 xây dựng biểu đồ dạng đường bằng Apps Script.
- Cách xuất biểu đồ sang bản trình bày mới.
- 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 Kiến thức cơ bản về Apps Script với danh sách phát trên 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 đây:
Bạn cần có
- Tìm hiểu về các chủ đề cơ bản của 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.
- Làm quen với trình chỉnh sửa Apps Script
- Làm quen cơ bản với Google Trang tính
- Khả năng đọc Trang tính Ký hiệu A1
- quen thuộc với JavaScript và
Stringlớp
2. Thiết lập
Trước khi tiếp tục, bạn cần một bảng tính có một số dữ liệu. Như trước đây, chúng tôi đã cung cấp bảng dữ liệu mà bạn có thể sao chép cho các bài tập này. Thực hiện các bước sau:
- Nhấp vào đường liên kết này để sao chép bảng dữ liệu rồi nhấp vào Tạo bản sao. Bảng tính mới được đặt trong thư mục Google Drive và có tên "Bản sao ngày và tỷ giá hối đoái của USD".
- Nhấp vào tiêu đề bảng tính và thay đổi tiêu đề từ "quot;Bản sao ngày và tỷ giá hối đoái USD" Trang tính của bạn phải có dạng như sau, với một số thông tin cơ bản về tỷ giá hối đoái của các đồng đô la Mỹ vào những 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> Ứng dụng Apps Script.
Để tiết kiệm thời gian cho bạn, chúng tôi đã đưa một đoạn mã vào để thiết lập một trình đơn tùy chỉnh trong bảng tính này. Bạn có thể thấy trình đơn này xuất hiện khi bản sao bảng tính của bạn được mở:
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. Hãy chuyển đến phần tiếp theo để bắt đầu tìm hiểu về biểu đồ và trình kích hoạt theo 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 hóa một tập dữ liệu. Bạn thực sự có thể sử 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, một biểu đồ được gọi là biểu đồ được nhúng.
Biểu đồ dùng để hình ảnh hóa một hoặc nhiều chuỗi dữ liệu. Đối với biểu đồ được nhúng, dữ liệu thường xuất hiện từ bảng tính. Thông thường, việc cập nhật dữ liệu trong bảng tính sẽ khiến Trang tính tự động cập nhật biểu đồ.
Bạn có thể sử dụng Apps Script để tạo biểu đồ tùy 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 thông tin cơ bản về việc tạo biểu đồ được nhúng trong Trang tính bằng Apps Script và dịch vụ Spreadsheet.
Triển khai
Trong bản sao bảng tính dữ liệu, tập dữ liệu "Dates và Tỷ giá hối đoái" tập dữ liệu hiển thị tỷ giá hối đoái (cho 1 đô la Mỹ) của các đơn vị tiền tệ khác nhau vào các ngày khác nhau. Bạn sẽ triển khai hàm Apps Script để tạo biểu đồ trực quan hóa một phần dữ liệu này.
Thực hiện 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.gscủ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 của bạn.
Đánh giá mã
Mã bạn đã thêm sẽ triển khai hàm được gọi bởi tập dữ liệu Biểu đồ "Ngày và Tỷ giá hối đoái&USD; để tạo một biểu đồ dạng đường cơ bản. Hãy xem lại mã.
Các dòng đầu tiên thiết lập ba biến sau:
sheet: tệp tham chiếu đến trang tính hoạt động hiện tại.chartDataRange: dải ô dữ liệu mà chúng tôi muốn hình ảnh hóa. 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à Tập dữ liệu ngày và tỷ giá hối đoái USD. Bằng cách đặt tên cụ thể cho trang tính, chúng tôi đảm bảo mục trong trình đơn hoạt động ngay cả khi một trang tính khác đang hoạt động vì dải ô luôn bao phủ vị trí dữ liệu. Bắt đầu từ hàng 2 có nghĩa là chúng tôi đang bao gồm các tiêu đề cột và chúng tôi sẽ chỉ lập biểu đồ 100 ngày gần đây nhất (hàng).hAxisOptions: một đối tượng JavaScript cơ bản bao gồm một số thông tin cài đặt mà mã dùng để định cấu hình giao diện của trục hoành. Cụ thể, họ đặt các nhãn văn bản trục ngang ở độ lệch 60 độ và đặt số đườ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, bây giờ bạn chỉ cần hiểu rằng dịch vụ Spreadsheet cung cấp một số lớp EmbeddedChartBuilder. Để tạo một biểu đồ, trước tiên, mã của bạn sẽ tạo một đối tượng tạo biểu đồ dạng nhúng, sử dụng các phương thức của đối tượng đó để xác định chế độ cài đặt biểu đồ, sau đó gọi một 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 đối tượng EmbeddedChart trực tiếp vì tất cả các cấu hình biể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 EmbeddedChartBuilder mẹ và nhiều lớp tạo trình tạo con (chẳng hạn như EmbeddedLineChartBuilder) kế thừa từ lớp đó. Các lớp con cho phép Apps Script cung cấp phương thức định cấu hình biểu đồ cho 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 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 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 đối tượng EmbeddedChartBuilder, sau đó sử dụng EmbeddedChartBuilder.asLineChart() để đặt loại trình tạo thành EmbeddedLineChartBuilder.
Sau đó, mã đó xây dựng biểu đồ bằng dòng lược đồ Phần này của mã chỉ là một chuỗi 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 đây, mã sử dụng phương pháp chuỗi phương thức để giữ cho mã ở chế độ dễ đọc. Đây là hiệu quả của phương thức gọi:
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í đặt 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 đề cho biểu đồ.setNumHeaders(headers): Xác định số lượng hàng hoặc cột trong dải ô dữ liệu sẽ được coi là tiêu đề. Ở đây, mã sử dụng hàng đầu tiên trong dải ô dữ liệu làm tiêu đề, có nghĩa là văn bản trong hàng đó được sử dụng làm nhãn cho chuỗi dữ liệu riêng lẻ trong biểu đồ.setLegendPosition(position): Chuyển chú giải biểu đồ sang bên phải của biểu đồ. Phương thức này sử dụng giá trị enum Charts.Position làm thông số.setOption(option, value): Đặt các tùy chọn biểu đồ phức tạp. Tại đây, mã đặt tùy chọnhAxisthành đối tượnghAxisOptions. Có một số tùy chọn mà bạn có thể đặt bằng phương thức này. Các tùy chọn và giá trị có thể cho mỗi loại biểu đồ được nêu trong Thư viện biểu đồ API biểu đồ. Ví dụ: các tùy chọn mà bạn có thể đặt cho biểu đồ dạng đường được ghi lại trong phần Tùy chọn cấu hình biểu đồ dạng đường. Phương phápsetOption(option, value)là chủ đề nâng cao, vì vậy bạn có thể muốn tránh sử dụng phương thức này cho đến khi bạn cảm thấy thoải mái hơn với việc tạo biểu đồ trong Apps Script.build(): Tạo và trả về một đối tượngEmbeddedChartbằng cách sử dụng chế độ cài đặt ở trên.
Cuối cùng, mã gọi Sheet.insertChart(chart) để đặt biểu đồ được tạo vào trang tính hoạt động.
Kết quả
Bạn có thể xem hàm định dạng của mình trong thực tế bằng cách làm như sau:
- Lưu dự án tập lệnh của bạn vào trình chỉnh sửa Apps Script nếu bạn chưa lưu.
- Nhấp vào mục Tập dữ liệu trình bày > Biểu đồ "Ngày và tỷ lệ tỷ giá hối đoái USD".
Giờ đây, tập lệnh sẽ đặt một biểu đồ mới ở bên phải dữ liệu của bạn:
Xin chúc mừng, bạn đã tạo được 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 đồ của bạn sang Google Trang trình bày.
4. Xuất biểu đồ của bạn sang Trang trình bày
Một trong những thế mạnh của Apps Script là bạn có thể dễ dàng di chuyển dữ liệu từ ứng dụng này sang ứng dụng Google Workspace khác. Hầu hết các ứng dụng này đều có dịch vụ Apps Script dành riêng, tương tự như dịch vụ Bảng 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ả 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ý ứng dụng đó 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 bảng tính Google sang bản trình bày mới trên Google Trang trình bày. Bạn cũng sẽ thấy hai cách hiển thị thông báo tùy chỉnh 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 bởi mục trong trình đơn Tập dữ liệu trình bày > Xuất biểu đồ sang Trang trình bày. Thực hiện 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.gscủ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 của bạn.
Đánh giá mã
Mã này có thể ngắn hơn dự kiến. Hãy xem xét chức năng của mã này bằng cách chia mã thành 5 phần:
1: Xem biểu đồ
Một vài dòng đầu tiên tìm kiếm bảng tính đang hoạt động để tìm tất cả các biểu đồ được nhúng, thu thập các biểu đồ đó vào mảng charts. Những dòng này sử dụng phương thức Spreadsheet.getSheets() và phương thức Sheet.getCharts() để nhận danh sách trang tính và biểu đồ. Phương thức JavaScript Array.concat() được dùng để nối danh sách biểu đồ từ mỗi trang tính vào charts.
2: Kiểm tra xem có biểu đồ nào cần xuất
Mã này sẽ xác minh xem có biểu đồ nào để xuất hay không. Chúng tôi muốn tránh trình bày trống. Vì vậy, nếu không có biểu đồ nào, mã sẽ tạo một thông báo nhanh bằng cách sử dụng Spreadsheet.toast(message). Đây là một hộp thoại "nhỏ" 39 giây; bật lên ở góc dưới bên phải của Trang tính, lưu giữ 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 ngắn và thoát mà không làm gì khác. Nếu có các biểu đồ để 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 tên tệp của bản trình bày mới. Bảng này được đặt làm tên của bảng tính, có " Presentation" được nối vào 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 bản trình bày.
Các bản trình bày mới được tạo bằng một trang trình bày trống, duy nhất. Chúng tôi không muốn điều đó xảy ra trong bản trình bày của chúng tôi, vì vậy, mã này sẽ xóa bằng Presentation.getSlides() và Slide.remove().
4: Xuất biểu đồ
Trong phần tiếp theo, mã xác định position và size của đối tượng JavaScript để đặt vị trí của biểu đồ đã nhập vào trang trình bày và kích thước của biểu đồ (tính bằng pixel).
Mã này sẽ lặp qua mọi biểu đồ trong danh sách biểu đồ. Đối với mỗi biểu đồ, newSlide đượ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 có position và size được chỉ định.
5: Chia sẻ vị trí 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à bằng một đường liên kết mà họ có thể nhấp vào để mở bản trình bày đó. Để làm điều này, mã này sử dụng HTML dịch vụ Apps Script để tạo hộp thoại kiểu tùy chỉnh. Hộp thoại phương thức (còn gọi là hộp thoại tùy chỉnh trong Apps Script) là các cửa sổ xuất hiện trên giao diện Trang tính. Khi hiển thị, hộp thoại tùy 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 tùy chỉnh, mã cần có HTML để xác định nội dung của hộp thoại đó. Thành phần này được cung cấp trong biến html. Nội dung bao gồm một đoạn ngắn và 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 cũng sử dụng thuộc tính target="_blank" để bản trình bày được mở trong một thẻ trình duyệt mới chứ không phải 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 tùy chỉnh với HtmlOutput.setHeight(height) và HtmlOutput.setWidth(width).
Sau khi tạo htmlOutput, 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ả
Bây giờ bạn đã triển khai mục trình đơn thứ hai, bạn có thể xem mục này trong thực tế. Để kiểm tra hàm exportChartsToSlides():
- Lưu dự án tập lệnh của bạn vào trình chỉnh sửa Apps Script nếu bạn chưa lưu.
- Mở bảng tính của bạn và nhấp vào mục trình đơn Tập dữ liệu trình bày > Biểu đồ "Ngày và tỷ giá hối đoái USD" để tạo biểu đồ để xuất. Thẻ sẽ xuất hiện cố định với ô H5 trong trang tính hoạt động.
- Nhấp vào mục 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 ủy quyền lại tập lệnh.
- Bạn sẽ thấy tập lệnh của mình xử lý yêu cầu và hiển thị hộp thoại tùy 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 Ngày và bản trình bày theo tỷ giá hối đoái:
Nếu muốn, bạn cũng có thể thêm các biểu đồ khác vào bảng tính và chọn lại mục trong trình đơn để tạo bản trình bày có nhiều trang trình bày.
Bạn hiện có thể xuất các biểu đồ đã tạo trong Trang tính vào 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 gì bạn đã học được.
5. Kết luận
Xin chúc mừng! Giờ đây, bạn đã hoàn thành lớp học lập trình này và toàn bộ kiến thức cơ bản về Apps Script có trong danh sách phát lớp học lập trình của Google Trang tính. Bạn có thể sử dụng các nguyên tắc được giảng dạy trong danh sách phát này để mở rộng trải nghiệm của bạn trên Trang tính và khám phá khả 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 ngắn và hộp thoại tùy 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.
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, vẫn còn nhiều nội dung khác cần tìm hiểu về Apps Script.
Hãy tham khảo những tài nguyên 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ẫu mã Apps Script trên GitHub
Chúc bạn tập lệnh vui vẻ!