时间戳

首页 > 解决方案 > 以节点红色绘制

plotly - 以节点红色绘制

问题描述

我正在尝试使用模板节点从节点红色生成一个简单的绘图图表。如果 x 和 y 是静态值，则正确绘图，但是当我使用有效负载将数据获取到绘图变量中时，它不会打印。我已检查并且数据已正确传输。请看代码。\

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>

下面的代码不起作用，而是仅显示坐标。

<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>

注意：在调试窗口中查看的数据如下

`

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],

`

我在做什么错，谢谢。

标签： plotlymustachenode-red

解决方案

您需要查看如何将日期转换为语言环境字符串......简单地将它们嵌入到 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 值？如果是这样，我会在查询中使用一些 sql 函数来输出内部 unix 时间（秒）* 1000 以获得毫秒。否则，您将不得不在节点之前的javascript 代码中进行转换，在数组中的每个元素上使用...非常低效。templateDate.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)")

推荐阅读