Javascript 2个不同标签的折线图| Chart.js

我正在尝试将2个数据集绘制成1个折线图数据集。我已经转换了日期和值，但我想用第一个数据集继续第二个数据集。这就是我所做的

<div class="d-flex justify-content-center">
            <canvas id="lineChart" width="900" height="400"></canvas>
            <script>
              var ctx = document.getElementById("lineChart").getContext("2d")
              var lineChart = new Chart(ctx,{
                type : 'line',
                data: {
                  labels : {{ tanggal|safe }},
                  datasets: [
                    {
                        label:"Terkonfirmasi",
                        data: {{ terkonfirmasi | safe }},
                        fill : false,
                        borderColor: "rgb(75,192,192)",
                        lineTension:0.1
                    },
                    {
                        labels:{{tanggal_predict|safe}},
                        label:"Prediksi",
                        data: {{ predicted_cases|safe}},
                        fill : false,
                        borderColor: "rgb(192,0,0)",
                        lineTension:0.1
                  }
                ]
                },
                options:{
                  responsive:false
                }
              });
            </script>
          </div>

var ctx=document.getElementById（“线形图”）.getContext（“2d”）
var线形图=新图表（ctx{
键入：“行”，
数据：{
标签：{tanggal | safe}}，
数据集：[
{
标签：“Terkonfirmasi”，
数据：{terkonfirmasi|safe}，
填充：假，
边框颜色：“rgb（75192192）”，
线张力：0.1
},
{
标签：{{tanggal_predict}safe}，
标签：“Prediksi”，
数据：{预测病例}安全}，
填充：假，
边框颜色：“rgb（192,0,0）”，
线张力：0.1
}
]
},
选项：{
回答：错
}
});

结果如下

这就是我所期望的

---

“tanggal_predict”列表仅包含预测值的日期

最简单的解决方案是用空值的数量填充红线的数据数组，直到它到达正确的位置，或者，您可以提供包含对象的数据数组，您可以在其中指定x和y值，这样您就可以将其直接放在您想要的位置

我通过向数组中添加“null”实现了这一点，即使在python中它是None，但在javascript中它是null。所以我在数组中添加了一个字符串'null'，得到了我想要的结果

---

我尝试向数组中添加None，但结果是flask中未定义None。它在笔记本电脑上运行得很好