Node-Red Bar 條狀圖 Pie 餅狀圖
[{"id":"78a8fbd8.b9fe14","type":"inject","z":"8929f3b6.359b7","name":"2秒鐘 Timer","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":640,"wires":[["66fcc9a3.36cac8"]]},{"id":"6e1e1a6d.2168f4","type":"inject","z":"8929f3b6.359b7","name":"2秒鐘 Timer","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"2","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":130,"y":700,"wires":[["dbe18b3f.b53328"]]},{"id":"e97c198d.85a558","type":"ui_slider","z":"8929f3b6.359b7","name":"","label":"slider1 滑桿","tooltip":"","group":"197e02a3.68fcdd","order":6,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":140,"y":460,"wires":[["fe3a9bfb.69d5c8"]]},{"id":"44b2e7d8.f1aa38","type":"ui_slider","z":"8929f3b6.359b7","name":"","label":"slider2 滑桿","tooltip":"","group":"197e02a3.68fcdd","order":7,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":138,"y":509,"wires":[["d3b8fbb8.a17568"]]},{"id":"f23662bf.ff5dd","type":"ui_slider","z":"8929f3b6.359b7","name":"","label":"slider3 滑桿","tooltip":"","group":"197e02a3.68fcdd","order":8,"width":0,"height":0,"passthru":true,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":140,"y":560,"wires":[["95679b72.3673e8"]]},{"id":"fe3a9bfb.69d5c8","type":"function","z":"8929f3b6.359b7","name":"data1","func":"var data1= parseInt(msg.payload);\nglobal.set(\"data1\",data1);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":460,"wires":[[]]},{"id":"d3b8fbb8.a17568","type":"function","z":"8929f3b6.359b7","name":"data2","func":"var data2= parseInt(msg.payload);\nglobal.set(\"data2\",data2);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":280,"y":509,"wires":[[]]},{"id":"95679b72.3673e8","type":"function","z":"8929f3b6.359b7","name":"data3","func":"var data3= parseInt(msg.payload);\nglobal.set(\"data3\",data3);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":282,"y":560,"wires":[[]]},{"id":"66fcc9a3.36cac8","type":"function","z":"8929f3b6.359b7","name":"資料陣列","func":"var msg1={};\nvar msg2={};\nvar msg3={};\n\nmsg1.topic=\"data1\";\nmsg1.payload=global.get(\"data1\") ||0;\n\nmsg2.topic=\"data2\";\nmsg2.payload=global.get(\"data2\") ||0;\n\nmsg3.topic=\"data3\";\nmsg3.payload=global.get(\"data3\") ||0;\n\nreturn [msg1,msg2,msg3];","outputs":3,"noerr":0,"initialize":"","finalize":"","x":280,"y":640,"wires":[["d19a81aa.7447c","8619b08a.d8e2"],["d19a81aa.7447c","8619b08a.d8e2"],["d19a81aa.7447c","8619b08a.d8e2"]]},{"id":"dbe18b3f.b53328","type":"function","z":"8929f3b6.359b7","name":"","func":"var data1 =global.get(\"data1\") ||0;\nvar data2 =global.get(\"data2\") ||0;\nvar data3 =global.get(\"data3\") ||0;\nvar total =data1+data2+data3;\nvar p1=Math.round(data1/total*10000)/100;\nvar p2=Math.round(data2/total*10000)/100;\nvar p3=Math.round(data3/total*10000)/100;\nmsg.payload= {\n p1:p1+\"%\",\n p2:p2+\"%\",\n p3:p3+\"%\",\n};\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":270,"y":700,"wires":[["12ac2d52.e26793"]]},{"id":"12ac2d52.e26793","type":"ui_template","z":"8929f3b6.359b7","group":"cd687a95.00e108","name":"條狀百分比","order":11,"width":0,"height":0,"format":"<div layout=\"row\" layout-align=\"center\">\n <h2>\n Bar Chart 條狀百分比\n </h2>\n</div>\n\n<div layout=\"row\" layout-align=\"center\">\n <span flex>data1 </span>\n <span flex>data2 </span>\n <span flex>data3 </span>\n</div>\n\n<div layout=\"row\" layout-align=\"center\">\n <span flex style=\"border-top: 1px solid\"></span>\n</div>\n\n<div layout=\"row\" layout-align=\"center\">\n <span flex style=\"color: red\"> {{msg.payload.p1}}</span>\n <span flex style=\"color: red\"> {{msg.payload.p2}}</span>\n <span flex style=\"color: red\"> {{msg.payload.p3}}</span>\n</div>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":700,"wires":[[]]},{"id":"d19a81aa.7447c","type":"ui_chart","z":"8929f3b6.359b7","name":"","group":"197e02a3.68fcdd","order":9,"width":0,"height":0,"label":"Bar chart 條狀圖","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"100","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":500,"y":620,"wires":[[]]},{"id":"8619b08a.d8e2","type":"ui_chart","z":"8929f3b6.359b7","name":"","group":"197e02a3.68fcdd","order":10,"width":0,"height":0,"label":"Pie chart 餅狀圖","chartType":"pie","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":500,"y":660,"wires":[[]]},{"id":"197e02a3.68fcdd","type":"ui_group","name":"Default","tab":"e90ac9ed.e11878","order":2,"disp":true,"width":"6","collapse":false},{"id":"cd687a95.00e108","type":"ui_group","name":"Percent","tab":"e90ac9ed.e11878","order":1,"disp":true,"width":"6","collapse":false},{"id":"e90ac9ed.e11878","type":"ui_tab","name":"BAR","icon":"dashboard","disabled":false,"hidden":false}]
沒有留言:
張貼留言