Участок в узле красный - PullRequest
Новая
       30

Участок в узле красный

1 голос
/ 08 октября 2019

Я пытаюсь сгенерировать простую графическую диаграмму из красного узла, используя шаблонный узел. График Plotly правильно отображает, если x и y являются статическими значениями, но, поскольку я использую полезную нагрузку для передачи данных в переменные графика, он не печатается. Я проверил и данные правильно переданы. Пожалуйста, смотрите код. \

Код в узле Усы

Приведенный ниже код работает и правильно создает диаграмму. 

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

`

что я делаю неправильно,спасибо.

1 Ответ

2 голосов
/ 09 октября 2019

Вам нужно посмотреть, как даты конвертируются в строки локали ... просто встраивание их в код рендеринга 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 перед узлом template, используя Date.parse("Tue Oct 08 2019 12:47:58 GMT-0400 (Eastern Daylight Time)") для каждого элемента в массиве ... очень неэффективно.

...