Node-RED仪表板中生成图表功能出现问题。

huangapple go评论59阅读模式
英文:

Trouble with graph generation function in Node-RED dashboard

问题

我目前正在开发一个Node-RED仪表板,我打算根据用户输入生成一个图表。图表生成过程涉及通过按钮选择特定年份并使用文本输入字段提供一个或两个产品的名称。

这是我实现的当前状态:
Node-red流程
仪表板中的每个按钮都与特定主题相关联,并且节点切换是基于用户选择的主题执行的。文本输入具有类似的配置,负责处理输入的函数如下所示:

context.global.input_data = msg.payload
msg.payload = context.global.input_data
return msg;

我在图表生成函数中遇到了问题:

var input_data = context.global.input_data文本输入
var year2017 = []
var year2017_global = []
var data = []

forvar inp in input_data{
    forvar i = 0; i < msg.payload.length; i ++{
        ifmsg.payload [i] .Product == data [inp]{
            ifmsg.payload [i] [Energy]{
                 year2017.push{x”:msg.payload [i] .Year,“y”:msg.payload [i] [Energy]}
            }
        }
    }
    year2017_global.pushyear2017
    data.pushinput_data [int]
}

x = [{
    series”:??,
    data”:year2017_global
    labels”:??
}]
msg.payload = x
return msg;

图表没有显示。系列和标签应该包括什么?函数有什么问题吗?谢谢。

英文:

I am currently developing a Node-RED dashboard where I aim to generate a chart based on user inputs. The chart generation process involves selecting a specific year through a button and providing the name of one or two products using text input fields.

Here is the current state of my implementation:
Node-red flow
Each button in the dashboard is associated with a specific topic, and the node switch is performed based on the topic selected by the user. The text inputs have a similar configuration, and the function responsible for handling the inputs is as follows:

context.global.input_data= msg.payload
msg.payload = context.global.input_data
return msg;

I'm encountering issues with the graph generation function:

var input_data = context.global.input_data (text inputs)
var year2017 = []
var year2017_global = []
var data= []

for(var inp in inpuy_data) {
    for (var i = 0; i &lt; msg.payload.length; i++) {
        if(msg.payload[i].Product == data[inp]) {
            if(msg.payload[i][&quot;Energy&quot;]) {
                 year2017.push({&quot;x&quot;: msg.payload[i].Year, &quot;y&quot;: msg.payload[i][&quot;Energy&quot;]})
            }
        }
    }
    year2017_global.push(year2017)
    data.push(input_data[int])
}

x = [{
    &quot;series&quot;: ??,
    &quot;data&quot;: year2017_global ,
    &quot;labels&quot;: ??
}]
msg.payload = x
return msg;

The chart is not appearing. What should I include in the series and labels? Is there something wrong with the function? Thank you.

答案1

得分: 1

  • "series": 这个字段代表图表上将显示的不同数据组或系列。您可以通过将输入数据数组中的每个项目推送到数据数组中来填充"series"字段。例如:
    "series": ["Series A", "Series B", "Series C"] -> 您将每个输入数据项目推送到数据数组中
  • "data": 包含要绘制在图表上的实际数据点。您可以使用year2017_global数组来填充"data"字段。
  • "labels": 指的是图表上不同类别或数据点的标签或名称。根据您的具体数据和类别提供适当的标签。

此外,在完成第一个for循环(在data.push(input_data[int])之后)后,重置year2017的值为空数组非常重要,或者您可以在外部for循环内声明var year2017 = [](在for (var inp in input_data) {之内)。

希望现在可以正常工作。

英文:
  • "series": This field represents the different data groups or series that will be displayed on the chart. You can populate the "series" field by pushing each item from the input_data array into the data array. For example:
    "series": ["Series A", "Series B", "Series C"] -> you are pushing each input_data item into the data array
  • "data": Contains the actual data points to be plotted on the chart. You can use the year2017_global array to fill the "data" field.
  • "labels": Refers to the labels or names for the different categories or data points on the chart. Provide appropriate labels based on your specific data and categories.

Additionally, it is important to reset the value of year2017 to an empty array after completing the first for loop (after data.push(input_data[int])), or alternatively, you can declare var year2017 = [] inside the outer for loop (for (var inp in input_data) {).

I hope it works now.

huangapple
  • 本文由 发表于 2023年6月19日 03:12:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76502159.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定