我是网络编程的新手，这件事就是我的学士学位课程。我正在做一个电能表，我想看到我选择的两个日期之间的测量数据，数据存储在数据库中。我设法通过AJAX将数据从表单传递到读取数据库的PHP文件，并且我成功地将JSON编码数据接收到我的控制台日志中。
问题是图表没有填充任何数据，只显示了一个尴尬的时间范围。
JavaScript - 包含在index.php中，而不是* .js文件
$(document).ready(function() {
$('form.energy_consumption_datepicker').on('submit', function() {
var that = $(this),
url = that.attr('action'),
type = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
$.ajax ({
url: url,
type: type,
data: data,
dataType: "json",
success: function (response) {
console.log(response);
$(function() {
$('#custom_energy_consumption_chart').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'Instantaneous absorbed power'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'kW'
},
labels: {
formatter: function() {
return this.value / 1000; // formatted number for kW
}
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '<b>{point.y} W </b>'
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0).get('rgba')]
]
},
marker: {
enabled: true,
symbol: 'circle',
radius: 3,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
color: '#00d5ff',
type: 'area',
name: 'Watts',
data: response
}]
});
});
$(".custom_energy_consumption").show(350);
}
});
return false;
});
});
index.php - parts
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
.
.
<div class="energyConsumption" style="width: auto; height: 400px; margin: 80px auto auto 80px; display:none;">
<h3 align="left">Choose the period to display the energy consumption</h3>
<form class="energy_consumption_datepicker" action="custom_chart.php" method="post">
<div class="input-control text" id="fromDatepicker">
<input name="fromDate" id="fromDatepicker_input" type="text" data-validate-func="date" data-validate-func="required" data-validate-hint="Please select a date" data-validate-hint-position="bottom">
<span class="input-state-error mif-warning"></span>
<span class="input-state-success mif-checkmark"></span>
<button class="button"><span>From</span></button>
</div>
<div class="input-control text" id="toDatepicker">
<input name="toDate" id="toDatepicker_input" type="text" data-validate-func="date" data-validate-func="required" data-validate-hint="Please select a date" data-validate-hint-position="bottom">
<span class="input-state-error mif-warning"></span>
<span class="input-state-success mif-checkmark"></span>
<button class="button"><span>To</span></button>
</div>
<input type="submit" class="button primary" value="Show">
</form>
<div class="custom_energy_consumption" id="custom_energy_consumption_chart" style="width: auto; height: 400px; margin: 50px auto; display:none"></div>
</div>
custom_chart.php
<?php
$fromDate = $_POST["fromDate"];
$toDate = $_POST["toDate"];
header('Content-Type: application/json');
$servername = "localhost";
.
.
$dbname = "smart_meter";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT EXTRACT(year FROM date) 'year', EXTRACT(month FROM date)-1 'month', EXTRACT(day FROM date) 'day', EXTRACT(hour FROM date) 'hour', EXTRACT(minute FROM date) 'minute', energy FROM energy_data WHERE date BETWEEN '$fromDate' AND '$toDate'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$customPc[] = "[Date.UTC(" . $row["year"] . "," . $row["month"] . "," . $row["day"] . "," . $row["hour"] . "," . $row["minute"] . ")," . $row["energy"] . "]";
}
} else {
echo 0;
}
$conn->close();
echo json_encode(join($customPc, ','));
?>
在控制台日志中收到的数据：
[Date.UTC（2016,2,8,14,35），1534]，[Date.UTC（2016,2,8,14,35），1534]，[Date.UTC（2016,2， 8,14,35），1534]，[Date.UTC（2016,2,8,14,35），1534]， ... [Date.UTC（2016,2,9,18,18），1534]，[Date.UTC（2016,2,9,18,18），1534]，[Date.UTC（2016,2,9,18 ，19），1534]，[Date.UTC（2016,2,9,18,19），1534]
我替换了数据中的响应：响应＆＃39;收到的数据，但写入数据：[这里的控制台数据]＆＃39;而且效果很好。
有没有人知道这里会发生什么？任何建议都会有所帮助。
谢谢！
答案 0 :(得分：1)
问题是不评估JSON中的函数。这意味着您的Date.UTC（）未被触发，因此不会返回时间戳。修复程序是从您的JSON中删除Date.UTC（）并将时间戳放在那里。
在PHP中，您可以使用date函数并将UNIX时间戳乘以1000（转换为javascript时间戳）
答案 1 :(得分：0)
这里有一点太多来检查所有内容，但一个大问题是你发回数据的方式：
while($row = $result->fetch_assoc()) {
$customPc[] = "[Date.UTC(" . $row["year"] . "," . $row["month"] . "," . $row["day"] . "," . $row["hour"] . "," . $row["minute"] . ")," . $row["energy"] . "]";
}
...
echo json_encode(join($customPc, ','));
使用字符串连接和join将导致在"all the data concatenated here"之类的引号中包含一个大字符串。
您需要一个包含所有数据点的实际嵌套数组，因此一个长字符串不会产生对高级图表有用的任何内容。
你应该生成一个嵌套的数组结构并将其作为json发送到你的javascript。类似的东西：
while($row = $result->fetch_assoc()) {
// Add an array with 2 values to your data array
$customPc[] = array(
"Date.UTC(" . $row["year"] . "," . $row["month"] . "," . $row["day"] . "," . $row["hour"] . $row["minute"],
$row["energy"]
);
}
...
// Encode the data array as json
echo json_encode($customPc);
我不确定生成的日期是否会像这样工作，也许您需要直接在php中生成日期本身，但这更接近您的需求。
答案 2 :(得分：0)
我想这是错误的。
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
$customPc[] = "[Date.UTC(" . $row["year"] . "," . $row["month"] . "," . $row["day"] . "," . $row["hour"] . "," . $row["minute"] . ")," . $row["energy"] . "]";
}
} else {
echo 0;
}
试试这个。
if ($result->num_rows > 0) {
// output data of each row
$counter = 0;
while($row = $result->fetch_assoc()) {
$customPc[$counter] = array("year"=>date('Y',strtotime($row["year"])), "month"=>date('F',strtotime($row["month"])),"day"=>$row["day"],"hour"=>$row["hour"], "minute"=>$row["minute"],"energy"=> $row["energy"] );
$counter ++;
}
} else {
echo 0;
}