1. บทนำ
ยินดีต้อนรับสู่ส่วนต่างๆ ที่ 4 ของเพลย์ลิสต์ Apps Script ขั้นพื้นฐานด้วยเพลย์ลิสต์ Codelab ของ Google ชีต
การกรอกข้อมูลใน Codelab นี้จะทําให้คุณได้เรียนวิธีจัดรูปแบบข้อมูลสเปรดชีตใน Apps Script และเขียนฟังก์ชันเพื่อสร้างสเปรดชีตที่จัดระเบียบพร้อมข้อมูลที่มีการจัดรูปแบบซึ่งดึงมาจาก API สาธารณะ
สิ่งที่คุณจะได้เรียนรู้
- วิธีนําการจัดรูปแบบต่างๆ ของ Google ชีตไปใช้ใน Apps Script
- วิธีแปลงรายการออบเจ็กต์ JSON และแอตทริบิวต์ให้เป็นชีตข้อมูลที่มีการจัดระเบียบด้วย Apps Script
ข้อควรทราบก่อนที่จะเริ่มต้น
นี่คือ Codelab ที่ 4 ในเพลย์ลิสต์พื้นฐานของ Apps Script ที่มี Google ชีต ก่อนเริ่ม Codelab นี้ โปรดตรวจสอบว่าได้กรอกข้อมูลใน Codelab ก่อนหน้าเรียบร้อยแล้ว
สิ่งที่ต้องมี
- ความเข้าใจเกี่ยวกับหัวข้อพื้นฐานของ Apps Script ที่สํารวจใน Codelab ก่อนหน้าของเพลย์ลิสต์นี้
- ความคุ้นเคยกับเครื่องมือแก้ไข Apps Script ในระดับพื้นฐาน
- ทําความคุ้นเคยกับ Google ชีต
- ความสามารถในการอ่านรูปแบบ A1 ของชีต
- ทําความคุ้นเคยกับ JavaScript และชั้นเรียน
Stringของ JavaScript
2. ตั้งค่า
คุณต้องมีสเปรดชีตที่มีข้อมูลบางอย่างก่อนดําเนินการต่อ และเช่นเคย เรามีเอกสารข้อมูลที่คุณสามารถคัดลอกได้สําหรับแบบฝึกหัดเหล่านี้ โปรดทําตามขั้นตอนต่อไปนี้
- คลิกลิงก์นี้เพื่อคัดลอกแผ่นข้อมูล แล้วคลิก ทําสําเนา สเปรดชีตใหม่จะวางในโฟลเดอร์ Google ไดรฟ์และตั้งชื่อว่า "Copy of Data Format"
- คลิกที่ชื่อสเปรดชีตและเปลี่ยนชื่อจาก "สําเนาการจัดรูปแบบข้อมูล &&tt; เป็น"การจัดรูปแบบข้อมูล" สเปรดชีตของคุณจะมีลักษณะเช่นนี้ มีข้อมูลพื้นฐานเกี่ยวกับภาพยนตร์ของ Star Wars 3 เรื่องแรก
- เลือกส่วนขยาย และ Apps Script เพื่อเปิดโปรแกรมแก้ไขสคริปต์
- คลิกชื่อโครงการ Apps Script และเปลี่ยนจาก "project ที่ไม่มีชื่อ" เป็น "Data Format" คลิกเปลี่ยนชื่อเพื่อบันทึกการเปลี่ยนชื่อ
สเปรดชีตและโปรเจ็กต์นี้ช่วยให้คุณเริ่มต้น Codelab ได้แล้ว ไปที่ส่วนถัดไปเพื่อเริ่มดูข้อมูลเกี่ยวกับการจัดรูปแบบพื้นฐานใน Apps Script
3. สร้างเมนูที่กําหนดเอง
คุณสามารถเพิ่มวิธีการจัดรูปแบบพื้นฐานใน Apps Script กับชีตได้หลายวิธี แบบฝึกหัดต่อไปนี้แสดงวิธีจัดรูปแบบข้อมูล เพื่อช่วยควบคุมการดําเนินการจัดรูปแบบของคุณ ให้สร้างเมนูที่กําหนดเองพร้อมรายการที่คุณต้องการ กระบวนการสร้างเมนูที่กําหนดเองมีคําอธิบายอยู่ใน Codelab เกี่ยวกับการทํางานกับข้อมูล แต่เราจะสรุปไว้ที่นี่อีกครั้ง
การใช้งาน
มาสร้างเมนูที่กําหนดเองกัน
- ในเครื่องมือแก้ไข Apps Script ให้แทนที่โค้ดในโครงการสคริปต์ด้วยข้อมูลต่อไปนี้
/**
* A special function that runs when the spreadsheet is opened
* or reloaded, used to add a custom menu to the spreadsheet.
*/
function onOpen() {
// Get the spreadsheet's user-interface object.
var ui = SpreadsheetApp.getUi();
// Create and add a named menu and its items to the menu bar.
ui.createMenu('Quick formats')
.addItem('Format row header', 'formatRowHeader')
.addItem('Format column header', 'formatColumnHeader')
.addItem('Format dataset', 'formatDataset')
.addToUi();
}
- บันทึกโปรเจ็กต์สคริปต์
- เลือก
onOpenจากรายการฟังก์ชันในตัวแก้ไขสคริปต์ แล้วคลิกเรียกใช้ การดําเนินการนี้จะเรียกใช้onOpen()เพื่อสร้างเมนูสเปรดชีตใหม่ คุณจึงไม่ต้องโหลดสเปรดชีตซ้ํา
การตรวจสอบโค้ด
มาตรวจสอบโค้ดนี้เพื่อทําความเข้าใจกันดีกว่า ใน onOpen() บรรทัดแรกจะใช้เมธอด getUi() เพื่อหาออบเจ็กต์ Ui ที่แสดงถึงอินเทอร์เฟซผู้ใช้ของสเปรดชีตที่ใช้งานอยู่ที่มีการเชื่อมโยงสคริปต์นี้
บรรทัดถัดไปจะสร้างเมนู (Quick formats) เพิ่มรายการเมนู (Format row header Format column header และ Format dataset) ในเมนู แล้วเพิ่มเมนูในอินเทอร์เฟซของสเปรดชีต ซึ่งทําได้โดยใช้เมธอด createMenu(caption), addItem(caption, functionName) และ addToUi() ตามลําดับ
เมธอด addItem(caption, functionName) จะสร้างการเชื่อมต่อระหว่างป้ายกํากับรายการในเมนูและฟังก์ชัน Apps Script ที่จะทํางานเมื่อเลือกรายการเมนู เช่น การเลือกรายการในเมนู Format row header จะทําให้ชีตพยายามเรียกใช้ฟังก์ชัน formatRowHeader() (ซึ่งยังไม่มีอยู่)
ผลลัพธ์
คลิกเมนู Quick formats เพื่อดูรายการในเมนูใหม่ในสเปรดชีต
การคลิกรายการเหล่านี้ทําให้เกิดข้อผิดพลาดเนื่องจากคุณไม่ได้นําฟังก์ชันที่เกี่ยวข้องมาใช้ ดังนั้นโปรดดําเนินการต่อไป
4. จัดรูปแบบแถวส่วนหัว
ชุดข้อมูลในสเปรดชีตมักจะมีแถวส่วนหัวเพื่อระบุข้อมูลในแต่ละคอลัมน์ คุณควรจัดรูปแบบแถวส่วนหัวเพื่อแยกออกจากข้อมูลที่เหลือในสเปรดชีต
ใน Codelab แรก คุณได้สร้างมาโครสําหรับส่วนหัวและแก้ไขโค้ดของส่วนหัว คุณจะจัดรูปแบบแถวส่วนหัวตั้งแต่ต้นโดยใช้ Apps Script ได้ในส่วนนี้ แถวส่วนหัวที่คุณจะสร้างจะทําให้ข้อความส่วนหัวเป็นตัวหนา เปลี่ยนสีพื้นหลังเป็นสีเขียวเข้มสีฟ้า ใส่ข้อความสีขาว และเพิ่มเส้นขอบทึบ
การใช้งาน
หากต้องการใช้วิธีจัดรูปแบบ ให้ใช้บริการสเปรดชีตแบบเดียวกับที่คุณใช้ก่อนหน้านี้ แต่ตอนนี้คุณจะใช้วิธีการจัดรูปแบบบางวิธีก็ได้ โปรดทําตามขั้นตอนต่อไปนี้
- เพิ่มฟังก์ชันต่อไปนี้ในตอนท้ายของสคริปต์สคริปต์ในเครื่องมือแก้ไข Apps Script
/**
* Formats top row of sheet using our header row style.
*/
function formatRowHeader() {
// Get the current active sheet and the top row's range.
var sheet = SpreadsheetApp.getActiveSheet();
var headerRange = sheet.getRange(1, 1, 1, sheet.getLastColumn());
// Apply each format to the top row: bold white text,
// blue-green background, and a solid black border
// around the cells.
headerRange
.setFontWeight('bold')
.setFontColor('#ffffff')
.setBackground('#007272')
.setBorder(
true, true, true, true, null, null,
null,
SpreadsheetApp.BorderStyle.SOLID_MEDIUM);
}
- บันทึกโปรเจ็กต์สคริปต์
การตรวจสอบโค้ด
โค้ด Apps Script ในการใช้งานนั้นตรงไปตรงมาเช่นเดียวกับงานที่มีการจัดรูปแบบจํานวนมาก 2 บรรทัดแรกจะใช้เมธอดที่คุณเห็นก่อนหน้านี้เพื่อดูการอ้างอิงไปยังชีตที่ใช้งานอยู่ในปัจจุบัน (sheet) และแถวบนสุดของชีต (headerRange)) โดยเมธอด Sheet.getRange(row, column, numRows, numColumns) จะระบุแถวบนสุด รวมถึงข้อมูลเฉพาะคอลัมน์ที่มีข้อมูลเท่านั้น เมธอด Sheet.getLastColumn() จะแสดงดัชนีคอลัมน์ของคอลัมน์สุดท้ายที่มีข้อมูลในชีต ในตัวอย่างนี้คือคอลัมน์ E (url)
ส่วนที่เหลือของโค้ดจะเรียกใช้เมธอด Range หลายวิธีเพื่อนําตัวเลือกการจัดรูปแบบไปใช้กับเซลล์ทั้งหมดใน headerRange เราใช้เชนเมธอดในการเรียกใช้วิธีการจัดรูปแบบแต่ละวิธีดังต่อไปนี้เพื่อให้โค้ดอ่านง่าย
Range.setFontWeight(fontWeight)ใช้เพื่อกําหนดน้ําหนักแบบอักษรให้เป็นตัวหนาRange.setFontColor(color)จะใช้เพื่อตั้งค่าสีแบบอักษรเป็นสีขาวRange.setBackground(color)จะใช้เพื่อตั้งค่าสีพื้นหลังเป็นสีเขียวเข้มเข้มsetBorder(top, left, bottom, right, vertical, horizontal, color, style)ใส่เส้นขอบสีดําทึบรอบเซลล์ของช่วง
วิธีการสุดท้ายมีพารามิเตอร์หลายตัว ดังนั้นมาลองดูกันว่าแต่ละรายการทํางานอย่างไร พารามิเตอร์ 4 รายการแรกในที่นี้ (ตั้งค่าเป็น true) จะบอก Apps Script ควรเพิ่มเส้นขอบด้านบน ด้านล่าง และด้านซ้ายและด้านขวาของช่วง พารามิเตอร์ที่ 5 และ 6 (null และ null) ของ Apps Script โดยตรงเพื่อหลีกเลี่ยงการเปลี่ยนเส้นเส้นขอบภายในช่วงที่เลือก พารามิเตอร์ที่ 7 (null) ระบุว่าสีของเส้นขอบควรเป็นค่าเริ่มต้นเป็นสีดํา สุดท้าย พารามิเตอร์สุดท้ายจะระบุประเภทของรูปแบบเส้นขอบที่จะใช้ โดยนํามาจากตัวเลือกจาก SpreadsheetApp.BorderStyle
ผลลัพธ์
คุณดูฟังก์ชันการจัดรูปแบบได้โดยทําตามขั้นตอนต่อไปนี้
- บันทึกโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไข Apps Script หากยังไม่ได้ทํา
- คลิกรายการในเมนูรูปแบบด่วน > ส่วนหัวของแถวรูปแบบ
ผลลัพธ์ควรมีลักษณะเช่นนี้
ตอนนี้คุณเปลี่ยนการจัดรูปแบบให้งานแบบอัตโนมัติได้แล้ว ส่วนถัดไปจะใช้เทคนิคเดียวกันเพื่อสร้างรูปแบบรูปแบบต่างๆ สําหรับส่วนหัวของคอลัมน์
5. จัดรูปแบบส่วนหัวคอลัมน์
หากคุณสามารถทําส่วนหัวของแถวในแบบของคุณได้ คุณก็สามารถสร้างส่วนหัวคอลัมน์ได้เช่นกัน ส่วนหัวคอลัมน์ช่วยเพิ่มความสามารถในการอ่านชุดข้อมูลบางชุด ตัวอย่างเช่น คอลัมน์ชื่อในสเปรดชีตนี้จะเพิ่มประสิทธิภาพได้ด้วยตัวเลือกรูปแบบต่อไปนี้
- ทําข้อความเป็นตัวหนา
- ทําข้อความเป็นตัวเอียง
- การเพิ่มเส้นขอบของเซลล์
- การแทรกไฮเปอร์ลิงก์โดยใช้เนื้อหาคอลัมน์ url เมื่อเพิ่มไฮเปอร์ลิงก์เหล่านี้แล้ว ให้นําคอลัมน์ URL ออกเพื่อช่วยล้างชีต
ถัดจากนั้นให้ใช้ฟังก์ชัน formatColumnHeader() เพื่อนําการเปลี่ยนแปลงเหล่านี้ไปใช้กับคอลัมน์แรกในชีต และเพื่อช่วยให้อ่านโค้ดได้ง่ายขึ้นอีกนิด คุณก็ใช้ฟังก์ชันตัวช่วย 2 อย่างได้ด้วย
การใช้งาน
และเช่นเคย คุณจะต้องเพิ่มฟังก์ชันการจัดรูปแบบส่วนหัวคอลัมน์โดยอัตโนมัติ โปรดทําตามขั้นตอนต่อไปนี้
- ในฟังก์ชัน Apps Script ให้เพิ่มฟังก์ชัน
formatColumnHeader()ต่อไปนี้ในตอนท้ายของโปรเจ็กต์สคริปต์
/**
* Formats the column header of the active sheet.
*/
function formatColumnHeader() {
var sheet = SpreadsheetApp.getActiveSheet();
// Get total number of rows in data range, not including
// the header row.
var numRows = sheet.getDataRange().getLastRow() - 1;
// Get the range of the column header.
var columnHeaderRange = sheet.getRange(2, 1, numRows, 1);
// Apply text formatting and add borders.
columnHeaderRange
.setFontWeight('bold')
.setFontStyle('italic')
.setBorder(
true, true, true, true, null, null,
null,
SpreadsheetApp.BorderStyle.SOLID_MEDIUM);
// Call helper method to hyperlink the first column contents
// to the url column contents.
hyperlinkColumnHeaders_(columnHeaderRange, numRows);
}
- เพิ่มฟังก์ชันตัวช่วยต่อไปนี้ในตอนท้ายของโปรเจ็กต์สคริปต์ หลังจากฟังก์ชัน
formatColumnHeader()
/**
* Helper function that hyperlinks the column header with the
* 'url' column contents. The function then removes the column.
*
* @param {object} headerRange The range of the column header
* to update.
* @param {number} numRows The size of the column header.
*/
function hyperlinkColumnHeaders_(headerRange, numRows) {
// Get header and url column indices.
var headerColIndex = 1;
var urlColIndex = columnIndexOf_('url');
// Exit if the url column is missing.
if(urlColIndex == -1)
return;
// Get header and url cell values.
var urlRange =
headerRange.offset(0, urlColIndex - headerColIndex);
var headerValues = headerRange.getValues();
var urlValues = urlRange.getValues();
// Updates header values to the hyperlinked header values.
for(var row = 0; row < numRows; row++){
headerValues[row][0] = '=HYPERLINK("' + urlValues[row]
+ '","' + headerValues[row] + '")';
}
headerRange.setValues(headerValues);
// Delete the url column to clean up the sheet.
SpreadsheetApp.getActiveSheet().deleteColumn(urlColIndex);
}
/**
* Helper function that goes through the headers of all columns
* and returns the index of the column with the specified name
* in row 1. If a column with that name does not exist,
* this function returns -1. If multiple columns have the same
* name in row 1, the index of the first one discovered is
* returned.
*
* @param {string} colName The name to find in the column
* headers.
* @return The index of that column in the active sheet,
* or -1 if the name isn't found.
*/
function columnIndexOf_(colName) {
// Get the current column names.
var sheet = SpreadsheetApp.getActiveSheet();
var columnHeaders =
sheet.getRange(1, 1, 1, sheet.getLastColumn());
var columnNames = columnHeaders.getValues();
// Loops through every column and returns the column index
// if the row 1 value of that column matches colName.
for(var col = 1; col <= columnNames[0].length; col++)
{
if(columnNames[0][col-1] === colName)
return col;
}
// Returns -1 if a column named colName does not exist.
return -1;
}
- บันทึกโปรเจ็กต์สคริปต์
การตรวจสอบโค้ด
มาตรวจสอบโค้ดในฟังก์ชันทั้ง 3 รายการนี้แยกกันกัน
formatColumnHeader()
ตามที่คุณอาจคาดหวัง ตัวแปร 2-3 บรรทัดแรกของฟังก์ชันชุดนี้จะอ้างอิงชีตและช่วงที่เราสนใจ ดังนี้
- ระบบจะจัดเก็บชีตที่ใช้งานอยู่ไว้ใน
sheet - ระบบจะคํานวณและบันทึกจํานวนแถวในส่วนหัวของคอลัมน์ใน
numRowsโค้ดนี้จะลบ 1 จํานวนดังกล่าว ดังนั้นจํานวนแถวจะไม่นับรวมส่วนหัวคอลัมน์:title - ช่วงที่ครอบคลุมส่วนหัวของคอลัมน์จะจัดเก็บอยู่ใน
columnHeaderRange
จากนั้นโค้ดจะใช้เส้นขอบและตัวหนากับช่วงส่วนหัวของคอลัมน์ เช่นเดียวกับใน formatRowHeader() อีกทั้งยังใช้ Range.setFontStyle(fontStyle) เพื่อทําให้ข้อความเป็นตัวเอียงได้ด้วย
การเพิ่มไฮเปอร์ลิงก์ลงในคอลัมน์ส่วนหัวมีความซับซ้อนมากขึ้น formatColumnHeader() จึงจะเรียกใช้ hyperlinkColumnHeaders_(headerRange, numRows) เพื่อจัดการงานนี้ ซึ่งจะช่วยให้โค้ดดูเป็นระเบียบและอ่านง่าย
hyperlinkColumnHeaders_(headerRange, numRows)
ฟังก์ชันตัวช่วยนี้จะระบุดัชนีคอลัมน์ของส่วนหัวก่อน (สมมติว่าเป็นดัชนี 1) และคอลัมน์ url โค้ดนี้จะเรียกใช้ columnIndexOf_('url') เพื่อรับดัชนีคอลัมน์ URL หากไม่พบคอลัมน์ url แสดงว่าเมธอดจะออกโดยไม่แก้ไขข้อมูล
ฟังก์ชันจะได้รับช่วงใหม่ (urlRange) ที่ครอบคลุม URL ที่เกี่ยวข้องกับแถวคอลัมน์ส่วนหัว วิธีนี้ใช้เมธอด Range.offset(rowOffset, columnOffset) ซึ่งรับประกันว่าช่วง 2 ช่วงจะมีขนาดเท่ากัน ระบบจะดึงค่าทั้งในคอลัมน์ headerColumn และ url (headerValues และ urlValues)
จากนั้นฟังก์ชันจะวนซ้ําค่าเซลล์ส่วนหัวของคอลัมน์แต่ละค่าและแทนที่ด้วยสูตรในชีต =HYPERLINK() ที่สร้างขึ้นด้วยส่วนหัวและเนื้อหา url คอลัมน์ จากนั้นระบบจะแทรกค่าของส่วนหัวที่แก้ไขในชีตโดยใช้ Range.setValues(values)
สุดท้าย เพื่อช่วยให้ชีตสะอาดและกําจัดข้อมูลซ้ําซ้อน ระบบจึงเรียกใช้ Sheet.deleteColumn(columnPosition) เพื่อนําคอลัมน์ url ออก
columnIndexOf_(colName)
ฟังก์ชันช่วยนี้เป็นเพียงฟังก์ชันยูทิลิตีง่ายๆ ที่ค้นหาชื่อแถวแรกของชีต 3 บรรทัดแรกใช้วิธีการต่างๆ ที่คุณเห็นแล้วเพื่อรับรายการชื่อคอลัมน์จากแถวที่ 1 ของสเปรดชีต ชื่อเหล่านี้จะจัดเก็บไว้ในคอลัมน์ส่วนหัวคอลัมน์
จากนั้นฟังก์ชันจะตรวจสอบแต่ละชื่อตามลําดับ และหากพบชื่อที่ตรงกับชื่อที่ค้นหาอยู่ ระบบจะหยุดแสดงและส่งคืนดัชนีตามคอลัมน์ หากชื่อถึงส่วนท้ายของรายการชื่อแต่ไม่พบชื่อ จะแสดงผล -1 เพื่อระบุว่าไม่พบชื่อ
ผลลัพธ์
คุณดูฟังก์ชันการจัดรูปแบบได้โดยทําตามขั้นตอนต่อไปนี้
- บันทึกโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไข Apps Script หากยังไม่ได้ทํา
- คลิกรายการในเมนูรูปแบบด่วน > ส่วนหัวคอลัมน์
ผลลัพธ์ควรมีลักษณะเช่นนี้
ตอนนี้คุณกําหนดให้ระบบจัดรูปแบบรายอื่นโดยอัตโนมัติแล้ว เมื่อจัดรูปแบบส่วนหัวคอลัมน์และแถว ส่วนถัดไปจะแสดงวิธีจัดรูปแบบข้อมูล
6. จัดรูปแบบชุดข้อมูล
เมื่อคุณมีส่วนหัวแล้ว มาสร้างฟังก์ชันที่จัดรูปแบบข้อมูลที่เหลือในชีตกันเถอะ เราจะใช้ตัวเลือกการจัดรูปแบบต่อไปนี้
- สลับสีพื้นหลังของแถว (เรียกว่าแถบ)
- การเปลี่ยนรูปแบบวันที่
- กําลังใช้เส้นขอบ
- การปรับขนาดคอลัมน์และแถวทั้งหมดโดยอัตโนมัติ
คุณจะสร้างฟังก์ชัน formatDataset() และวิธีช่วยเหลือเพิ่มเติมเพื่อนํารูปแบบเหล่านี้ไปใช้กับข้อมูลชีตได้แล้ว
การใช้งาน
เช่นเคย ให้เพิ่มฟังก์ชันการจัดรูปแบบข้อมูลโดยอัตโนมัติ โปรดทําตามขั้นตอนต่อไปนี้
- ในฟังก์ชัน Apps Script ให้เพิ่มฟังก์ชัน
formatDataset()ต่อไปนี้ในตอนท้ายของโปรเจ็กต์สคริปต์
/**
* Formats the sheet data, excluding the header row and column.
* Applies the border and banding, formats the 'release_date'
* column, and autosizes the columns and rows.
*/
function formatDataset() {
// Get the active sheet and data range.
var sheet = SpreadsheetApp.getActiveSheet();
var fullDataRange = sheet.getDataRange();
// Apply row banding to the data, excluding the header
// row and column. Only apply the banding if the range
// doesn't already have banding set.
var noHeadersRange = fullDataRange.offset(
1, 1,
fullDataRange.getNumRows() - 1,
fullDataRange.getNumColumns() - 1);
if (! noHeadersRange.getBandings()[0]) {
// The range doesn't already have banding, so it's
// safe to apply it.
noHeadersRange.applyRowBanding(
SpreadsheetApp.BandingTheme.LIGHT_GREY,
false, false);
}
// Call a helper function to apply date formatting
// to the column labeled 'release_date'.
formatDates_( columnIndexOf_('release_date') );
// Set a border around all the data, and resize the
// columns and rows to fit.
fullDataRange.setBorder(
true, true, true, true, null, null,
null,
SpreadsheetApp.BorderStyle.SOLID_MEDIUM);
sheet.autoResizeColumns(1, fullDataRange.getNumColumns());
sheet.autoResizeRows(1, fullDataRange.getNumRows());
}
- เพิ่มฟังก์ชันตัวช่วยต่อไปนี้ในตอนท้ายของโปรเจ็กต์สคริปต์ หลังจากฟังก์ชัน
formatDataset()
/**
* Helper method that applies a
* "Month Day, Year (Day of Week)" date format to the
* indicated column in the active sheet.
*
* @param {number} colIndex The index of the column
* to format.
*/
function formatDates_(colIndex) {
// Exit if the given column index is -1, indicating
// the column to format isn't present in the sheet.
if (colIndex < 0)
return;
// Set the date format for the date column, excluding
// the header row.
var sheet = SpreadsheetApp.getActiveSheet();
sheet.getRange(2, colIndex, sheet.getLastRow() - 1, 1)
.setNumberFormat("mmmm dd, yyyy (dddd)");
}
- บันทึกโปรเจ็กต์สคริปต์
การตรวจสอบโค้ด
มาตรวจสอบโค้ดในฟังก์ชันทั้ง 2 รายการนี้แยกกันกัน
formatDataset()
ฟังก์ชันนี้มีรูปแบบคล้ายกับฟังก์ชันรูปแบบก่อนหน้าซึ่งคุณได้ใช้งานแล้ว ขั้นแรก ระบบจะได้รับตัวแปรเพื่อระงับการอ้างอิงไปยังชีตที่ใช้งานอยู่ (ชีต) และช่วงข้อมูล (fullDataRange)
ขั้นที่ 2 จะใช้เมธอด Range.offset(rowOffset, columnOffset, numRows, numColumns) เพื่อสร้างช่วง (noHeadersRange) ที่ครอบคลุมข้อมูลทั้งหมดในชีต ยกเว้นส่วนหัวของคอลัมน์และแถว โค้ดจะตรวจสอบว่าช่วงใหม่นี้มีแถบข้อมูลที่มีอยู่หรือไม่ (โดยใช้ Range.getBandings()) ซึ่งจําเป็นเนื่องจาก Apps Script ส่งข้อผิดพลาดหากคุณพยายามใช้แถบสีใหม่ หากไม่มีแถบสีเพี้ยน ฟังก์ชันจะเพิ่มแถบสีเทาอ่อนโดยใช้ Range.applyRowBanding(bandingTheme, showHeader, showFooter) ไม่เช่นนั้น ฟังก์ชันต่างๆ จะดําเนินการต่อ
ขั้นตอนถัดไปจะเรียกใช้ฟังก์ชันตัวช่วย formatDates_(colIndex) เพื่อจัดรูปแบบวันที่ในคอลัมน์ "release_date' (ตามที่อธิบายไว้ด้านล่าง) คอลัมน์จะระบุโดยใช้ฟังก์ชันตัวช่วย columnIndexOf_(colName) ที่คุณใช้อยู่ก่อนหน้านี้
สุดท้าย การจัดรูปแบบจะเสร็จสิ้นโดยการเพิ่มเส้นขอบอื่น (เหมือนก่อนหน้านี้) และปรับขนาดคอลัมน์และแถวทั้งหมดให้พอดีกับข้อมูลที่มีอยู่โดยใช้เมธอด Sheet.autoResizeColumns(columnPosition) และ Sheet.autoResizeColumns(columnPosition)
formatDates_(colIndex)
ฟังก์ชันตัวช่วยนี้ใช้รูปแบบวันที่ที่เจาะจงกับคอลัมน์ที่ใช้ดัชนีคอลัมน์ที่ระบุ กล่าวคือ จัดรูปแบบค่าวันที่เป็น "เดือน วัน ปี (วันในสัปดาห์)"
ขั้นแรก ฟังก์ชันจะตรวจสอบว่าดัชนีคอลัมน์ที่ระบุถูกต้อง (กล่าวคือ 0 ขึ้นไป) หากไม่เป็นเช่นนั้น เบราว์เซอร์จะส่งคืนโดยไม่ดําเนินการใดๆ การตรวจสอบนี้จะป้องกันข้อผิดพลาดที่อาจเกิดขึ้นหากแผ่นงานไม่มีคอลัมน์ "release_date' เช่น
เมื่อตรวจสอบดัชนีคอลัมน์แล้ว ฟังก์ชันจะได้รับช่วงที่ครอบคลุมคอลัมน์นั้น (ยกเว้นแถวส่วนหัวของคอลัมน์) และใช้ Range.setNumberFormat(numberFormat) เพื่อนําการจัดรูปแบบไปใช้
ผลลัพธ์
คุณดูฟังก์ชันการจัดรูปแบบได้โดยทําตามขั้นตอนต่อไปนี้
- บันทึกโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไข Apps Script หากยังไม่ได้ทํา
- คลิกรายการในเมนูรูปแบบด่วน > ชุดข้อมูลรูปแบบ
ผลลัพธ์ควรมีลักษณะเช่นนี้
คุณได้กําหนดให้ระบบจัดรูปแบบใหม่โดยอัตโนมัติแล้ว ตอนนี้คุณมีคําสั่งการจัดรูปแบบให้ใช้งานได้แล้ว ต่อไปเราจะมาเพิ่มข้อมูลเพิ่มเติมเพื่อนําไปใช้กับคําสั่งดังกล่าว
7. ดึงข้อมูลและจัดรูปแบบข้อมูล API
ที่ผ่านมาใน Codelab นี้ คุณได้เห็นวิธีใช้ Apps Script เป็นทางเลือกในการจัดรูปแบบสเปรดชีตแล้ว จากนั้น คุณจะต้องเขียนโค้ดที่ดึงข้อมูลจาก API สาธารณะ จากนั้นแทรกลงในสเปรดชีตและจัดรูปแบบให้อ่านได้ง่าย
ใน Codelab ที่ผ่านมา คุณได้เรียนรู้วิธีดึงข้อมูลจาก API คุณจะใช้เทคนิคเดียวกันที่นี่ ในแบบฝึกหัดนี้ เราจะใช้ Star Wars API (SWAPI) สาธารณะเพื่อสร้างสเปรดชีต กล่าวอย่างเจาะจงคือ คุณจะใช้ API เพื่อดูข้อมูลเกี่ยวกับตัวละครหลักที่ปรากฏในภาพยนตร์ Star Wars ต้นฉบับทั้ง 3 เรื่อง
โค้ดของคุณจะเรียกใช้ API เพื่อรับข้อมูล JSON จํานวนมาก แยกวิเคราะห์การตอบกลับ วางข้อมูลในชีตใหม่ แล้วจัดรูปแบบชีต
การใช้งาน
ในส่วนนี้ คุณจะได้เพิ่มรายการในเมนูเพิ่มเติม รายการในเมนูแต่ละรายการจะเรียกใช้สคริปต์ Wrapper ที่ส่งตัวแปรเฉพาะรายการไปยังฟังก์ชันหลัก (createResourceSheet_()) คุณจะใช้ฟังก์ชันนี้และฟังก์ชันผู้ช่วยเพิ่มเติม 3 รายการ เช่นเดียวกับก่อนหน้านี้ ฟังก์ชันตัวช่วยจะช่วยแยกส่วนงานที่สมเหตุสมผลในเชิงตรรกะและช่วยให้อ่านโค้ดได้ง่ายขึ้น
ดําเนินการดังนี้
- ในฟังก์ชัน Apps Script ที่อัปเดต ให้อัปเดตฟังก์ชัน
onOpen()ในโครงการสคริปต์เพื่อให้ตรงกับรายการต่อไปนี้
/**
* A special function that runs when the spreadsheet is opened
* or reloaded, used to add a custom menu to the spreadsheet.
*/
function onOpen() {
// Get the Ui object.
var ui = SpreadsheetApp.getUi();
// Create and add a named menu and its items to the menu bar.
ui.createMenu('Quick formats')
.addItem('Format row header', 'formatRowHeader')
.addItem('Format column header', 'formatColumnHeader')
.addItem('Format dataset', 'formatDataset')
.addSeparator()
.addSubMenu(ui.createMenu('Create character sheet')
.addItem('Episode IV', 'createPeopleSheetIV')
.addItem('Episode V', 'createPeopleSheetV')
.addItem('Episode VI', 'createPeopleSheetVI')
)
.addToUi();
}
- บันทึกโปรเจ็กต์สคริปต์
- เลือก
onOpenจากรายการฟังก์ชันในตัวแก้ไขสคริปต์ แล้วคลิกเรียกใช้ การดําเนินการนี้จะเรียกใช้onOpen()เพื่อสร้างเมนูสเปรดชีตใหม่ด้วยตัวเลือกใหม่ที่คุณเพิ่ม - หากต้องการสร้างไฟล์ Apps Script ถัดจากไฟล์ ให้คลิกเพิ่มไฟล์
> Script - ตั้งชื่อสคริปต์ใหม่ "API" และกด Enter (สคริปต์แอปจะเพิ่มส่วนขยาย
.gsต่อท้ายชื่อไฟล์สคริปต์โดยอัตโนมัติ) - แทนที่โค้ดในไฟล์ API.gs ใหม่ด้วยข้อมูลต่อไปนี้
/**
* Wrapper function that passes arguments to create a
* resource sheet describing the characters from Episode IV.
*/
function createPeopleSheetIV() {
createResourceSheet_('characters', 1, "IV");
}
/**
* Wrapper function that passes arguments to create a
* resource sheet describing the characters from Episode V.
*/
function createPeopleSheetV() {
createResourceSheet_('characters', 2, "V");
}
/**
* Wrapper function that passes arguments to create a
* resource sheet describing the characters from Episode VI.
*/
function createPeopleSheetVI() {
createResourceSheet_('characters', 3, "VI");
}
/**
* Creates a formatted sheet filled with user-specified
* information from the Star Wars API. If the sheet with
* this data exists, the sheet is overwritten with the API
* information.
*
* @param {string} resourceType The type of resource.
* @param {number} idNumber The identification number of the film.
* @param {number} episodeNumber The Star Wars film episode number.
* This is only used in the sheet name.
*/
function createResourceSheet_(
resourceType, idNumber, episodeNumber) {
// Fetch the basic film data from the API.
var filmData = fetchApiResourceObject_(
"https://swapi.dev/api/films/" + idNumber);
// Extract the API URLs for each resource so the code can
// call the API to get more data about each individually.
var resourceUrls = filmData[resourceType];
// Fetch each resource from the API individually and push
// them into a new object list.
var resourceDataList = [];
for(var i = 0; i < resourceUrls.length; i++){
resourceDataList.push(
fetchApiResourceObject_(resourceUrls[i])
);
}
// Get the keys used to reference each part of data within
// the resources. The keys are assumed to be identical for
// each object since they're all the same resource type.
var resourceObjectKeys = Object.keys(resourceDataList[0]);
// Create the sheet with the appropriate name. It
// automatically becomes the active sheet when it's created.
var resourceSheet = createNewSheet_(
"Episode " + episodeNumber + " " + resourceType);
// Add the API data to the new sheet, using each object
// key as a column header.
fillSheetWithData_(resourceSheet, resourceObjectKeys, resourceDataList);
// Format the new sheet using the same styles the
// 'Quick Formats' menu items apply. These methods all
// act on the active sheet, which is the one just created.
formatRowHeader();
formatColumnHeader();
formatDataset();
}
- เพิ่มฟังก์ชันตัวช่วยต่อไปนี้ในส่วนท้ายของไฟล์โปรเจ็กต์สคริปต์ API.gs
/**
* Helper function that retrieves a JSON object containing a
* response from a public API.
*
* @param {string} url The URL of the API object being fetched.
* @return {object} resourceObject The JSON object fetched
* from the URL request to the API.
*/
function fetchApiResourceObject_(url) {
// Make request to API and get response.
var response =
UrlFetchApp.fetch(url, {'muteHttpExceptions': true});
// Parse and return the response as a JSON object.
var json = response.getContentText();
var responseObject = JSON.parse(json);
return responseObject;
}
/**
* Helper function that creates a sheet or returns an existing
* sheet with the same name.
*
* @param {string} name The name of the sheet.
* @return {object} The created or existing sheet
* of the same name. This sheet becomes active.
*/
function createNewSheet_(name) {
var ss = SpreadsheetApp.getActiveSpreadsheet();
// Returns an existing sheet if it has the specified
// name. Activates the sheet before returning.
var sheet = ss.getSheetByName(name);
if (sheet) {
return sheet.activate();
}
// Otherwise it makes a sheet, set its name, and returns it.
// New sheets created this way automatically become the active
// sheet.
sheet = ss.insertSheet(name);
return sheet;
}
/**
* Helper function that adds API data to the sheet.
* Each object key is used as a column header in the new sheet.
*
* @param {object} resourceSheet The sheet object being modified.
* @param {object} objectKeys The list of keys for the resources.
* @param {object} resourceDataList The list of API
* resource objects containing data to add to the sheet.
*/
function fillSheetWithData_(
resourceSheet, objectKeys, resourceDataList) {
// Set the dimensions of the data range being added to the sheet.
var numRows = resourceDataList.length;
var numColumns = objectKeys.length;
// Get the resource range and associated values array. Add an
// extra row for the column headers.
var resourceRange =
resourceSheet.getRange(1, 1, numRows + 1, numColumns);
var resourceValues = resourceRange.getValues();
// Loop over each key value and resource, extracting data to
// place in the 2D resourceValues array.
for (var column = 0; column < numColumns; column++) {
// Set the column header.
var columnHeader = objectKeys[column];
resourceValues[0][column] = columnHeader;
// Read and set each row in this column.
for (var row = 1; row < numRows + 1; row++) {
var resource = resourceDataList[row - 1];
var value = resource[columnHeader];
resourceValues[row][column] = value;
}
}
// Remove any existing data in the sheet and set the new values.
resourceSheet.clear()
resourceRange.setValues(resourceValues);
}
- บันทึกโปรเจ็กต์สคริปต์
การตรวจสอบโค้ด
คุณเพิ่งเพิ่มโค้ดจํานวนมาก มาดูรายละเอียดของแต่ละฟังก์ชันเพื่อทําความเข้าใจวิธีการทํางานกัน
onOpen()
คุณได้เพิ่มเมนูในเมนู 2-3 รายการลงในเมนู Quick formats แล้ว คุณตั้งค่าเส้นแบ่งแล้วใช้เมธอด Menu.addSubMenu(menu) เพื่อสร้างโครงสร้างเมนูที่ซ้อนกันโดยมี 3 รายการใหม่ รายการใหม่จะเพิ่มลงในเมธอด Menu.addItem(caption, functionName)
ฟังก์ชัน Wrapper
รายการเมนูที่เพิ่มทั้งหมดกําลังทําสิ่งที่คล้ายคลึงกัน นั่นคือ พยายามสร้างแผ่นงานที่มีข้อมูลที่ดึงมาจาก SWAPI ความแตกต่างเพียงอย่างเดียวคือพวกเขามุ่งเน้นไปที่ภาพยนตร์คนละเรื่อง
การเขียนฟังก์ชันเดียวเพื่อสร้างชีตและทําฟังก์ชันยอมรับพารามิเตอร์เพื่อกําหนดว่าจะใช้ภาพยนตร์เรื่องใด แต่เมธอด Menu.addItem(caption, functionName) จะไม่อนุญาตให้คุณส่งพารามิเตอร์ไปยังพารามิเตอร์เมื่อเรียกใช้โดยเมนู แล้วคุณจะหลีกเลี่ยงการเขียนโค้ดเดิมซ้ํา 3 ครั้งได้อย่างไร
คําตอบคือ ฟังก์ชัน Wrapper ฟังก์ชันเหล่านี้มีไว้เพื่อช่วยให้คุณเรียกใช้ฟังก์ชันอื่นได้ทันทีโดยกําหนดพารามิเตอร์เฉพาะ
โค้ดนี้จะใช้ฟังก์ชัน Wrapper 3 อย่าง ได้แก่ createPeopleSheetIV(), createPeopleSheetV() และ createPeopleSheetVI() รายการในเมนูจะลิงก์กับฟังก์ชันเหล่านี้ เมื่อคลิกรายการในเมนู ฟังก์ชัน Wrapper จะเรียกใช้และเรียกฟังก์ชันตัวสร้างชีตหลัก createResourceSheet_(resourceType, idNumber, episodeNumber) ทันที ซึ่งจะส่งต่อพารามิเตอร์ที่เหมาะสมสําหรับรายการในเมนู ในกรณีนี้ จะหมายถึงการขอให้ฟังก์ชันตัวสร้างชีตสร้างชีตที่มีข้อมูลตัวละครหลักจากภาพยนตร์เรื่อง Star Wars
createResourceSheet_(resourceType, idNumber, episodeNumber)
นี่คือฟังก์ชันตัวสร้างชีตหลักสําหรับแบบฝึกหัดนี้ ด้วยฟังก์ชันต่างๆ ที่ช่วยเหลือได้ ระบบจะดึงข้อมูล API, แยกวิเคราะห์, สร้างชีต, เขียนข้อมูล API ลงในชีต และจัดรูปแบบชีตโดยใช้ฟังก์ชันที่สร้างไว้ในส่วนก่อนหน้า มาดูรายละเอียดกัน
ก่อนอื่น ฟังก์ชันจะใช้ fetchApiResourceObject_(url) เพื่อส่งคําขอของ API เพื่อดึงข้อมูลภาพยนตร์พื้นฐาน การตอบสนองของ API ประกอบด้วยชุด URL ที่โค้ดใช้เพื่อรับรายละเอียดเพิ่มเติมเกี่ยวกับบุคคลที่เฉพาะเจาะจง (เรียกว่าแหล่งข้อมูล) จากภาพยนตร์ได้ โค้ดจะรวบรวมข้อมูลทั้งหมดในอาร์เรย์ resourceUrls
ถัดไป โค้ดนี้จะใช้ fetchApiResourceObject_(url) ซ้ําเพื่อเรียก API สําหรับ URL ทรัพยากรทุกรายการใน resourceUrls ผลลัพธ์จะจัดเก็บไว้ในอาร์เรย์ resourceDataList องค์ประกอบทุกอย่างของอาร์เรย์นี้คือวัตถุที่อธิบายตัวละครที่แตกต่างจากภาพยนตร์
ออบเจ็กต์ข้อมูลทรัพยากรมีคีย์ทั่วไปหลายรายการที่แมปกับข้อมูลเกี่ยวกับอักขระนั้น เช่น คีย์ "name' แมปกับชื่อของตัวละครในภาพยนตร์ เราถือว่าคีย์สําหรับออบเจ็กต์ข้อมูลทรัพยากรแต่ละรายการเหมือนกันทุกประการ เนื่องจากคีย์เหล่านั้นมีไว้เพื่อใช้โครงสร้างออบเจ็กต์ทั่วไป รายการคีย์นี้จําเป็นต้องใช้ในภายหลัง ดังนั้นโค้ดจะจัดเก็บรายการคีย์ใน resourceObjectKeys โดยใช้เมธอด Object.keys() ของ JavaScript
จากนั้น ฟังก์ชันเครื่องมือสร้างจะเรียกใช้ฟังก์ชันตัวช่วย createNewSheet_(name) เพื่อสร้างชีตที่จะวางข้อมูลใหม่ การเรียกใช้ฟังก์ชันตัวช่วยนี้จะเป็นการเปิดใช้ชีตใหม่ด้วย
หลังจากสร้างชีตแล้ว ระบบจะเรียกใช้ฟังก์ชันตัวช่วย fillSheetWithData_(resourceSheet, objectKeys, resourceDataList) เพื่อเพิ่มข้อมูล API ทั้งหมดไว้ในชีต
และสุดท้าย ฟังก์ชันการจัดรูปแบบทั้งหมดที่คุณสร้างขึ้นก่อนหน้านี้ถูกเรียกใช้เพื่อนํากฎการจัดรูปแบบเดียวกันไปใช้กับข้อมูลใหม่ เนื่องจากชีตใหม่เป็นแผ่นงานที่ใช้งานอยู่ โค้ดดังกล่าวจึงใช้ฟังก์ชันเหล่านี้ซ้ําได้โดยไม่ต้องแก้ไข
fetchApiResourceObject_(url)
ฟังก์ชันตัวช่วยนี้คล้ายกับฟังก์ชันตัวช่วย fetchBookData_(ISBN) ที่ใช้ใน Codelab ก่อนหน้าการทํางานกับข้อมูล โดยต้องใช้ URL ที่ระบุและใช้เมธอด UrlFetchApp.fetch(url, params) เพื่อรับคําตอบ จากนั้นจึงแยกวิเคราะห์การตอบกลับเป็นออบเจ็กต์ JSON โดยใช้เมธอด HTTPResponse.getContextText() และ JavaScript JSON.parse(json) จากนั้นระบบจะแสดงผลออบเจ็กต์ JSON ที่ได้
createNewSheet_(name)
ฟังก์ชันตัวช่วยนี้ค่อนข้างง่าย โดยก่อนอื่นจะตรวจสอบว่าแผ่นงานที่มีชื่อนั้นอยู่ในสเปรดชีตหรือไม่ หากเปิดใช้ ฟังก์ชันจะเปิดใช้งานแผ่นงานและส่งคืน
หากไม่มีแผ่นงาน ฟังก์ชันจะสร้างด้วย Spreadsheet.insertSheet(sheetName) จากนั้นเปิดใช้งานและแสดงผลแผ่นงานใหม่
fillSheetWithData_(resourceSheet, objectKeys, resourceDataList)
ฟังก์ชันช่วยนี้มีหน้าที่กรอกชีตใหม่ด้วยข้อมูล API ซึ่งจะใช้กับพารามิเตอร์ของชีตใหม่ รายการคีย์ออบเจ็กต์ และรายการออบเจ็กต์ของทรัพยากร API เป็นพารามิเตอร์ คีย์ออบเจ็กต์แต่ละรายการจะแสดงคอลัมน์ในชีตใหม่ และออบเจ็กต์ทรัพยากรแต่ละรายการจะเป็นแถว
ฟังก์ชันแรกจะคํานวณจํานวนแถวและคอลัมน์ที่จําเป็นในการแสดงข้อมูล API ใหม่ นี่คือขนาดของรายการทรัพยากรและคีย์ตามลําดับ จากนั้นฟังก์ชันจะกําหนดช่วงเอาต์พุต (resourceRange) ที่จะวางข้อมูล การเพิ่มแถวเพิ่มเติมเพื่อเก็บส่วนหัวของคอลัมน์ ตัวแปร resourceValues มีอาร์เรย์ค่า 2 มิติที่ดึงมาจาก resourceRange
จากนั้นฟังก์ชันจะวนซ้ําทุกคีย์ออบเจ็กต์ในรายการ objectKeys คีย์ตั้งค่าไว้เป็นส่วนหัวของคอลัมน์ แล้ววนซ้ําครั้งที่ 2 จะเป็นการผ่านออบเจ็กต์ทรัพยากรทั้งหมด สําหรับคู่ (แถว คอลัมน์) แต่ละคู่ ระบบจะคัดลอกข้อมูล API ที่เกี่ยวข้องไปยังองค์ประกอบ resourceValues[row][column]
หลังจากกรอกข้อมูลใน resourceValues แล้ว ระบบจะล้างชีตปลายทางโดยใช้ Sheet.clear() ในกรณีที่มีข้อมูลจากการคลิกรายการในเมนูก่อนหน้า ขั้นตอนสุดท้ายคือการเขียนค่าใหม่ลงในชีต
ผลลัพธ์
คุณดูผลลัพธ์ของงานได้โดยทําตามขั้นตอนต่อไปนี้
- บันทึกโปรเจ็กต์สคริปต์ในเครื่องมือแก้ไข Apps Script หากยังไม่ได้ทํา
- คลิกรายการรูปแบบด่วน > สร้างแผ่นอักขระ > ตอนที่ 4
ผลลัพธ์ควรมีลักษณะเช่นนี้
คุณได้เขียนโค้ดเพื่อนําเข้าข้อมูลไปยังชีตและจัดรูปแบบโดยอัตโนมัติแล้ว
8. บทสรุป
ยินดีด้วยกับ Codelab นี้เสร็จสมบูรณ์แล้ว คุณได้เห็นตัวเลือกการจัดรูปแบบของชีตบางรายการที่สามารถรวมไว้ในโครงการ Apps Script และสร้างแอปพลิเคชันที่น่าประทับใจซึ่งนําเข้าและจัดรูปแบบชุดข้อมูล API ขนาดใหญ่
คุณคิดว่า Codelab นี้มีประโยชน์ไหม
สิ่งที่คุณได้เรียนรู้
- วิธีนําการจัดรูปแบบต่างๆ ของชีตไปใช้ด้วย Apps Script
- วิธีสร้างเมนูย่อยด้วยฟังก์ชัน
onOpen() - วิธีจัดรูปแบบรายการออบเจ็กต์ JSON ที่ดึงมาให้เป็นชีตข้อมูลใหม่ด้วย Apps Script
ขั้นต่อไปคืออะไร
Codelab ถัดไปในเพลย์ลิสต์นี้จะแสดงวิธีใช้ Apps Script เพื่อแสดงภาพข้อมูลในแผนภูมิและส่งออกแผนภูมิไปยังงานนําเสนอใน Google สไลด์
ค้นหา Codelab ถัดไปที่แผนภูมิและนําเสนอข้อมูลในสไลด์