Main Content

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

在网页上嵌入您的 ThingSpeak 绘图

您可以嵌入 ThingSpeak™ 图形并在您自己的网站或博客上显示最新数据。您可以使用 ThingSpeak 显示来:

  • 在您自己的网页上提供测量值的实时更新。

  • 创建仪表板以在同一页面上显示多个字段或通道。

  • 制作一个嵌入 ThingSpeak 绘图的移动 App 。

在网页中嵌入绘图

  1. 收集<内嵌框架>标记您感兴趣的绘图中的信息。在绘图的标题栏上,点击“气泡”一词。

  2. 复制窗口中显示的文本。文本的格式如下所示:

    <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">

  3. 您可以在任何纯文本编辑器(例如记事本)中编辑 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>

相关主题