Plotly 节点红色
[英]Plotly in node-red
问题描述
I am trying to generate a simple plotly chart from node red using template node.
我正在尝试使用模板节点从节点红色生成一个简单的 plotly 图表。 Plotly correctly plots if x and y are static values, but as I use payload to get data into the plot variables it does not print.如果 x 和 y 是 static 值，Plotly 正确绘图，但是当我使用有效负载将数据输入 plot 变量时，它不会打印。 I have checked and the data is correctly transferred.我已检查并且数据已正确传输。 Please see the code.请看代码。 \ \
Code in Mustache node Mustache 节点中的代码
The below code works and creates a chart correctly.下面的代码可以正常工作并正确创建图表。
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x:[1,2,3],//[{{payload.Temperature}}],
y:[1,2,3],//[{{payload.Temperature}}],
//mode: 'lines',
connectgaps: true
};
var data = [trace1];
var layout = {
title: 'Connect the Gaps Between Data',
showlegend: true
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
</script>
</body>
The below code doesn't work and instead plotly shows just coordinates.下面的代码不起作用，而是 plotly 只显示坐标。
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
var trace1 = {
x:[{{payload.time}}],
y:[{{payload.Temperature}}],
mode: 'lines',
connectgaps: true
};
var data = [trace1];
var layout = {
title: 'Connect the Gaps Between Data',
showlegend: true
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});
</script>
</body>
NOTE: data as viewed in the debug window is ans follows注意：调试 window 中查看的数据如下
` `
x:[Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:21 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:46:30 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:42:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:41:17 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:23 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:36:17 GMT-0400 (Eastern Daylight Time)],
y:[26.76,27.76,27.51,27.11,26.76,27.15,26.75,27.9,27.77,27.23],
` `
what am I doing wrong, thank you.我在做什么错，谢谢。
1 个解决方案
解决方案1
2 2019-10-09 00:21:29
You need to look at how the dates are converted to locale strings... simply embedding those into javascript rendered code does not generate valid Javascript code.您需要查看如何将日期转换为区域设置字符串...仅将它们嵌入到 javascript 呈现的代码中不会生成有效的 Javascript 代码。 Take this code snippet that you put into the comments:使用您在评论中添加的这段代码：
var trace1 = {
x: [Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:47:21 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:46:30 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:42:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:41:17 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:58 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:28 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:37:23 GMT-0400 (Eastern Daylight Time),Tue Oct 08 2019 12:36:17 GMT-0400 (Eastern Daylight Time)],
y: [26.76,27.76,27.51,27.11,26.76,27.15,26.75,27.9,27.77,27.23],
mode: 'lines',
connectgaps: true
};
That property x is supposed to be an array of either date strings ...该属性x应该是日期字符串的数组...
x: ["Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)", "Tue Oct 08 2019 12:47:28 GMT-0400 (Eastern Daylight Time)", ...etc... ],
... or an array of numbers representing epoch millis ... ...或代表纪元毫秒的数字数组...
x: [1570553278000, 1570553248000, ...etc... ],
Did you use a database query to get those x values?您是否使用数据库查询来获取这些 x 值？ If so, I would use some sql function in the query to output the internal unix time (sec.) * 1000 to get millis. If so, I would use some sql function in the query to output the internal unix time (sec.) * 1000 to get millis. Otherwise, you will have to do the conversion in your javascript code before the template node, using Date.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)") on each element in the array... very inefficient.否则，您必须在template节点之前的 javascript 代码中对数组中的每个元素使用Date.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)")进行转换。 ..非常低效。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.