[英]Plotly in node-red
我正在嘗試使用模板節點從節點紅色生成一個簡單的 plotly 圖表。 如果 x 和 y 是 static 值,Plotly 正確繪圖,但是當我使用有效負載將數據輸入 plot 變量時,它不會打印。 我已檢查並且數據已正確傳輸。 請看代碼。 \
Mustache 節點中的代碼
下面的代碼可以正常工作並正確創建圖表。
<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>
下面的代碼不起作用,而是 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>
注意:調試 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],
`
我在做什么錯,謝謝。
您需要查看如何將日期轉換為區域設置字符串...僅將它們嵌入到 javascript 呈現的代碼中不會生成有效的 Javascript 代碼。 使用您在評論中添加的這段代碼:
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
};
該屬性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... ],
...或代表紀元毫秒的數字數組...
x: [1570553278000, 1570553248000, ...etc... ],
您是否使用數據庫查詢來獲取這些 x 值? If so, I would use some sql function in the query to output the internal unix time (sec.) * 1000 to get millis. 否則,您必須在template
節點之前的 javascript 代碼中對數組中的每個元素使用Date.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)")
進行轉換。 ..非常低效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.