Betten Sie ein Diagramm ein
Betten Sie ein Diagramm eines öffentlichen Kanals ein
Verwenden Sie die Diagramm-API als Quelle eines iframe
, um öffentliche ThingSpeak™- Kanaldiagramme auf Ihrer Webseite einzubetten.
Eingebetteter Code für öffentliche Diagramme
<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
CHANNEL_ID
durch die ID des Kanals und FIELD_ID
durch die ID des Felds, das Sie grafisch darstellen möchten. Sie können die Höhe und Breite des Diagramms auch anpassen, indem Sie die Parameter height
und width
in iframe
anpassen. Um beispielsweise ein Diagramm mit der Größe 800 x 400 Pixel zu haben, sollte iframe
<iframe width="800" height="400" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
lauten.Beispiel für ein Diagramm
Betten Sie ein Diagramm eines privaten Kanals ein
Um ein Diagramm eines privaten Kanals auf Ihrer Webseite einzubetten, verwenden Sie die Diagramm-API als Quelle eines iframe
und fügen Sie den Diagrammparameter api_key=XXXXXXXXXXXXX
hinzu, der ersetzt $XXXXXXXXXXXXX
mit dem gelesenen API-Schlüssel des Kanals. Wenn Sie das Diagramm dynamisch gestalten möchten, können Sie auch den Diagrammparameter dynamic=true
hinzufügen.
Eingebetteter Code für private Diagramme
<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
durch die ID des Kanals, FIELD_ID
durch die ID des Felds, das Sie grafisch darstellen möchten, und XXXXXXXXXXXXX
durch API-Schlüssel des privaten Kanals lesen.Betten Sie ein dynamisches Diagramm ein
Um ein dynamisches ThingSpeak -Diagramm auf Ihrer Webseite zu platzieren, verwenden Sie die Diagramm-API als Quelle eines iframe
und fügen Sie den Diagrammparameter dynamic=true
hinzu $.
Eingebetteter Code für dynamische Diagramme
<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
durch die ID des Kanals und FIELD_ID
durch die ID des Felds, das Sie grafisch darstellen möchten.