我想在我的网页上显示销售和采购图表。用户可以选择类别采购、销售、生产。我有单独的采购和销售表(AccPurchase 和 AccSales)。生产是两者的结合。在该用户可以选择 View 之后，它将是每周的，图表将显示所选月份的每周。每月表示所选一年中所有月份的图表。每年意味着它将按年显示。在所有图表中，我只想显示金额总和。之后还有 2 个下拉菜单可供选择年份和月份。
我要显示图表的页面链接
过去的.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>
过去的.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
最佳答案
有一些问题:
- 如果你想在客户端使用它，你必须从服务器返回 JSON。您的代码未返回有效的 JSON -
['2018-06-09','1500'],['2018-06-10','538900'],它无效。您需要将'替换为"。通常情况下，创建一个对象并将其“字符串化”可能会更好，这样您就可以确保拥有一个有效对象。您可以在此处查看如何执行此操作: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请求有误。不要将值放在 url 中，而应将其作为 JSON 对象数据传递，如下所示:
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)，因此只有在收到响应后才能绘制图表
* As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done()
关于javascript - 使用无法正确显示的动态数据显示谷歌图表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50812873/