Question

修改

我安排了$.each值，我得到了12 undefined values。

所以我认为问题是当我回到数组时，成功函数无法在此处读取：

success:function(resp)
    {
      var costData = [];
      $.each(resp, function( key, row)
      {
        costData.push(row['cost']);
        console.log(row['cost']);
      });
...

结束编辑

我的网页上有一个Chart JS div，可以获得每个月的收入。几个月后，由于我们所做的SQL查询中的错误，我们发现值不正确。但该图表运作良好。我将首先向您展示脚本：

以下是帮助我们获取每月价值的旧PHP脚本：

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');

//Json and PHP header
header('Content-Type: application/json');
$arr = array();
$user = $_SESSION['username'];
$id_logged = $_SESSION['login_id'];



$date1 = $_POST['current_year'];

    $res = array();
    $c = "cash";
    $i = "installment";
    //SUM of cash paid Month
    $sql = "SELECT 
    sum(cost) as cost

FROM 
(
    SELECT 
        sum(project_cost) as cost, 
        month(date_now) as month 
    FROM 
        dentist.patient_info 
    WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt 
    GROUP BY month(date_now)
    UNION
    SELECT 
        sum(payment), 
        month(date_now) 
    FROM 
       debt
    WHERE year(debt.date_now)=:year_now
    UNION SELECT 0,1
    UNION SELECT 0,2
    UNION SELECT 0,3
    UNION SELECT 0,4
    UNION SELECT 0,5
    UNION SELECT 0,6
    UNION SELECT 0,7
    UNION SELECT 0,8
    UNION SELECT 0,9
    UNION SELECT 0,10
    UNION SELECT 0,11
    UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":year_now", $date1);
$exec = $sqlStmt->execute();
$res = $sqlStmt->fetchAll();

echo json_encode($res);

?>

现在，在我们对此脚本进行了一些更改之后，我在XHR上看到了值，但ChartJS停止了工作。这是新脚本：

<?php
//Set error reporting on
error_reporting(E_ALL);
ini_set("display_errors", 1);

//Include connection file
require_once('../include/global.php');

//Json and PHP header
header('Content-Type: application/json');

$user = $_SESSION['username'];
$id_logged = $_SESSION['login_id'];

$date1 = $_POST['current_year'];

$res = array();
$c = "cash";
$i = "installment";
//SUM of cash paid Month
for($i=1; $i<=12; $i++)
{
    $sql = "SELECT 
        sum(project_cost) as cost
    FROM 
        patient_info 
    WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt AND month(date_now)=:month";
    $sqlStmt = $conn->prepare($sql);
    $sqlStmt->bindValue(":logged", $id_logged);
    $sqlStmt->bindValue(":year_now", $date1);
    $sqlStmt->bindValue(":pt", $c);
    $sqlStmt->bindValue(":month", $i);
    $exec = $sqlStmt->execute();
    $sum1 = $sqlStmt->fetchAll();

    $sql2 = "SELECT 
        sum(payment) as cost
    FROM 
       debt
    WHERE id_logged = :logged AND year(date_now)=:year_now AND month(date_now) = :month";
    $sqlStmt = $conn->prepare($sql);
    $sqlStmt->bindValue(":logged", $id_logged);
    $sqlStmt->bindValue(":year_now", $date1);
    $sqlStmt->bindValue(":pt", $c);
    $sqlStmt->bindValue(":month", $i);
    $exec = $sqlStmt->execute();
    $sum2 = $sqlStmt->fetchAll();

    $sum = $sum1 + $sum2;

    $res[$i] = $sum;
}
echo json_encode($res);

?>

以下是控制台的结果：

这是ChartJS的脚本：

$.ajax
  ({
    url: 'stat_income_test.php',
    type: 'POST',
    data: {current_year: y},
    dataType: 'JSON',
    success:function(resp)
    {
      var costData = [];
      $.each(resp, function( key, row)
      {
        costData.push(row['cost']);
      });


        var areaChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"
          , "September", "October", "November", "December"],
          datasets: [
            {
              label: "Cash Income",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: costData
            }
          ]
        };
        var barChartCanvas = $("#barChart").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00c0ef";
        barChartData.datasets[0].strokeColor = "#00c0ef";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true,

          // onAnimationComplete: function () {

          // var barChartData = this.chart.barChartData;
          // barChartData.font = this.scale.font;
          // barChartData.fillStyle = this.scale.textColor
          // barChartData.textAlign = "center";
          // barChartData.textBaseline = "bottom";

          // this.datasets.forEach(function (dataset) {
          //     dataset.bars.forEach(function (bar) {
          //        barChartData.fillText(bar.value, bar.x, bar.y - 5);
          //     });
          //   })
          //}
        };

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      }
  });

ChartJS现在是这样的：

这一年是正确的，这就是我在XHR看到结果但却无法在图表上看到结果的原因。任何帮助表示赞赏。

更改MySQL查询后，无法在图表JS条形图上看到返回的JSON数组

0 个答案: