注意:根据@hardillb的回答,我修复了上面的流程,并在下面发布了正确的流程。 在此先感谢您的帮助。我是HTML的初学者,必须在Node-RED中使用它。 我有一个简单的流程(如上面的图像链接所示)。我在有效负载中注入了带有示例折线图点的消息。我想在模板节点的HTML脚本中接收消息,然后将其在浏览器的折线图上呈现接收到的msg.payload数据。如果我从脚本内部生成随机图,则HTML脚本可以正常工作,但是我无法使该脚本接收msg.payload。我尝试了类似How to send msg.payload from function node to template node
的操作下面是波形HTML中的HTML脚本。我指示TODO我尝试了什么但没起作用。
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
//define line graph options for CanvasJS line graph
var options = {
exportEnabled: true,
animationEnabled: true,
animationDuration: 200,
theme: "light2",
title :{
text: "Simple Line Chart"
},
axisY: {
includeZero: false
},
data: [{
type: "spline",
indexLabelFontSize: 16,
dataPoints: [] //this will be loaded with "y" values from msg.payload
}]
};
//TODO not working ---------------------
//load WaveData from msg.payload
var WaveData = [];
var createWaveData = function () {
WaveData = {{{payload}}}; //TODO fix, not working
//WaveData = [1, 2, 3, 4, 5, 4, 3, 2, 1]; //debug code, works fine, sample data is plotted on graph
}
//--------------------------------------
var updateChart = function (cnt) {
createWaveData();
options.data[0].dataPoints = [];
for (var j = 0; j < cnt; j++) {
yVal = WaveData[j];
options.data[0].dataPoints.push({y: yVal});
}
(new CanvasJS.Chart("chartContainer", options)).render();
};
var updateInterval = 2000;
setInterval(function(){ updateChart(WaveData.length) }, updateInterval);
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width:100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
这是每个@hardillb答案的正确流程。
答案 0 :(得分:0)
Node-RED节点一次仅作用于一条消息。
http-in节点将产生一条消息,该消息将由模板节点更新,然后由http-out节点返回。 http节点必须成对出现,一条输入消息直接导致对发出请求的浏览器的http响应。
模板节点不保留任何状态,它仅使用来自传入消息的数据来呈现模板。
拥有注入节点不会有任何用处,因为模板节点在消息中呈现任何信息之后,http-out节点将丢弃该信息,因为它不是来自http-in节点。
您需要在http-in节点和模板节点之间包括一个节点,该节点将用您的数据更新msg.payload
。这可以是更改节点或功能节点。两者都可用于获取上下文变量并从be http-in节点更新味精。
然后在模板节点中,您需要类似
var waveData = {{payload}};
您可能需要3套花括号,以阻止数组转义HTML,请检查模板节点的信息侧栏
编辑:
实际上,您已经回来查看模板节点的文档了,您不需要功能节点在模板节点中使用上下文变量。这意味着以下应该起作用。
var waveData = {{flow.waveData}}