在 Google 試算表 ( Google SpreadSheet ) 裡可以藉由各種數據繪製圖表，這篇教學會介紹如何透過 HTML 的實作，將 Google 試算表裡所繪製的圖表，加到網頁中並透過網網頁顯示圖表。
原文參考：網頁中嵌入 Google 試算表圖表
在 Google 試算表裡建立了圖表之後，點擊圖表右上方的「...」，進入選單「檔案 > 共用」，點擊「發布到網路」。
選擇對話視窗裡的「內嵌」頁籤，點擊「發布」。
出現可以嵌入在網頁的程式碼後，表示發布完成。
複製 Google 圖表發布的程式碼，貼到網頁中的 <body> 裡，執行後就會看見 Google 圖表出現在網頁中。
<iframe width="400" height="250" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQYNmM84kGT9jsa2dsZvrNCZCEWZVf6bUStil_SA3PauSGZY3wLrzUtsXVmr4ZKwcnEQ1s_2J-sw7dq/pubchart?oid=639239859&format=interactive"></iframe>
嵌入 Google 圖表之後，可以透過網址參數和 iframe 的屬性設定 Google 圖表，常用的設定參考：
iframe 屬性
| 屬性 | 說明 |
|---|---|
| width | 寬度 ( 可使用 CSS 取代 )。 |
| height | 高度 ( 可使用 CSS 取代 )。 |
| src | Google 圖表網址。 |
| frameborder | iframe 邊框 ( 可使用 CSS 調整 )。 |
| scrolling | 是否可以捲動，預設 no，設定 yes 會出現捲軸。 |
網址參數
| 參數 | 說明 |
|---|---|
| format | 設定 interactive 為互動式 ( 使用者可用滑鼠看訊息 )，image 是靜態圖片。 |
下方的 HTML 會用兩組不同網址參數和屬性的程式碼，載入同樣的一份 Google 試算表圖表，最後呈現的結果就會不同。
<iframe width="400" height="250" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQYNmM84kGT9jsa2dsZvrNCZCEWZVf6bUStil_SA3PauSGZY3wLrzUtsXVmr4ZKwcnEQ1s_2J-sw7dq/pubchart?oid=639239859&format=interactive"></iframe>
<iframe width="400" height="250" seamless frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQYNmM84kGT9jsa2dsZvrNCZCEWZVf6bUStil_SA3PauSGZY3wLrzUtsXVmr4ZKwcnEQ1s_2J-sw7dq/pubchart?oid=639239859&format=image"></iframe>
大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^
iThome鐵人賽
看影片追技術