พื้นฐานของ Apps Script กับ Google ชีต #5: สร้างแผนภูมิและนำเสนอข้อมูลในสไลด์

พื้นฐานของ Apps Script กับ Google ชีต #5:
สร้างแผนภูมิและนำเสนอข้อมูลในสไลด์

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ ก.ย. 18, 2024
account_circleเขียนโดย Google Workspace Developer Relations

1 บทนำ

ยินดีต้อนรับสู่ส่วนที่ 5 ของเพลย์ลิสต์ Codelab พื้นฐานของ Apps Script กับ Google ชีต Codelab นี้จะสอนวิธีใช้บริการสเปรดชีตใน Apps Script เพื่อสร้างแผนภูมิชุดข้อมูล นอกจากนี้ คุณยังจะได้ทราบวิธีใช้บริการสไลด์เพื่อส่งออกแผนภูมิไปยังงานนำเสนอใหม่ใน Google สไลด์ด้วย

สิ่งที่คุณจะได้เรียนรู้

  • วิธีสร้างแผนภูมิเส้นด้วย Apps Script
  • วิธีส่งออกแผนภูมิไปยังงานนำเสนอของสไลด์ใหม่
  • วิธีนำเสนอกล่องโต้ตอบต่อผู้ใช้ในชีต

ก่อนเริ่มต้น

นี่คือโค้ดแล็บที่ 5 ในเพลย์ลิสต์พื้นฐานของ Apps Script กับ Google ชีต ก่อนเริ่ม Codelab นี้ โปรดทำ Codelab ก่อนหน้าให้เสร็จก่อน

  1. มาโครและฟังก์ชันที่กำหนดเอง
  2. สเปรดชีต ชีต และช่วง
  3. การทำงานกับข้อมูล
  4. การจัดรูปแบบข้อมูล

สิ่งที่คุณต้องมี

  • ความเข้าใจในหัวข้อพื้นฐานของ Apps Script ที่ได้เรียนรู้ใน Codelab ก่อนหน้าของเพลย์ลิสต์นี้
  • คุ้นเคยกับเครื่องมือแก้ไข Apps Script ในระดับพื้นฐาน
  • คุ้นเคยกับ Google ชีต ในระดับพื้นฐาน
  • ความสามารถในการอ่านรูปแบบ A1 ของชีต
  • มีความคุ้นเคยกับ JavaScript และคลาส String ในระดับพื้นฐาน

2 ตั้งค่า

ก่อนดำเนินการต่อ คุณต้องมีสเปรดชีตที่มีข้อมูลบางอย่าง เราได้จัดเตรียมชีตข้อมูลที่คุณสามารถคัดลอกเพื่อใช้ในการฝึกหัดเหล่านี้ไว้ให้แล้วเช่นเคย โปรดทำตามขั้นตอนต่อไปนี้

  1. คลิกลิงก์นี้เพื่อคัดลอกชีตข้อมูล แล้วคลิกทำสำเนา ระบบจะวางสเปรดชีตใหม่ไว้ในโฟลเดอร์ Google ไดรฟ์และตั้งชื่อว่า "สำเนาของวันที่และอัตราแลกเปลี่ยน USD"
  2. คลิกชื่อสเปรดชีตแล้วเปลี่ยนจาก "สำเนาของวันที่และอัตราแลกเปลี่ยน USD" เป็น "วันที่และอัตราแลกเปลี่ยน USD" ชีตควรมีลักษณะดังนี้ โดยมีข้อมูลพื้นฐานบางอย่างเกี่ยวกับอัตราแลกเปลี่ยนเงินดอลลาร์สหรัฐฯ ที่แตกต่างกันในวันที่ต่างๆ

45a3e8814ecb07fc.png

  1. หากต้องการเปิดโปรแกรมแก้ไขสคริปต์ ให้คลิกส่วนขยาย> Apps Script

เราได้ใส่โค้ดเล็กๆ น้อยๆ เพื่อตั้งค่าเมนูที่กำหนดเองในสเปรดชีตนี้ไว้ให้แล้วเพื่อช่วยคุณประหยัดเวลา คุณอาจเห็นเมนูปรากฏขึ้นเมื่อเปิดสำเนาสเปรดชีต

9b9caf6c1e9de34b.png

เมื่อมีสเปรดชีตและโปรเจ็กต์นี้แล้ว คุณก็พร้อมที่จะเริ่ม Codelab ได้ ไปที่ส่วนถัดไปเพื่อเริ่มเรียนรู้เกี่ยวกับกราฟและทริกเกอร์ที่อิงตามเวลา

3 สร้างแผนภูมิในชีตด้วย Apps Script

สมมติว่าคุณต้องการออกแบบแผนภูมิที่เฉพาะเจาะจงเพื่อแสดงภาพชุดข้อมูล คุณใช้ Apps Script เพื่อสร้าง แก้ไข และแทรกแผนภูมิลงใน Google ชีตได้ เมื่อแผนภูมิอยู่ในสเปรดชีต เราจะเรียกว่าแผนภูมิที่ฝัง

ใช้แผนภูมิเพื่อแสดงภาพชุดข้อมูลอย่างน้อย 1 ชุด สำหรับแผนภูมิที่ฝัง ข้อมูลที่แสดงมักจะมาจากภายในสเปรดชีต โดยปกติแล้ว การอัปเดตข้อมูลในสเปรดชีตจะทำให้ชีตอัปเดตแผนภูมิโดยอัตโนมัติด้วย

คุณสามารถใช้ Apps Script เพื่อสร้างแผนภูมิที่ฝังแบบกำหนดเองตั้งแต่ต้น หรือเพื่ออัปเดตแผนภูมิที่มีอยู่ ส่วนนี้จะแนะนำพื้นฐานของการสร้างแผนภูมิที่ฝังในชีตด้วย Apps Script และบริการ Spreadsheet

การใช้งาน

ในสำเนาสเปรดชีตข้อมูล ชุดข้อมูล "วันที่และอัตราแลกเปลี่ยน" จะแสดงอัตราแลกเปลี่ยน (สำหรับ 1 ดอลลาร์สหรัฐ) ของสกุลเงินต่างๆ ในวันที่ต่างๆ คุณจะใช้ฟังก์ชัน Apps Script ที่สร้างแผนภูมิเพื่อแสดงข้อมูลบางส่วนนี้เป็นภาพ

โปรดทำตามขั้นตอนต่อไปนี้

  1. ในตัวแก้ไข Apps Script ให้เพิ่มฟังก์ชันต่อไปนี้ที่ส่วนท้ายของCode.gsสคริปต์ของโปรเจ็กต์สคริปต์ หลังจากฟังก์ชัน onOpen()
/**
 * 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);  
}
  1. บันทึกโปรเจ็กต์สคริปต์

การตรวจสอบโค้ด

โค้ดที่คุณเพิ่มจะใช้ฟังก์ชันที่เรียกใช้โดยรายการเมนูแผนภูมิ "ชุดข้อมูลวันที่และอัตราแลกเปลี่ยน USD" เพื่อสร้างแผนภูมิเส้นพื้นฐาน มาดูโค้ดกัน

บรรทัดแรกจะตั้งค่าตัวแปร 3 รายการต่อไปนี้

  • sheet: การอ้างอิงชีตที่ใช้งานอยู่ในปัจจุบัน
  • chartDataRange: ช่วงข้อมูลที่เราต้องการแสดงภาพ โค้ดใช้รูปแบบ A1 เพื่อระบุช่วงที่ครอบคลุมเซลล์ A2 ถึง F102 ในชีตชื่อชุดข้อมูลวันที่และอัตราแลกเปลี่ยน USD การตั้งชื่อชีตอย่างเจาะจงจะช่วยให้มั่นใจได้ว่ารายการเมนูจะทำงานได้แม้ว่าชีตอื่นจะใช้งานอยู่ เนื่องจากช่วงจะครอบคลุมตำแหน่งข้อมูลเสมอ การเริ่มต้นที่แถว 2 หมายความว่าเราจะรวมส่วนหัวของคอลัมน์ และจะสร้างแผนภูมิเฉพาะวันที่ (แถว) 100 รายการล่าสุดเท่านั้น
  • hAxisOptions: ออบเจ็กต์ JavaScript พื้นฐานที่มีข้อมูลการตั้งค่าบางอย่างที่โค้ดใช้เพื่อกำหนดค่าลักษณะที่ปรากฏของแกนนอน โดยจะตั้งป้ายกำกับข้อความแกนนอนให้เอียง 60 องศา และตั้งจำนวนเส้นตารางแนวตั้งเป็น 12

บรรทัดถัดไปจะสร้างออบเจ็กต์เครื่องมือสร้างแผนภูมิเส้น แผนภูมิที่ฝังใน Apps Script สร้างขึ้นโดยใช้รูปแบบการออกแบบ Builder คำอธิบายแบบเต็มของรูปแบบการออกแบบนี้อยู่นอกขอบเขตของโค้ดแล็บนี้ ดังนั้นตอนนี้เพียงแค่ทำความเข้าใจว่าบริการ Spreadsheet มีคลาส EmbeddedChartBuilder หลายคลาส หากต้องการสร้างแผนภูมิ โค้ดของคุณจะสร้างออบเจ็กต์เครื่องมือสร้างแผนภูมิที่ฝังก่อน จากนั้นใช้วิธีการของออบเจ็กต์เพื่อกำหนดการตั้งค่าแผนภูมิ แล้วเรียกใช้เมธอด build() เพื่อสร้างออบเจ็กต์ EmbeddedChart สุดท้าย โค้ดของคุณจะไม่แก้ไขออบเจ็กต์ EmbeddedChart โดยตรงเนื่องจากมีการจัดการการกำหนดค่าแผนภูมิทั้งหมดผ่านคลาส Builder

บริการสเปรดชีตมีคลาสหลัก EmbeddedChartBuilder และคลาสเครื่องมือสร้างย่อยหลายคลาส (เช่น EmbeddedLineChartBuilder) ที่รับค่ามาจากคลาสหลัก คลาสย่อยช่วยให้ Apps Script มีวิธีการกำหนดค่าแผนภูมิสำหรับเครื่องมือสร้างซึ่งใช้ได้กับแผนภูมิบางประเภทเท่านั้น เช่น คลาส EmbeddedPieChartBuilder มีเมธอด set3D() ที่ใช้ได้กับแผนภูมิวงกลมเท่านั้น

ในโค้ด บรรทัดนี้จะสร้างตัวแปรออบเจ็กต์ Builder lineChartBuilder

var lineChartBuilder = sheet.newChart().asLineChart();

โค้ดจะเรียกใช้เมธอด Sheet.newChart() เพื่อสร้างออบเจ็กต์ EmbeddedChartBuilder จากนั้นใช้ EmbeddedChartBuilder.asLineChart() เพื่อตั้งค่าประเภทบิลเดอร์เป็น EmbeddedLineChartBuilder

จากนั้นโค้ดจะสร้างแผนภูมิโดยใช้ lineChartBuilder ส่วนนี้ของโค้ดเป็นเพียงชุดการเรียกเมธอดเพื่อกำหนดการตั้งค่าแผนภูมิ ตามด้วยการเรียก build() เพื่อสร้างแผนภูมิ ดังที่คุณได้เห็นใน Codelab ก่อนหน้านี้ โค้ดใช้การเชื่อมโยงเมธอดเพื่อให้โค้ดอ่านง่าย วิธีการเรียกใช้เมธอดมีดังนี้

  • addRange(range): กำหนดช่วงข้อมูลที่แผนภูมิแสดง
  • setPosition(anchorRowPos, anchorColPos, offsetX, offsetY): กำหนดตำแหน่งของแผนภูมิในชีต ในที่นี้ โค้ดจะแทรกมุมซ้ายบนของแผนภูมิในเซลล์ H5
  • setTitle(title): ตั้งค่าชื่อแผนภูมิ
  • setNumHeaders(headers): กำหนดจำนวนแถวหรือคอลัมน์ในช่วงข้อมูลที่ควรได้รับการพิจารณาเป็นส่วนหัว ในที่นี้ โค้ดจะใช้แถวแรกในช่วงข้อมูลเป็นส่วนหัว ซึ่งหมายความว่าข้อความในแถวนั้นจะใช้เป็นป้ายกำกับสำหรับชุดข้อมูลแต่ละชุดในแผนภูมิ
  • setLegendPosition(position): ย้ายคำอธิบายแผนภูมิไปทางด้านขวาของแผนภูมิ เมธอดนี้ใช้การแจงนับ Charts.Position เป็นพารามิเตอร์
  • setOption(option, value): ตั้งค่าตัวเลือกแผนภูมิที่ซับซ้อน ในที่นี้ โค้ดจะตั้งค่าตัวเลือก hAxis เป็นออบเจ็กต์ hAxisOptions คุณตั้งค่าตัวเลือกได้หลายอย่างโดยใช้วิธีนี้ ตัวเลือกและค่าที่เป็นไปได้สำหรับแผนภูมิแต่ละประเภทจะระบุไว้ในแกลเลอรีแผนภูมิของ Charts API เช่น ตัวเลือกที่คุณตั้งค่าสำหรับแผนภูมิเส้นได้จะอยู่ในส่วนตัวเลือกการกำหนดค่าแผนภูมิเส้น เมธอด setOption(option, value) เป็นหัวข้อขั้นสูง คุณจึงอาจหลีกเลี่ยงการใช้เมธอดนี้จนกว่าจะคุ้นเคยกับการสร้างแผนภูมิใน Apps Script มากขึ้น
  • build(): สร้างและแสดงผลออบเจ็กต์ EmbeddedChart โดยใช้การตั้งค่าข้างต้น

สุดท้าย โค้ดจะเรียกใช้ Sheet.insertChart(chart) เพื่อวางแผนภูมิที่สร้างขึ้นในชีตที่ใช้งานอยู่

ผลลัพธ์

คุณดูฟังก์ชันการจัดรูปแบบได้โดยทำดังนี้

  1. หากยังไม่ได้บันทึกโปรเจ็กต์สคริปต์ ให้บันทึกในเครื่องมือแก้ไข Apps Script
  2. คลิกรายการเมนูนำเสนอชุดข้อมูล > แผนภูมิ "ชุดข้อมูลวันที่และอัตราแลกเปลี่ยน USD"

ตอนนี้สคริปต์จะวางแผนภูมิใหม่ทางด้านขวาของข้อมูล

bbf856699b6d2b45.gif

ยินดีด้วย คุณสร้างแผนภูมิเส้นแบบฝังด้วย Apps Script ได้แล้ว ส่วนถัดไปจะสอนวิธีส่งออกแผนภูมิไปยัง Google สไลด์

4 ส่งออกแผนภูมิไปยังสไลด์

ข้อดีอย่างหนึ่งของ Apps Script คือช่วยให้คุณย้ายข้อมูลจากแอปพลิเคชันหนึ่งใน Google Workspace ไปยังอีกแอปพลิเคชันหนึ่งได้อย่างง่ายดาย แอปพลิเคชันส่วนใหญ่เหล่านี้มีบริการ Apps Script โดยเฉพาะ ซึ่งคล้ายกับบริการชีต เช่น Gmail มีบริการ Gmail, Google เอกสารมีบริการเอกสาร และ Google สไลด์มีบริการสไลด์ บริการในตัวทั้งหมดนี้ช่วยให้คุณสามารถดึงข้อมูลจากแอปพลิเคชันหนึ่ง ประมวลผล และเขียนผลลัพธ์ไปยังอีกแอปพลิเคชันหนึ่งได้

ในส่วนนี้ คุณจะได้เรียนรู้วิธีส่งออกแผนภูมิที่ฝังทั้งหมดในสเปรดชีตของ Google ไปยังงานนำเสนอ Google สไลด์ใหม่ นอกจากนี้ คุณยังเห็น 2 วิธีในการแสดงข้อความที่กำหนดเองของผู้ใช้ในชีตด้วย

การใช้งาน

ในส่วนนี้ คุณจะใช้ฟังก์ชันที่เรียกใช้โดยรายการเมนูนำเสนอชุดข้อมูล > ส่งออกแผนภูมิไปยังสไลด์ โปรดทำตามขั้นตอนต่อไปนี้

  1. ในตัวแก้ไข Apps Script ให้เพิ่มฟังก์ชันต่อไปนี้ที่ส่วนท้ายของCode.gsสคริปต์ของโปรเจ็กต์สคริปต์ หลังจากฟังก์ชัน createEmbeddedLineChart()
/**
 * 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!"
  );
}
  1. บันทึกโปรเจ็กต์สคริปต์

การตรวจสอบโค้ด

โค้ดนี้อาจสั้นกว่าที่คุณคาดไว้ มาดูกันว่าโค้ดนี้ทำอะไรบ้างโดยแบ่งโค้ดออกเป็น 5 ส่วน

1: ดูชาร์ต

บรรทัดแรกๆ จะค้นหาสเปรดชีตที่ใช้งานอยู่เพื่อค้นหาแผนภูมิที่ฝังทั้งหมด แล้วรวบรวมไว้ในอาร์เรย์ charts บรรทัดเหล่านี้ใช้วิธี Spreadsheet.getSheets() และวิธี Sheet.getCharts() เพื่อรับรายการชีตและแผนภูมิ ระบบจะใช้เมธอด JavaScript Array.concat() เพื่อต่อท้ายรายการแผนภูมิจากแต่ละชีตลงใน charts

2: ตรวจสอบว่ามีแผนภูมิที่จะส่งออก

โค้ดจะตรวจสอบว่ามีแผนภูมิที่จะส่งออกหรือไม่ เราไม่ต้องการสร้างงานนำเสนอเปล่า ดังนั้นหากไม่มีแผนภูมิ โค้ดจะสร้างข้อความป๊อปอัปแทนโดยใช้ Spreadsheet.toast(message) นี่คือกล่องโต้ตอบ "ดู" ขนาดเล็กที่จะปรากฏขึ้นที่มุมขวาล่างของชีต ค้างไว้ 2-3 วินาที แล้วหายไป

db7e87dcb8010bef.gif

หากไม่มีแผนภูมิที่จะส่งออก โค้ดจะสร้างข้อความแจ้งและออกโดยไม่ทำอย่างอื่น หากมีแผนภูมิที่จะส่งออก โค้ดจะสร้างงานนำเสนอต่อไปในอีก 2-3 บรรทัด

3: สร้างงานนำเสนอ

ระบบจะสร้างตัวแปร presentationTitle เพื่อเก็บชื่อไฟล์ของงานนำเสนอใหม่ ระบบจะตั้งชื่อเป็นชื่อสเปรดชีต โดยต่อท้ายด้วย " Presentation" จากนั้นโค้ดจะเรียกใช้เมธอดบริการของสไลด์ SlidesApp.create(name) เพื่อสร้างงานนำเสนอ

ระบบจะสร้างงานนำเสนอใหม่โดยมีสไลด์เปล่าเพียงสไลด์เดียว เราไม่ต้องการให้มีข้อความนี้ในงานนำเสนอ โค้ดจึงนำข้อความออกด้วย Presentation.getSlides() และ Slide.remove()

4: ส่งออกแผนภูมิ

ในส่วนถัดไป โค้ดจะกำหนด position และ size ของออบเจ็กต์ JavaScript เพื่อกำหนดตำแหน่งที่จะวางแผนภูมิที่นำเข้าในสไลด์ และขนาดของแผนภูมิ (เป็นพิกเซล)

โค้ดจะวนซ้ำในแผนภูมิทุกรายการในรายการแผนภูมิ สำหรับแผนภูมิแต่ละรายการ ระบบจะสร้าง newSlide ด้วย Presentation.appendSlide() โดยเพิ่มสไลด์ไว้ที่ท้ายงานนำเสนอ ระบบจะใช้วิธี Slide.insertSheetsChart(sourceChart, left, top, width, height) เพื่อนำเข้าแผนภูมิไปยังสไลด์ที่มี position และ size ที่ระบุ

5: แชร์ตำแหน่งของงานนำเสนอ

สุดท้ายนี้ โค้ดต้องแจ้งให้ผู้ใช้ทราบว่างานนำเสนอใหม่อยู่ที่ใด โดยควรมีลิงก์ที่ผู้ใช้คลิกเพื่อเปิดได้ โดยโค้ดจะใช้HTML service ของ Apps Script เพื่อสร้างกล่องโต้ตอบโมดัลที่กำหนดเอง กล่องโต้ตอบโมดัล (หรือที่เรียกว่ากล่องโต้ตอบที่กำหนดเองใน Apps Script) คือหน้าต่างที่ปรากฏเหนืออินเทอร์เฟซชีต เมื่อแสดง กล่องโต้ตอบที่กำหนดเองจะป้องกันไม่ให้ผู้ใช้โต้ตอบกับชีต

หากต้องการสร้างกล่องโต้ตอบที่กำหนดเอง โค้ดต้องมี HTML ที่กำหนดเนื้อหาของกล่องโต้ตอบ โดยจะระบุไว้ในตัวแปร html เนื้อหาประกอบด้วยย่อหน้าสั้นๆ และไฮเปอร์ลิงก์ ไฮเปอร์ลิงก์คือตัวแปร presentationTitle ซึ่งลิงก์กับ URL ของงานนำเสนอที่ Presentation.getUrl() ระบุ ไฮเปอร์ลิงก์ยังใช้แอตทริบิวต์ target="_blank" เพื่อให้ระบบเปิดงานนำเสนอในแท็บเบราว์เซอร์ใหม่แทนที่จะเปิดในกล่องโต้ตอบ

ระบบจะแยกวิเคราะห์ HTML เป็นออบเจ็กต์ HtmlOutput โดยใช้เมธอด HtmlService.createHtmlOutput(html) ออบเจ็กต์ HtmlOutput ช่วยให้โค้ดตั้งค่าขนาดของกล่องโต้ตอบที่กำหนดเองด้วย HtmlOutput.setHeight(height) และ HtmlOutput.setWidth(width)

เมื่อสร้าง htmlOutput แล้ว โค้ดจะใช้วิธี Ui.showModalDialog(htmlOutput, title) เพื่อแสดงกล่องโต้ตอบที่มีชื่อที่ระบุ

ผลลัพธ์

ตอนนี้คุณได้ใช้รายการเมนูที่ 2 แล้ว และจะเห็นการทำงานของรายการเมนูนี้ วิธีทดสอบฟังก์ชัน exportChartsToSlides()

  1. หากยังไม่ได้บันทึกโปรเจ็กต์สคริปต์ ให้บันทึกในเครื่องมือแก้ไข Apps Script
  2. เปิดสเปรดชีตแล้วคลิกรายการเมนูนำเสนอชุดข้อมูล > แผนภูมิ "ชุดข้อมูลวันที่และอัตราแลกเปลี่ยน USD" เพื่อสร้างแผนภูมิที่จะส่งออก โดยจะปรากฏที่เซลล์ H5 ในชีตที่ใช้งานอยู่
  3. คลิกรายการเมนูนำเสนอชุดข้อมูล > ส่งออกแผนภูมิไปยังสไลด์ ระบบอาจขอให้คุณให้สิทธิ์สคริปต์อีกครั้ง
  4. คุณควรเห็นสคริปต์ประมวลผลคำขอและแสดงกล่องโต้ตอบที่กำหนดเอง
  5. หากต้องการเปิดงานนำเสนอสไลด์ใหม่ ให้คลิกลิงก์งานนำเสนอวันที่และอัตราแลกเปลี่ยน USD

51326ceaeb3e49b2.gif

นอกจากนี้ คุณยังเพิ่มแผนภูมิอื่นๆ ลงในสเปรดชีตและเลือกรายการเมนูอีกครั้งเพื่อสร้างงานนำเสนอที่มีหลายสไลด์ได้ด้วย

ตอนนี้คุณสามารถส่งออกแผนภูมิที่สร้างในชีตไปยังงานนำเสนอในสไลด์ได้แล้ว นอกจากนี้ คุณยังเขียนโค้ดเพื่อสร้างกล่องโต้ตอบที่กำหนดเองได้ด้วย

คุณทำแบบฝึกหัดสุดท้ายของ Codelab นี้เสร็จแล้ว ไปที่ส่วนถัดไปเพื่อทบทวนสิ่งที่ได้เรียนรู้

5 บทสรุป

ขอแสดงความยินดี ตอนนี้คุณได้ทำ Codelab นี้และเพลย์ลิสต์ Codelab พื้นฐานทั้งหมดของ Apps Script กับ Google ชีตเสร็จสมบูรณ์แล้ว คุณสามารถใช้หลักการที่สอนในเพลย์ลิสต์นี้เพื่อขยายประสบการณ์การใช้งานชีตและสำรวจความสามารถของ Apps Script

คุณคิดว่า Codelab นี้มีประโยชน์ไหม

สิ่งที่คุณได้เรียนรู้

  • วิธีสร้างแผนภูมิเส้นที่ฝังด้วย Apps Script
  • วิธีแสดงข้อความ Toast และกล่องโต้ตอบที่กำหนดเองต่อผู้ใช้ในชีต
  • วิธีส่งออกแผนภูมิไปยังงานนำเสนอใหม่ในสไลด์

ขั้นตอนถัดไป

คุณดูเพลย์ลิสต์นี้จนจบแล้ว อย่างไรก็ตาม ยังมีอีกหลายเรื่องที่คุณควรทราบเกี่ยวกับ Apps Script

โปรดดูแหล่งข้อมูลต่อไปนี้

ขอให้สนุกกับการเขียนสคริปต์

คุณคิดว่าเพลย์ลิสต์ Codelab นี้มีประโยชน์ไหม

คุณต้องการดู Codelab ของ Apps Script เพิ่มเติมในอนาคตไหม
bug_report รายงานความผิดพลาด