在网页上嵌入您的 ThingSpeak 绘图
您可以嵌入 ThingSpeak™ 图形并在您自己的网站或博客上显示最新数据。您可以使用 ThingSpeak 显示来:
在您自己的网页上提供测量值的实时更新。
创建仪表板以在同一页面上显示多个字段或通道。
制作一个嵌入 ThingSpeak 绘图的移动 App 。
在网页中嵌入绘图
收集<内嵌框架>标记您感兴趣的绘图中的信息。在绘图的标题栏上,点击“气泡”一词。
复制窗口中显示的文本。文本的格式如下所示:
<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15">
您可以在任何纯文本编辑器(例如记事本)中编辑 HTML。在编辑器中,将从通道复制的元素添加到 HTML 文件中。
<html><head><title>ThingSpeak Embedded Plot</title></head> <body> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/250296/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=50&type=line&update=15"> </body></html>
以下是网页上嵌入绘图的示例。
调整 ThingSpeak 仪表板的绘图大小
您可以调整 iframe 的大小以确保绘图适合可用空间。绘图大小对于移动显示尤其重要。如果您仅提供约束参数,浏览器将确保对象适合定义的空间。示例,使用<iframe 宽度=”200”...>确保您的 iframe 适合显示屏上的 200 像素空间。
您还可以在同一显示中组合来自不同字段通道的多个绘图。这是四个图的仪表板视图。
其中一个已被手动调整大小以适应空间。表空间控制三个图的大小。此 HTML 代码演示了 ThingSpeak 仪表板。
<html> <head> <title>Data Collection Dashboard</title> </head> <body> <table border=2 bordercolor="#0000FF"> <tr><td colspan="2"> <h1 align="center" color="#00FFFF">Data Collection Dashboard</h1> </td></tr> <tr><td> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/320695/charts/1?bgcolor=%23ffffff&color=%23F62020&dynamic=true&results=800&type=line&update=15"></iframe> </td> <td><iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/166526?color=%23FFFFFF&dynamic=true"></iframe> </td></tr> <tr><td> <iframe width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/12397/charts/2?results=720&dynamic=true&update=15"></iframe> </td> <td> <iframe width="300" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/308777"></iframe> <h3>Links</h3> <a href="https://www.google.com">Google</a><br> <a href="https://www.Mathworks.com">Mathworks</a><br> <a href="https://en.wikipedia.org/wiki/Cleve_Moler">Wikipedia</a> </td> </html>