14 lines
2.5 KiB
HTML
14 lines
2.5 KiB
HTML
|
<script type="text/html" data-help-name="ui_chart">
|
|||
|
|
<p>入力値をグラフに出力します。このグラフは、時系列の折れ線グラフ、棒グラフ(縦や横)、円グラフのいずれかです。</p>
|
|||
|
|
<p>入力値の<code>msg.payload</code>は、数値に変換されます。もし変換に失敗した場合は、メッセージは無視されます。</p>
|
|||
|
|
<p><b>Y</b>軸の最小値と最大値を設定することは任意です。グラフは自動的に受け取った値を用いて自動的に目盛りを調整します。</p>
|
|||
|
|
<p>入力メッセージ毎に異なる<code>msg.topic</code>の値を用いることで、1つのグラフに複数の系列を表示できます。<code>msg.label</code>プロパティを用いることで、同じ系列の複数の棒グラフを表示できます。</p>
|
|||
|
|
<p><b>X</b>軸には、表示する時間、または最大のポイント数を定義します。古くなったデータは、自動的にグラフから削除されます。軸のラベルは、<a href="https://momentjs.com/docs/#/displaying/format/" target="_blank">Moment.jsの時間フォーマット</a>の文字列を用いて表示できます。</p>
|
|||
|
|
<p><code>msg.payload</code>に空の配列<code>[]</code>を含む入力によってグラフを初期化できます。</p>
|
|||
|
|
<p>全てのグラフに渡すデータの作成方法については、<b><a href="https://github.com/node-red/node-red-dashboard/blob/master/Charts.md" target="_new">本情報</a></b>を参照してください。</p>
|
|||
|
|
<p><b>初期ラベル</b>フィールドを用いることで、有効なデータを受け取る前にテキストを表示しておくことができます。</p>
|
|||
|
|
<p>プロパティ名(例えば<code>{{msg.topic}}</code>)をラベル欄に設定しておくことで、ラベルをメッセージのプロパティによって設定できます。</p>
|
|||
|
|
<p>本ノードの出力には、必要に応じて保存されたグラフの状態を持つ配列が含まれています。本データをchartノードに渡すことで、保存されたデータを再表示することもできます。</p>
|
|||
|
|
<p>クラスが指定されている場合、そのクラスは親要素に追加されます。 このようにして、カスタムCSSを使用して、カードとその中の要素のスタイルを設定できます。 クラスは、<code> msg.className </code>文字列プロパティを設定することで実行時に設定できます。</p>
|
|||
|
|
</script>
|