Временные ряды Django с помощью Chart JS

Я создаю приложение Django, которое динамически передает данные в Chart JS. Поскольку я пытаюсь соединить два линейных ряда вместе (исторические значения и прогнозы), я пытаюсь сделать так, чтобы Chart JS понимал NaN. Вот как написан код:

<script>

        new Chart(document.getElementById("chart"), {

          type: 'line',
          data: {
            labels: {{ new_dates|safe }},
            datasets: [
              {
                  data: {{ orig_val|safe }},
                  label: "Historical Sales",
                  borderColor: "#3e95cd",
                  fill: false
                  
              },
              {
                  data: {{ preds|safe }},
                  label: "Predictions",
                  borderColor: "#22DD66",
                  fill: false
                  
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: 'output chart'
            },
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display:false
                    }
                }]
            },
            animation: {
                  duration: 2000,
              },
          }
        });
      </script>

Вот что видит консоль:

<script>

        new Chart(document.getElementById("chart"), {

          type: 'line',
          data: {
            labels: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12', '2020-01', '2020-02', '2020-03', '2020-04', '2020-05', '2020-06', '2020-07', '2020-08', '2020-09', '2020-10', '2020-11', '2020-12', '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09'],
            datasets: [
              {
                  data: [71.0, 67.0, 84.0, 65.0, 78.0, 74.0, 73.0, 88.0, 86.0, 77.0, 94.0, 123.0, 71.0, 77.0, 57.0, 36.0, 57.0, 78.0, 89.0, 100.0, 120.0, 98.0, 121.0, 155.0, 99.0, 86.0, 162.0, 103.0, 102.0, 117.0, 114.0, 121.0, 127.0, 128.0, 141.0, 175.0, 124.0, 121.0, 139.0, nan, nan, nan, nan, nan, nan],
                  label: "Historical Sales",
                  borderColor: "#3e95cd",
                  fill: false,
                  spanGaps: true
              },
              {
                  data: [nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, nan, 100.2935, 154.556, 122.833, 109.4725, 160.0235, 104.568],
                  label: "Predictions",
                  borderColor: "#22DD66",
                  fill: false,
                  spanGaps: true
              }
            ]
          },
          options: {
            title: {
              display: true,
              text: 'output chart'
            },
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                xAxes: [{
                    gridLines: {
                        display:false
                    }
                }],
                yAxes: [{
                    gridLines: {
                        display:false
                    }
                }]
            },
            animation: {
                  duration: 2000,
              },
          }
        });
      </script>

Но я продолжаю получать эту ошибку:

Uncaught ReferenceError: nan не определена at (index):40:282

эти "nan'ы" генерируются Python с помощью Numpy, вот так: y_hat = np.append(y, np.zeros(6) + np.nan).tolist()

похоже, что Chart JS действительно умеет читать значения "null", я просто не знаю, как сделать преобразование из Python в то, что Chart JS может действительно прочитать.

Есть идеи? Спасибо!

ответил на свой вопрос. просто нужно было преобразовать массив в строку с помощью .astype(str). вот так: np.append(np.zeros(39) + np.nan, array_of_numbers).astype(str)

Вернуться на верх