Main Content

このページは機械翻訳を使用して翻訳されました。ここをクリックして、元の英語を参照してください。

チャートの組み込み

公開チャネルのチャートの組み込み

チャート API をiframeのソースとして使用して、公開ThingSpeak™チャネルチャートを Web ページに埋め込みます。

公開チャートの組み込みコード

<iframe width="450" height="250" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>
CHANNEL_ID をチャネルの ID に置き換え、 FIELD_IDをグラフ化するフィールドの ID に置き換えます。heightおよびiframewidthパラメーターを調整することで、チャートの高さと幅を調整することもできます。たとえば、サイズ 800 x 400 ピクセルのグラフを作成するには、 iframe<iframe width="800" height="400" style="border: 1px solid #cccccc;" src="https://thingspeak.com/channels/CHANNEL_ID/charts/FIELD_ID"></iframe>にする必要があります。

チャートの例

プライベート チャネルのチャートの組み込み

Web ページにプライベートチャネルのグラフを埋め込むには、グラフ API をiframeのソースとして使用し、 を置き換えてグラフパラメーターapi_key=XXXXXXXXXXXXX を追加します。 $XXXXXXXXXXXXX をチャネルの読み取り API キーに置き換えます。チャートを動的にしたい場合は、チャートパラメーターdynamic=trueを追加することもできます。

プライベート チャートの組み込みコード

<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 をチャネルの ID に置き換え、 FIELD_ID をグラフ化するフィールドの ID に置き換え、 XXXXXXXXXXXXXをプライベートチャネルのAPIキーを読み取ります。

動的チャートの組み込み

Web ページに動的なThingSpeakグラフを配置するには、 iframeのソースとしてグラフ API を使用し、グラフパラメーターdynamic=trueを追加します。 $。

動的チャートの埋め込みコード

<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 をチャネルの ID に置き換え、 FIELD_IDをグラフ化するフィールドの ID に置き換えます。

関連するトピック