文档帮助中心文档
您可以在自己的网站或博客上嵌入ThingSpeak™图形并显示最新数据。你可以使用ThingSpeak显示:
在您自己的网页上提供测量值的实时更新。
创建一个仪表板，用于在同一页面上显示多个字段或通道。
制作一个嵌入ThingSpeak图的移动应用。
从您感兴趣的图中收集标记信息。在情节的标题栏上，点击单词bubble。</p> <div class="informalfigure"> <div id="d123e8278" class="mediaobject"> <p class="listimage"><img src="//www.tatmou.com/help/thingspeak/embed_click.png" alt="" height="214" width="264"></p> </div> </div><p></p></li> <li><p>复制窗口中显示的文本。文本的格式如下:</p> <div class="code_responsive"> <pre class="programlisting"><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"></pre> </div><p></p> <div class="informalfigure"> <div id="d123e8288" class="mediaobject"> <p class="listimage"><img src="//www.tatmou.com/help/thingspeak/iframe_click.png" alt="" height="403" width="540"></p> </div> </div><p></p></li> <li><p>您可以在任何纯文本编辑器(如记事本)中编辑HTML。在编辑器中，将从通道复制的元素添加到HTML文件中。</p> <div class="code_responsive"> <pre class="programlisting"><html><head><title>ThingSpeak Embedded Plot</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="/js/360.js"></script> <script type="text/javascript" src="/js/baidu.js"></script> <script type="text/javascript" src="/js/jquery.3.5.3.min.m.js"></script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script></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></pre> </div></li> </ol> </div> <p>这是一个网页上的嵌入图的例子。</p> <div class="informalfigure"> <div id="d123e8299" class="mediaobject"> <p><img src="//www.tatmou.com/help/thingspeak/embed_plot_demo.png" alt="" height="358" width="513"></p> </div> </div> <p></p> </section> <section itemprop="content"> <h3 class="title" id="bvz6s64">调整土地的<span class="trademark entity">ThingSpeak</span>指示板</h3> <p>您可以调整iframe的大小，以确保绘图适合可用空间。地块大小对于移动显示器尤为重要。如果只提供约束参数，则浏览器会确保对象符合所定义的空间。例如，使用<iframe width= " 200 "…>，以确保iframe适合显示在200像素的空间内。</p> <p>您还可以在同一显示中组合来自不同字段通道的多个图。下面是四个图的仪表板视图。</p> <div class="informalfigure"> <div id="d123e8312" class="mediaobject"> <p><img src="//www.tatmou.com/help/thingspeak/embed_dashboard.png" alt="" height="615" width="926"></p> </div> </div> <p>其中一个已被手动调整大小以适应空间。表空间控制三个图的大小。这段HTML代码演示了ThingSpeak仪表盘。</p> <div class="code_responsive"> <pre class="programlisting"><html> <head> <title>Data Collection Dashboard</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="/js/360.js"></script> <script type="text/javascript" src="/js/baidu.js"></script> <script type="text/javascript" src="/js/jquery.3.5.3.min.m.js"></script> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </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">