Javascript 使用chart.js显示多个数据集的折线图

我必须在一个图表中显示包含两个不同数据集的折线图。执行查询后，我得到了以下形式的计划和实际计划

plan_plan = 0: {week: "46", planned_del: "20"}
               1: {week: "53", planned_del: "94"}

actual_plan = 0: {week: "8", actual_del: "1"}

javascript部分：

function show_Graph()
        {
            {
                var plandata = <?php echo json_encode($plan_plan); ?>;
                var actualdata = <?php echo json_encode($actual_plan); ?>;

                   console.log(plandata);
                     var labels = [];
                    var plandel = [];
                    var actualdel = [];

      for (var i in plandata) {
                        labels.push(plandata[i].week);
                        plandel.push(plandata[i]);
                      }
    for (var j in actualdata) {
                       labels.push(actualdata[j].week);
                        actualdel.push(actualdata[j]);
                      }

                    var chartdata = {
                        labels: labels,

                        datasets: [

                            {
                                label: "Planned Deliverables",
                                fill: false,
                                borderColor: "rgba(255, 0, 0, 1)",
                                pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
                                data: plandel
                            },
                            {
                                label: "Actual Deliverables",
                                fill: false,
                                backgroundColor: "rgba(0, 255, 0, 0.75)",
                                borderColor: "rgba(0, 255, 0, 1)",
                                pointHoverBackgroundColor: "rgba(0, 255, 0, 1)",
                                pointHoverBorderColor: "rgba(0, 255, 0, 1)",
                                data: actualdel

                            }


                        ]

                    };

                    var graphTarget = $("#scurve_chart");

                  var barGraph = new Chart(graphTarget, {
                        type: 'line',
                        data: chartdata,
                        options: {
                            elements: {
                    point:{
                        radius: 1,
                    }
                },


        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
            barValueSpacing: 2,
            barPercentage: 0.2
        }]
        }
    }
                    });

            }}

函数show_Graph（）
{
{
var plandata=；
var实际数据=；
控制台日志（plandata）；
var标签=[]；
var plandel=[]；
var实际值=[]；
用于（plandata中的var i）{
labels.push（plandata[i].week）；
plandel.push（plandata[i]）；
}
用于（实际数据中的var j）{
labels.push（实际数据[j].week）；
实际推力（实际数据[j]）；
}
var图表数据={
标签：标签，
数据集：[
{
标签：“计划交付物”，
填充：假，
边框颜色：“rgba（255,0,0,1）”，
pointHoverBackgroundColor:“rgba（255,0,0,1）”，
资料来源：普兰德尔
},
{
标签：“实际交付物”，
填充：假，
背景色：“rgba（0,255,0,0.75）”，
边框颜色：“rgba（0,255,0,1）”，
pointHoverBackgroundColor:“rgba（0,255,0,1）”，
pointHoverBorderColor:“rgba（0,255,0,1）”，
数据：实际数据
}
]
};
var图目标=$（“曲线图”）；
var条形图=新图表（图形目标{
键入：“行”，
数据：图表数据，
选项：{
要素：{
要点：{
半径：1，
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
barValueSpacing:2，
百分比：0.2
}]
}
}
});
}}

---

我想得到x轴上的一周数据，然后y轴上的计划数据和实际数据，它们可以显示为折线图。即使没有数据点连接，也应显示单点输入。

实现这一点的一种方法是将

数据定义为
标签，将其定义为一个从0到53的
数组

labels: [0, 1, 2, ... 53]

两个
数据集中的
数据
将只包含

下面是JavaScript部分，它演示了如何获得所需的结果


var plandata=[{week:“46”，planned_del:“20”}，{week:“53”，planned_del:“94”}]；
var actualdata=[{周：“8”，实际值：“1”}]；
新图表（“曲线图”{
键入：“行”，
数据：{
标签：Array.from（新数组（54），（x，i）=>i），
数据集：[{
标签：“计划交付物”，
填充：假，
边框颜色：“rgba（255,0,0,1）”，
pointHoverBackgroundColor:“rgba（255,0,0,1）”，
数据：plandata.map（o=>（{x:Number（o.week），y:Number（o.planned_del）}））
},
{
标签：“实际交付物”，
填充：假，
背景色：“rgba（0,255,0,0.75）”，
边框颜色：“rgba（0,255,0,1）”，
pointHoverBackgroundColor:“rgba（0,255,0,1）”，
pointHoverBorderColor:“rgba（0,255,0,1）”，
数据：actualdata.map（o=>（{x:Number（o.week），y:Number（o.actual_del）}））
}
]
},
选项：{
工具提示：{
回调：{
标题：（tooltipItem，data）=>“周”+数据。数据集[tooltipItem[0]。datasetIndex]。数据[tooltipItem[0]。索引].x
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
滴答声：{
分:0,，
最高：53，
步长：1
}
}]
}
}
});

我使用了
，但我的引导模板不起作用<代码>
，此标记似乎已禁用。你能给我建议一下启用它的想法吗？对不起，我不知道Bootstrap，在这里帮不了你。当我有数据以如下格式绘制时我会怎么做：{code>plan\u plan=0:{label:“Feb-20”，Pland\u del:“20”}1:{label:“Oct-20”，Pland\u del:“94”}actual\u plan=0:{label:“Mar-20”，actual\u del:“1”}
。我将如何绘制这些数据？@FRECEENA FRANCIS:请为这期新杂志发布一个新问题，这样可以更容易地提供安排清晰的答案。
data: [{ x: 46, y: 20 }, { x: 53, y: 94 }] // plandata 
...
data: [{ x: 8, y: 1}] // actualdata