Diese Seite wurde mithilfe maschineller Übersetzung übersetzt. Klicken Sie hier, um das englische Original zu sehen.

Einbetten eines Diagramms

Einbetten eines Diagramms eines öffentlichen Kanals

Verwenden Sie die Diagramm-API als Quelle eines iframe, um öffentliche ThingSpeak™-Kanaldiagramme in Ihre Webseite einzubetten.

Öffentlicher Chart-Einbettungscode

<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 in ein Diagramm einfügen 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 erhalten, sollte iframe <iframe width="800" height="400" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe> sein.

Beispiel für ein Diagramm

Einbetten eines Diagramms eines privaten Kanals

Um ein Diagramm eines privaten Kanals in Ihre Webseite einzubetten, verwenden Sie die Diagramm-API als Quelle eines iframe und fügen Sie den Diagrammparameter api_key=XXXXXXXXXXXXX hinzu, wobei Sie XXXXXXXXXXXXX durch den gelesenen API-Schlüssel des Kanals ersetzen. 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 den Read-API-Schlüssel des privaten Kanals.

Einbetten eines dynamischen Diagramms

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 in ein Diagramm einfügen möchten.

Siehe auch

Themen