帶有 Chart JS 的 Django 時間序列

Question

我正在構建一個 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>

但是，我不斷收到此錯誤：

未捕獲的 ReferenceError：nan 未定義在（索引）：40:282

這些“nan”是由 Python 使用 Numpy 生成的，如下所示： y_hat = np.append(y, np.zeros(6) + np.nan).tolist()

似乎 Chart JS 確實知道如何讀取“null”值，我只是不知道如何將 Python 轉換為 Chart JS 可以實際讀取的東西。

有任何想法嗎？ 謝謝！

Answer 1

回答了我自己的問題。 只需使用 .astype(str) 將數組轉換為字符串。 像這樣：np.append(np.zeros(39) + np.nan, array_of_numbers).astype(str)