iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
IT管理

「Google Apps Script」 學習筆記系列 第 29

【Day 29】Google Apps Script - 延伸篇 - Google sites 協作平台與 Charts Service 圖表繪製服務

Google sites 協作平台可以用在小組專案管理,使用 Google Apps Script 運用 Charts Service 來製作圖表,嵌入到協作平台,豐富平台的數據展示。


今日要點:
》Google sites 協作平台介紹
》Charts Service 介紹
》使用 Charts Service 製作面積圖
》部署網頁應用程式
》協作平台嵌入網頁內容
》發佈協作平台


Google sites 協作平台介紹

Google sites 協作平台能夠讓你很快速的建立一個團隊為導向的網站,而且幾乎雲端硬碟的檔案都很容易的可以放到協會平台上去。今天我們示範一下使用 Google Apps Script 運用 Charts Service 來製作一個圖表,並且在協作平台上嵌入這張圖表來豐富平台的數據展示。點這裡可以看到最後的呈現效果,可以先賭為快。

協作平台可以在雲端硬碟上新增,如下圖所示:

Charts Service 介紹

Charts Service 允許我們在 Google Apps Script 使用 Google Charts API 創建圖表並在 Web 瀏覽器中呈現圖表。我們試著創建一個基本數據表,使用數據畫出面積圖,並將圖像加到html的img標籤後,內嵌到協作平台網頁中:

使用 Charts Service 製作面積圖

我們先使用手冊上 Charts Service 示範的程式碼來改寫一下,快速的產生一張面積圖來使用。

部署網頁應用程式

寫好後,我們新增部署,選擇網頁應用程式,發佈後就可以讓外部呼叫到。細節可以參考【Day 9】部署網頁應用程式與觸發doGet(e)測試

協作平台嵌入網頁內容

我們先簡單設計一下協作平台的內容,新增一個【Day 29】頁面,在這個頁面點選右側插入元素面版的內嵌

貼上剛剛 Google Apps Script 發佈的網址

調整一下面積圖的大小與位置

發佈協作平台

再來就可以把協作平台發佈出去囉,點選右上的發佈,輸入在網址 https://sites.google.com/view/ 後的網站名稱 jason-2021-ironman。

下圖是發佈後的樣子,點這裡可以看到實際協作平台的網頁。

以上就是使用 Google Apps Script 運用 Charts Service 來製作面積圖,嵌入到 Google 協作平台,豐富協作平台的數據展示介紹囉。
/images/emoticon/emoticon76.gif

參考


上一篇
【Day 28】Google Apps Script - API Blueprint 篇 - Apiary 測試 API 介紹
下一篇
【Day 30】Google Apps Script - 延伸篇 -系列回顧與學習資源整理
系列文
「Google Apps Script」 學習筆記30

尚未有邦友留言

立即登入留言