Main Content

本页采用了机器翻译。点击此处可查看英文原文。

嵌入图表

嵌入公共通道的图表

使用图表 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 中的 heightwidth 参数来调整图表的高度和宽度。例如,要拥有大小为 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。

相关主题