嵌入图表
嵌入公共通道的图表
使用图表 API 作为 iframe
的源,将公共 ThingSpeak™通道图表嵌入到您的网页上。
公共图表嵌入代码
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
CHANNEL_ID
替换为通道的 ID,将 FIELD_ID
替换为要绘制图表的字段的 ID。您还可以通过调整 iframe
中的 height
和 width
参数来调整图表的高度和宽度。例如,要拥有大小为 800 x 400 像素的图表,iframe
应为 <iframe width="800" height="400" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
。图表示例
嵌入私有通道的图表
要在网页上嵌入私有通道的图表,请使用图表 API 作为 iframe
的源,并添加图表参数 api_key=XXXXXXXXXXXXX
,替换 XXXXXXXXXXXXX
为通道的读取 API 密钥。如果想让图表动态化,还可以添加图表参数dynamic=true
。
私有图表嵌入代码
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?api_key=XXXXXXXXXXXXX"></iframe>
CHANNEL_ID
替换为通道的 ID,将 FIELD_ID
替换为要绘制图表的字段的 ID,将 XXXXXXXXXXXXX
替换为读取私有通道的API密钥。嵌入动态图表
要在网页上放置动态 ThingSpeak 图表,请使用图表 API 作为 iframe
的源并添加图表参数 dynamic=true
。
动态图表嵌入代码
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID?dynamic=true"></iframe>
CHANNEL_ID
替换为通道的 ID,将 FIELD_ID
替换为要绘制图表的字段的 ID。