Question

我想在我的网页上显示销售和购买图表。用户可以选择购买，销售，生产类别。我有购买和销售的单独表（AccPurchase和AccSales）。而生产是两者的结合。在该用户可以选择视图之后，它将是每周一次，其中图表将按周显示所选月份。每月表示所选年份所有月份的图表。并且每年意味着它将显示年度明智。在所有图表中，我只想显示金额的总和。之后，还有2个下拉选择年份和月份。

想要显示图表的页面的链接

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

past.html

 <head>
    <title>Past Performance Graph</title>
    <link rel="stylesheet" type="text/css" href="css/pastperfomance.css">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<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>
</head>

past.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"], "f"=>$row["SUM(Amount)"]);
}
header('Content-Type: application/json');
echo json_encode($rows);
mysqli_close($con);
?>

我在php脚本中的回显数组出了问题。

此格式可能需要数据 - https://stackoverflow.com/a/15381171/9786296

Answer 1

有一些问题：

如果要在客户端中使用JSON，则必须从服务器返回JSON。您的代码不会返回有效的JSON - ['2018-06-09','1500'],['2018-06-10','538900'],它无效。您需要将'替换为"。通常情况下，创建一个对象并且＆＃34; stringify＆＃34;它，这样你可以确定你有一个有效的对象。您可以在此处查看如何执行此操作：https://stackoverflow.com/a/383664/863110

替换：

while($row = mysqli_fetch_array($exc)){
  echo json_encode("[".$row["Date"].",".$row["SUM(Amount)"]."],");
}

使用：

$rows = array();
while ($row = mysqli_fetch_assoc($exc)) {
  $rows[] = array($row["Date"], $row["Amount"]);
}
echo json_encode($rows);

另一个问题是您发送的post请求错误。您应该将其作为JSON对象数据传递，而不是将值放在url中，如下所示：

var settings = {
  "url": "https://smilestechno.000webhostapp.com/My/php/past.php",
  "method": "POST",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  "data": {
    "category": "Purchase",
    "view": "Weekly",
    "month": "06",
    "year": "2018"
  }
}

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

  var options = {
    chart: {
      title: 'Comparative Analysis',
      subtitle: 'Duration : Jan 2018- Jun 2018',
    }
  };

  var chart = new google.charts.Bar(document.getElementById('graph'));
});

请注意ajax来电是异步的（*不要使用async: false），这样您只有在得到回复后才能绘制图表

*从jQuery 1.8开始，不推荐使用async：false和jqXHR（$ .Deferred）;您必须使用success / error / complete回调选项而不是jqXHR对象的相应方法，例如jqXHR.done（）

^{http://api.jquery.com/jquery.ajax/}

使用无法正确显示的动态数据显示Google图表

1 个答案: