【发布时间】：2016-03-09 19:57:27
【问题描述】：
我是网络编程的新手，这里的东西是为我的学士学位项目准备的。我正在做一个电能表，我想查看我选择的两个日期之间的测量数据，这些数据存储在数据库中。我设法通过 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 - 部分
<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],[日期.UTC(2016,2,9,18,19),1534]
我将“数据：响应”中的响应替换为接收到的数据，但写入“数据：[此处的控制台数据]”，效果很好。
有人知道这里会发生什么吗？任何建议都会有所帮助。
谢谢！
【问题讨论】：
标签： php mysql ajax highcharts