星期六, 10月 25, 2025

[GAS] Google Chart

在 Goolge App Script 內使用 [Google Chart 工具] 來產生圖表，以官方文章 - Chart Service 來練習，該範例是把圖表顯示在網頁上，另外自行加上把圖表嵌在 Email 內寄出

.gs Code 

產生圖表細節就直接寫在 Code 內的備註，基本上就是分兩個步驟
  • 第一步驟：該範例是直接寫死資料，實務上可能是從 Google Sheets 內取得
  • 第二步驟：把資料塞進 chart 去並進行 chart 相關顯示細節設定
function doGet() {

  let areaChart = GetAreaChart();
  let areaChartImage = areaChart.getAs('image/png'); // 回傳 Blob
  let imageData = Utilities.base64Encode(areaChartImage.getBytes());
  let imageUrl = "data:image/png;base64," + encodeURI(imageData);

  let htmlOutput = HtmlService.createHtmlOutput().setTitle('Hello Goolge Chart'); // 網頁 Tab 名稱
  htmlOutput.append("在伺服器端產生圖表 (Render chart server side)： <br/>");
  htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
  return htmlOutput;
}

function SendEmailWithChart() {

  let areaChart = GetAreaChart();
  let areaChartImage = areaChart.getAs('image/png');
  let subject = `Google Chart 測試 - ${new Date().toLocaleDateString('zh-TW')}`;
  let htmlBody = `
    <html><body>
      <p><img src="cid:chart" style="width:100%; max-width:600px;"></p>
    </body></html>
  `;

  MailApp.sendEmail({
    to: 收件人信箱,
    subject: subject,
    htmlBody: htmlBody,
    inlineImages: {
      chart: areaChartImage
    }
  });
}

function GetAreaChart() {

  let data = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, '月份')
    .addColumn(Charts.ColumnType.NUMBER, '實體販售')
    .addColumn(Charts.ColumnType.NUMBER, '線上商城')
    .addRow(['一月', 10, 1])
    .addRow(['二月', 12, 1])
    .addRow(['三月', 20, 2])
    .addRow(['四月', 25, 3])
    .addRow(['五月', 30, 4])
    .build();

  let chart = Charts.newAreaChart()
    .setDataTable(data)
    .setStacked()           // 堆疊線條 (stacked lines)：資料累加 (實體販售 + 線上商城)
    .setRange(0, 40)        // 設定圖表 Y 軸 數值，範圍從 0 到 40
    .setTitle('每月銷售量')  // 設定圖表標題
    .build();

  return chart;
}
網頁顯示
Email 顯示
張貼者： TerryTsai 標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)