我有问题,使更先进的现场图表。我在PC上使用红色节点从PLC采集数据,并使用标准的红色节点 Jmeter 板图节点以折线图的形式显示。PLC从30个传感器读取值:20个压力,3个温度,3个流量,1个速度。读取频率为4 Hz。不是所有的值都是可见的,因为我希望图表是清晰的。为此,我还需要分裂y轴根据传感器。一个是压力,一个是温度,一个是流量,一个是速度。目前数据以数组msg.payload[]的形式出现,但这并不重要,因为我会将数据格式化为正确的形式。我知道实时图表的格式数据是
{topic:"temperature", payload:22}
{topic:"humidity", payload:66}
对于静态图表
msg.payload =[{
"series": ["A", "B", "C"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]
}]
. standard chart with data from above code我知道node-red Jmeter 板图表类似于chart.js。我可以发送ui_control消息来调整实际的y轴并再添加两个y轴:
let msg2=
{
ui_control :{
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
minute: 'HH:mm'
}
}
}],
yAxes: [{
id: "1",
scaleLabel: {
display: true,
labelString: 'pressure [bar]'
},
ticks: {
min: -10,
max: 10,
stepSize: 2
}
}, {
id: "2",
scaleLabel: {
display: true,
labelString: 'Temperature [°C]'
},
ticks: {
min: 0,
max: 20,
stepSize: 4
}
}, {
id: "3",
scaleLabel: {
display: true,
labelString: 'Flow [L/min]'
},
ticks: {
min: 0,
max: 20,
stepSize: 4
}
}]
} ,
legend: {
display: true,
position: 'top',
},
title: {
display: true,
text: 'Chart'
}
,
animation: {
duration: 0
}
}},
};
return msg2;
结果为:Same data, ui_control message result
现在我想要显示例如:
msg.payload = 5;
msg.topic="C";
msg.yAxis="3";
return msg;
而不是在axe 3(温度)上得到“C”,我在axe 1(压力)上得到它,Node-red有时在发送上述消息后冻结。chart with one data point on 1 y axe
现在适当的问题是:如何使用多个y轴?我可以使用标准的节点红色 Jmeter 板图表来完成此操作吗?静态图表的数据结构应该如何寻找,而动态图表又该如何寻找?也许我应该使用node-red模板节点,并在HTML中基于chart.js编写代码?最后一个问题,我如何才能最大限度地减少PC的使用,因为当我运行30个传感器,在4 Hz,我在短短10秒内得到1200点?
感谢您的帮助:D
1条答案
按热度按时间n3h0vuf21#
后来,我找到了最好的解决办法。我创造了流动,并将其公开给大家:https://flows.nodered.org/flow/138cbddaf5ecda8f36cf4dcd1bcf9d5d Grafana与流入量最适合历史数据。对于真实的数据(刷新4 Hz),Grafana太重。在我的解决方案中,我使用了chart.js,luxon,chart.js的luxon适配器和在Node-Red中实现的chartjs-plugin-streaming。有了这个,我可以制作多线,多轴的图表,具有完整的趋势配置。这个工作很好x1c 0d1x