Javascript 使用chart.js显示多个月的折线图

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

plan_plan = 0: {label: "Feb-20", plan_hrs: "20"} 
            1: {label: "Oct-20", plan_hrs: "94"} 
actual_plan = 0: {label: "Mar-20", actual_hrs: "1"}

JavaScript代码：

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

                 var labels = [];
                  for (var i in plandata) {
                        labels.push(plandata[i].label);
                  }
                  for (var j in actualdata) {
                        labels.push(actualdata[j].label);
                  }
                new Chart("scurve_chart", {
  type: 'line',
  data: {
    labels: Array.from(labels),
    datasets: [{
        label: "Planned Hours",
        fill: false,
        borderColor: "rgba(255, 0, 0, 1)",
        pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
        data: plandata.map(o => ({ x: Number(o.label), y: Number(o.plan_hrs)}))
      },
      {
        label: "Actual Hours",
        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: actualdata.map(o => ({x: Number(o.label), y: Number(o.actual_hrs)}))
      }
    ]
  },
  options: {    
    tooltips: {
      callbacks: {
        title: (tooltipItem, data) => "Month " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
       scaleLabel: {
        display: true,
        labelString: 'Hours'
      }
      }],
      xAxes: [{
        ticks: {          
          min: 0,
          max: 53,
          stepSize: 1
        },
        scaleLabel: {
        display: true,
        labelString: 'Month'
      }
      }]
    }
  }
});
 }}

函数show_Graph（）
{
{
var plandata=；
var实际数据=；
var标签=[]；
用于（plandata中的var i）{
labels.push（plandata[i].label）；
}
用于（实际数据中的var j）{
labels.push（实际数据[j].label）；
}
新图表（“曲线图”{
键入：“行”，
数据：{
标签：数组。从（标签），
数据集：[{
标签：“计划小时数”，
填充：假，
边框颜色：“rgba（255,0,0,1）”，
pointHoverBackgroundColor:“rgba（255,0,0,1）”，
数据：plandata.map（o=>（{x:Number（o.label），y:Number（o.plan\u hrs）}））
},
{
标签：“实际小时数”，
填充：假，
背景色：“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.label），y:Number（o.actual_hrs）}））
}
]
},
选项：{
工具提示：{
回调：{
标题：（tooltipItem，data）=>“月”+数据。数据集[tooltipItem[0]。datasetIndex]。数据[tooltipItem[0]。索引].x
}
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
},
scaleLabel：{
显示：对，
标签字符串：“小时”
}
}],
xAxes：[{
滴答声：{
分:0,，
最高：53，
步长：1
},
scaleLabel：{
显示：对，
标签串：“月”
}
}]
}
}
});
}}

我想得到x轴格式的月份（1月20日），然后y轴的计划小时数和实际小时数，可以用折线图显示。并且即使没有要连接的数据点，也应显示单点输入。我使用了脚本标记：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>

但当我包含以下引导脚本时，它不会显示图形：

<script src="build/js/custom.min.js">

---

我可以帮助解析和显示

xAxis上的日期

，但不幸的是，我不知道引导

按如下方式定义您的

xAxis

：

xAxes: [{
  type: 'time',
  time: {
    parser: 'MMM-YY',
    unit: 'month',
    displayFormats: {
      month: 'MMM-YY'
    }
  }
}]

Chart.js在内部使用Moment.js，因此可以使用以下格式解析和显示日期。在您的情况下，这是

'MMM-YYD'

const plan_plan=[{标签：“2月20日”，计划时间：“20”}，{标签：“10月20日”，计划时间：“94”}]；
施工实际计划=[{标签：“3月20日”，实际工时：“1”}]；
新图表（“曲线图”{
键入：“行”，
数据：{
数据集：[{
标签：“计划小时数”，
填充：假，
边框颜色：“rgba（255,0,0,1）”，
数据：plan\u plan.map（o=>（{x:o.label，y:Number（o.plan\u hrs）}））
},
{
标签：“实际小时数”，
填充：假，
边框颜色：“rgba（0,255,0,1）”，
数据：实际的计划图（o=>（{x:o.label，y:Number（o.actual\u hrs）}））
}
]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}],
xAxes：[{
键入：“时间”，
时间：{
解析器：“MMM-YY”，
单位：月，
显示格式：{
月份：'MMM-YY'
}
}
}]
}
}
});

我已经尝试过了，但我想要的是格式（MMM-YY），而不是格式（MMM-DD）。我已将解析器的代码更改为
MMM-YY
，但它四次显示为2月20日，随后的四次显示为2月20日，没有在x轴上显示年份的所有月份。抱歉，我误解了您提供的日期格式，现在使用日期格式“MMM-YY”的解决方案更新了我的答案