嵌入 Google 试算表图表
在 Google 试算表 ( Google SpreadSheet ) 里可以借由各种数据绘制图表，这篇教学会介绍如何透过 HTML 的实作，将 Google 试算表里所绘制的图表，加到网页中并透过网网页显示图表。
将 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 图表嵌入网址参数与属性
嵌入 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>
微信扫码关注
抖音扫码关注