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

Question

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

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

            }}

我想在 x 轴上获取星期，然后在 y 轴上获取planned_del 和 actual_del 数据，这些数据可以显示为折线图。即使没有要连接的数据点，也应该显示单点条目。

Answer 1

实现此目的的一种方法是将data.labels 定义为从0 到53 的数字array。

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

两个datasets 中的data 将只包含individual points 的定义。

data: [{ x: 46, y: 20 }, { x: 53, y: 94 }] // plandata 
...
data: [{ x: 8, y: 1}] // actualdata 

这是说明如何获得所需结果的 JavaScript 部分。

var plandata = [{ week: "46", planned_del: "20" }, { week: "53", planned_del: "94" }];
var actualdata = [{ week: "8", actual_del: "1" }];

new Chart("scurve_chart", {
  type: 'line',
  data: {
    labels: Array.from(new Array(54), (x, i) => i),
    datasets: [{
        label: "Planned Deliverables",
        fill: false,
        borderColor: "rgba(255, 0, 0, 1)",
        pointHoverBackgroundColor: "rgba(255, 0, 0, 1)",
        data: plandata.map(o => ({ x: Number(o.week), y: Number(o.planned_del)}))
      },
      {
        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: actualdata.map(o => ({x: Number(o.week), y: Number(o.actual_del)}))
      }
    ]
  },
  options: {    
    tooltips: {
      callbacks: {
        title: (tooltipItem, data) => "Week " + data.datasets[tooltipItem[0].datasetIndex].data[tooltipItem[0].index].x
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      xAxes: [{
        ticks: {          
          min: 0,
          max: 53,
          stepSize: 1
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="scurve_chart" height="90"></canvas>