Main Content

Diese Seite wurde mithilfe maschineller Übersetzung übersetzt. Klicken Sie hier, um die neueste Version auf Englisch zu sehen.

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>
Ersetzen Sie 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>
Ersetzen Sie 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>
Ersetzen Sie CHANNEL_ID durch die ID des Kanals und FIELD_ID durch die ID des Felds, das Sie grafisch darstellen möchten.

Verwandte Themen