javascript - 显示数据库中的 Google Chart 未正确显示数据

Question

我正在制作一个管理网络应用程序。我想显示数据库中的销售和购买图表。我正在使用 php 检索数据并使用 ajax 在 html 页面中显示它。图表正在绘制，但问题是数据未正确显示。

这是我页面的链接:

https://smilestechno.000webhostapp.com/My/past.html

您可以通过提供以下输入来尝试 - Categary=Purchase, View=Monthly, Year=2018, Month=Jun

脚本

<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['bar']});

function drawChart() {

     var category = document.getElementById('category');
      var categorySelected = category.options[category.selectedIndex].value;
      var view = document.getElementById('view');
      var viewSelected = view.options[view.selectedIndex].value;
      var month = document.getElementById('month');
      var monthSelected = month.options[month.selectedIndex].value;
      var year = document.getElementById('year');
      var yearSelected = year.options[year.selectedIndex].value;

      var settings = {
    "url": "php/past.php",
    "method": "post",
    "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    },
    "data": {
    "category": categorySelected,
    "view": viewSelected,
    "month": monthSelected,
     "year": yearSelected
     }
    }

    $.ajax(settings).done(function(response) {
var data = google.visualization.arrayToDataTable([
['Month', 'Amount'], response
 ]);

var options = {
chart: {
  title: 'Past Performance Graph',
  subtitle: 'Duration : Jan 2018- Jun 2018',
}
};

var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
}

</script>

PHP

<?php
$category = $_POST["category"];
$view = $_POST["view"];
$month = $_POST["month"];
$year = $_POST["year"];

$con = mysqli_connect("localhost","username","pw","db");

if($category == "Purchase"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase GROUP BY YEAR(Date)";
}
}else if($category == "Sales"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales GROUP BY YEAR(Date)";
}
}

$exc = mysqli_query($con, $sql);
$rows = array();
while ($row = mysqli_fetch_assoc($exc)) {
  $rows[] = array("v"=>$row["Date"], "v"=>$row["SUM(Amount)"]);
}
header('Content-Type: application/json');
echo json_encode($rows);
mysqli_close($con);
?>

我正在寻找解决方案并收到了这篇文章:

How to create DataTable for ColumnChart by JSON object?

我想我需要以这种格式处理数据，但我不知道如何以这种格式从 php 发送数据。

{
"cols": [
    {"id": "date", "label": "date","pattern": "","type": "string"},
    {"id": "newjobs","label": "newjobs","pattern": "","type": "number"}
],
"rows": [
    {"c": [
            {"v": "01-02-2013","f": null},
            {"v": 132,"f": null}
        ]},
    {"c": [
            {"v": "08-02-2013","f": null},
            {"v": 78,"f": null}
        ]},
    {"c": [
            {"v": "15-02-2013","f": null},
            {"v": 105,"f": null}
        ]
    },
    {"c": [
            {"v": "22-02-2013","f": null},
            {"v": 8,"f": null}
        ]}
]
}

Answer 1

首先，让我们在所有的sql语句中给求和计算一个名字...

更改 --> SUM(Amount) -- 到 --> SUM(Amount) as TotalAmount

例如

$sql = "SELECT Date,SUM(Amount) as TotalAmount from AccPurchase WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";

---

接下来，下面的php会创建google数据表格式的json...

$exc = mysqli_query($con, $sql);

$rows = array();
$table = array();

$table['cols'] = array(
  array('label' => 'Month', 'type' => 'string'),
  array('label' => 'Amount', 'type' => 'number')
);

while ($row = mysqli_fetch_assoc($exc)) {
  $data = array();
  $data[] = array("v" => date_format($row["Date"], "Y-m"));
  $data[] = array("v" => $row["TotalAmount"]);
  $rows[] = array('c' => $data);
}

$table['rows'] = $rows;

header('Content-Type: application/json');
echo json_encode($table);
mysqli_close($con);

注意:您可能想要更改日期格式，不确定您在这里需要什么...

$data[] = array("v" => date_format($row["Date"], "Y-m"));

这将为您提供格式 --> 2018-06 -- 6 月...

---

最后，在 JavaScript 中，因为您现在拥有正确的 json 格式，
可以直接新建数据表，不用 --> arrayToDataTable,
像这样……

$.ajax(settings).done(function(response) {

  var data = new google.visualization.DataTable(response);

  var options = {
    chart: {
      title: 'Past Performance Graph',
      subtitle: 'Duration : Jan 2018- Jun 2018',
    }
  };

  var chart = new google.charts.Bar(document.getElementById('graph'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
});