javascript - 使用图表JS在同一个图表上显示多个折线图

Question

现在我有两个不同的数据集，它们在同一页面上制作了两个不同的图表。我需要一张图表位于另一张图表之上。这就是我的 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);  
};

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

我已经尝试解决这个问题并突出显示峰值点，但没有得到任何结果。两组标签和数据点都正确传入。我可以安慰他们两个来查看这些值。

标签： javascripthtmlgraphchart.js

Answer 1

这是需要的

            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 }}
            }]