Php 在chart.js折线图中显示过去两年的SQL数据，直到今天

我有一个折线图，基本上显示了预算支出，它的工作原理如下：

我有一个包含以下内容的include，它准备显示数据：

<?php
    $conn = new mysqli(blah blah blah);

    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    $year = date('Y');
    $total=array();
    for ($month = 1; $month <= 12; $month ++){
        $sql="SELECT *, SUM(Contracts.Sum_Approved) AS total FROM Contracts JOIN Budgets ON Contracts.Budget = Budgets.BudgetID WHERE month(Contracts.Decision_Date)='$month' AND year(Contracts.Decision_Date)='$year' AND Contracts.owner=$userid AND Contracts.Archived=0 AND Contracts.Budget=$budget";
        $query=$conn->query($sql);
        $row=$query->fetch_array();

        $total[]=$row['total'];
    }

    $tjan = $total[0];
    $tfeb = $total[1];
    $tmar = $total[2];
    $tapr = $total[3];
    $tmay = $total[4];
    $tjun = $total[5];
    $tjul = $total[6];
    $taug = $total[7];
    $tsep = $total[8];
    $toct = $total[9];
    $tnov = $total[10];
    $tdec = $total[11];

    $pyear = $year - 1;
    $pnum=array();

    for ($pmonth = 1; $pmonth <= 12; $pmonth ++){
        $sql="SELECT *, SUM(Contracts.Sum_Approved) AS ptotal FROM Contracts JOIN Budgets ON Contracts.Budget = Budgets.BudgetID WHERE month(Contracts.Decision_Date)='$pmonth' AND year(Contracts.Decision_Date)='$pyear' AND Contracts.owner=$userid AND Contracts.Archived=0 AND Contracts.Budget=$budget";
        $pquery=$conn->query($sql);
        $prow=$pquery->fetch_array();

        $ptotal[]=$prow['ptotal'];
    }

    $pjan = $ptotal[0];
    $pfeb = $ptotal[1];
    $pmar = $ptotal[2];
    $papr = $ptotal[3];
    $pmay = $ptotal[4];
    $pjun = $ptotal[5];
    $pjul = $ptotal[6];
    $paug = $ptotal[7];
    $psep = $ptotal[8];
    $poct = $ptotal[9];
    $pnov = $ptotal[10];
    $pdec = $ptotal[11];

---

为什么要将所有这些值填充到单独命名的变量中，而不是将它们放入数组中？对于一个数组，你可以使用
json\u encode
来创建一个JS可以一次“读取”的表示。主要是我试图了解Chart.JS，这是我以前从未使用过的，我想弄清楚什么是有效的，什么是无效的。一旦一切正常，我很可能会切换到数组。使用数组是解决这个问题的一部分，而不需要任何更大的
if
构造。对于
数据
，您需要传递的是一个JavaScript数组，在您当前使用所有单独的命名变量进行操作的地方，它似乎只是一个JavaScript数组，与任何特定月份都没有任何连接，只是一个接一个的24个值。因此，首先在PHP数组中收集24个数据点，然后在JS部分中创建正确输出所需的就是
数据：
我已经将数据粘贴到数组$total中，但在将其输出到接收JS时遇到了问题。所以我可以输出，但它似乎破坏了JS，因为包含了非引号的空值。这到底是个什么问题？JavaScript本身在解析这些代码时应该没有问题。如果您的库不希望接受
null
值，那么这可能是另一个问题-当前的解决方案只能绕过这个问题，因为PHP中null值的
echo
只会导致输出一个空字符串。但您仍然可以自己在该位置循环该数组，以输出双引号内的所有值，而不必使用json_编码。
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Jan <?php echo date("Y") - 1; ?>", "Feb <?php echo date("Y") - 1; ?>", "Mar <?php echo date("Y") - 1; ?>", "Apr <?php echo date("Y") - 1; ?>", "May <?php echo date("Y") - 1; ?>", "Jun <?php echo date("Y") - 1; ?>", "Jul <?php echo date("Y") - 1; ?>", "Aug <?php echo date("Y") - 1; ?>", "Sep <?php echo date("Y") - 1; ?>", "Oct <?php echo date("Y") - 1; ?>", "Nov <?php echo date("Y") - 1; ?>", "Dec <?php echo date("Y") - 1; ?>", "Jan  <?php echo date("Y"); ?>", "Feb <?php echo date("Y"); ?>", "Mar <?php echo date("Y"); ?>", "Apr <?php echo date("Y"); ?>", "May <?php echo date("Y"); ?>", "Jun <?php echo date("Y"); ?>", "Jul <?php echo date("Y"); ?>", "Aug <?php echo date("Y"); ?>", "Sep <?php echo date("Y"); ?>", "Oct <?php echo date("Y"); ?>", "Nov <?php echo date("Y"); ?>", "Dec <?php echo date("Y"); ?>"],
    datasets: [{
      label: "Agreed Funding",
      lineTension: 0.3,
      backgroundColor: "rgba(78, 115, 223, 0.05)",
      borderColor: "rgba(78, 115, 223, 1)",
      pointRadius: 3,
      pointBackgroundColor: "rgba(78, 115, 223, 1)",
      pointBorderColor: "rgba(78, 115, 223, 1)",
      pointHoverRadius: 3,
      pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
      pointHoverBorderColor: "rgba(78, 115, 223, 1)",
      pointHitRadius: 10,
      pointBorderWidth: 2,
          data                : [ "<?php echo $pjan; ?>",
                                  "<?php echo $pfeb; ?>",
                                  "<?php echo $pmar; ?>",
                                  "<?php echo $papr; ?>",
                                  "<?php echo $pmay; ?>",
                                  "<?php echo $pjun; ?>",
                                  "<?php echo $pjul; ?>",
                                  "<?php echo $paug; ?>",
                                  "<?php echo $psep; ?>",
                                  "<?php echo $poct; ?>",
                                  "<?php echo $pnov; ?>",
                                  "<?php echo $pdec; ?>",

                                  "<?php echo $tjan; ?>",
                                  "<?php echo $tfeb; ?>",
                                  "<?php echo $tmar; ?>",
                                  "<?php echo $tapr; ?>",
                                  "<?php echo $tmay; ?>",
                                  "<?php echo $tjun; ?>",
                                  "<?php echo $tjul; ?>",
                                  "<?php echo $taug; ?>",
                                  "<?php echo $tsep; ?>",
                                  "<?php echo $toct; ?>",
                                  "<?php echo $tnov; ?>",
                                  "<?php echo $tdec; ?>"
                                ],
    }],
  },
  options: {
    maintainAspectRatio: false,
    layout: {
      padding: {
        left: 10,
        right: 25,
        top: 25,
        bottom: 0
      }
    },
    scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: true,
          drawBorder: false
        },
        ticks: {
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
        ticks: {
          maxTicksLimit: 5,
          padding: 10,
          // Include a dollar sign in the ticks
          callback: function(value, index, values) {
            return '£' + number_format(value);
          }
        },
        gridLines: {
          color: "rgb(234, 236, 244)",
          zeroLineColor: "rgb(234, 236, 244)",
          drawBorder: false,
          borderDash: [2],
          zeroLineBorderDash: [2]
        }
      }],
    },
    legend: {
      display: false
    },
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      titleMarginBottom: 10,
      titleFontColor: '#6e707e',
      titleFontSize: 14,
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      intersect: false,
      mode: 'index',
      caretPadding: 10,
      callbacks: {
        label: function(tooltipItem, chart) {
          var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
          return datasetLabel + ': £' + number_format(tooltipItem.yLabel);
        }
      }
    }
  }
});