ChartJS Django时间序列与图表JS

h6my8fg2  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(250)

我正在构建一个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>

但是,我不断收到此错误:
未捕获的引用错误:未在(索引):40:282处定义Nan
这些“nan 's”是Python使用Numpy生成的,如下所示:y_hat = np.附加(y,np.零(6)+ np.非零).列表()
看起来Chart JS确实知道如何读取“null”值,但我不知道如何将Python转换为Chart JS实际可以读取的内容。
有什么主意吗?谢谢!

biswetbf

biswetbf1#

我回答了我自己的问题。只需要使用.astype(str)将数组转换为字符串。所以如下所示:np.append(np.零(39)+ np.nan,数字数组).astype(字符串)

相关问题