Javascript 使用chart JS在同一图表上显示多个折线图

现在我有两个不同的数据集，它们在同一页上绘制两个不同的图形。我需要一个图表在另一个上面。这就是我的JS/HTML的样子

<script>

        var data1 = {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: 'Sweep data',
                        data: {{ values | safe }},
                        backgroundColor: ['red'],
                        fill: false,
                        display: true               
                    }
                ],
                labels: {{ labels | safe }},
            }, 
            options: {
            }
        };

        var data2 = {
            type: 'line',
            data: {
                datasets: [
                    {
                        label: 'Peak data',
                        data: {{ values2 | safe }},
                        backgroundColor: ['black'],
                        fill: false,
                        display: true               
                    }
                ],
                labels: {{ labels2 | safe }},
            }, 
            options: {
            }
        };


        
window.onload = function(){
    var ctx = document.getElementById("canvas1").getContext("2d");
    window.myLine = new Chart(ctx, data1);  

    var ctx2 = document.getElementById("canvas2").getContext("2d");
    window.myLine = new Chart(ctx2, data2);  
};

变量数据1={
键入：“行”，
数据：{
数据集：[
{
标签：“扫描数据”，
数据：{values | safe}}，
背景颜色：[“红色”]，
填充：假，
显示：真
}
],
标签：{labels | safe}}，
}, 
选项：{
}
};
变量数据2={
键入：“行”，
数据：{
数据集：[
{
标签：“峰值数据”，
数据：{values2 | safe}}，
背景颜色：[“黑色”]，
填充：假，
显示：真
}
],
标签：{labels2 | safe}}，
}, 
选项：{
}
};
window.onload=函数（）{
var ctx=document.getElementById（“canvas1”）.getContext（“2d”）；
window.myLine=新图表（ctx，数据1）；
var ctx2=document.getElementById（“canvas2”）.getContext（“2d”）；
window.myLine=新图表（ctx2，数据2）；
};

我知道它正在生成多个图形，因为我有两个ctx变量，我不知道的是如何只调用一次新的图表函数，但将两个数据集都传递给它。这些数据集没有相同数量的标签，但第二个图形是第一个图形的峰值，因此这些都包含在原始标签集中

---

我试着解决这个问题，并强调峰值点，但没有取得任何进展。标签集和数据点集均正确传入。我可以对它们进行控制台操作以查看值。

如果希望在同一个图形上有多个折线图，则需要将数据集对象放入数据集数组中，而不是像这样使图表重复两次：

datasets: [
                    {
                        label: 'Sweep data',
                        data: {{ values | safe }},
                        backgroundColor: ['red'],
                        fill: false,
                        display: true               
                    },
                    {
                        label: 'Peak data',
                        data: {{ values2 | safe }},
                        backgroundColor: ['black'],
                        fill: false,
                        display: true               
                    }
                ]

这是我们需要的

            data: [{
            x: {{ labels2[0] | safe }},
            y: {{ values2[0] | safe }}
            }, {
            x: {{ labels2[1] | safe }},
            y: {{ values2[1] | safe }}
            }, {
            x: {{ labels2[2] | safe }},
            y: {{ values2[2] | safe }}
            }, {
            x: {{ labels2[3] | safe }},
            y: {{ values2[3] | safe }}
            }]

---

使用与值1相同的标签绘制第二个折线图（值2）。也就是说，值2中的每个点都使用标签[1,2,3,4]，而不是它们的实际标签。关于如何解决这个问题，请参阅我在同一个问题下的回答，阅读我在同一个问题下的评论，解释这如何无助于我或解决我的问题，引导我再次问这个问题。是的，好吧，不要问你的问题多次，因为你做错了，而不是像我解释的那样，这无助于你读得更好