【node-RED】chartノードを初期化(クリア)する方法

node-RED

2020年3月30日2023年1月21日

目次 [ close ]

空の配列を与えて初期化する

chartノードはX-axisで指定した時間分のデータを保持します。ページの再読み込みを行っても、以前に取得したデータは初期化（クリア）されません。

chartノードは時系列のデータを配列として保持しているので、空の配列を与えることで表示を初期化することができます。

例えば、図のように乱数を延々と表示するchartノードがあるとします。このchartノードを初期化したい場合、functionノードを一つ追加するだけで実現可能です。

functionノードには、空配列を返す処理だけを記述します。

msg.payload = [];
return msg;

実行結果

デプロイすると、時間経過でデータが貯まっていきます。

クリアボタンを押すと、chartノードのグラフが削除されました。完全にデータが無い状態では、スケールやグリッドも表示されなくなるようです。

デプロイしたタイミングで初期化したい場合は、injectノードを追加して「 Node-RED起動の0.1秒後、以下を行う」にチェックを入れればOKです。

フロー

[{"id":"ec72f6e6.29dbd","type":"tab","label":"chart clear","disabled":false,"info":""},{"id":"dcf822ad.120ca","type":"ui_chart","z":"ec72f6e6.29dbd","name":"","group":"9cce9453.f28df","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":1130,"y":180,"wires":[[]]},{"id":"55984c1f.618e04","type":"function","z":"ec72f6e6.29dbd","name":"クリア","func":"msg.payload = [];\nreturn msg;","outputs":1,"noerr":0,"x":830,"y":280,"wires":[["dcf822ad.120ca"]]},{"id":"70b0a096.e5128","type":"function","z":"ec72f6e6.29dbd","name":"乱数生成","func":"msg.payload = Math.round(Math.random()*31+60);\n\nreturn msg;","outputs":1,"noerr":0,"x":840,"y":180,"wires":[["dcf822ad.120ca"]]},{"id":"cb0ffd28.23494","type":"inject","z":"ec72f6e6.29dbd","name":"kick(1s)","topic":"","payload":"kick(1s)","payloadType":"str","repeat":"1","crontab":"","once":false,"onceDelay":0.1,"x":620,"y":180,"wires":[["70b0a096.e5128"]]},{"id":"76003bf.6d15fc4","type":"comment","z":"ec72f6e6.29dbd","name":"ダミーの乱数データ","info":"","x":650,"y":140,"wires":[]},{"id":"237fc663.0e190a","type":"ui_button","z":"ec72f6e6.29dbd","name":"","group":"9cce9453.f28df","order":2,"width":0,"height":0,"passthru":false,"label":"クリア","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":610,"y":280,"wires":[["55984c1f.618e04"]]},{"id":"129566a8.28db39","type":"comment","z":"ec72f6e6.29dbd","name":"表示クリアボタン","info":"","x":650,"y":240,"wires":[]},{"id":"82c9087d.35b9b","type":"inject","z":"ec72f6e6.29dbd","name":"kick","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":610,"y":340,"wires":[["55984c1f.618e04"]]},{"id":"9cce9453.f28df","type":"ui_group","z":"","name":"chart clear","tab":"93130cc1.18c92","order":1,"disp":true,"width":"6","collapse":false},{"id":"93130cc1.18c92","type":"ui_tab","z":"","name":"chart clear","icon":"dashboard","order":7,"disabled":false,"hidden":false}]