我想在index.php页面上用高图表显示数据。
我该怎么办，这就是我迄今为止尝试的：
我有一个HTML页面：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'San luong Card',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Tong tien'
},
plotLines: [{
value: 0,
width: 1,
color: '#red'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
area: {
stacking: 'high',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
var chart = new Highcharts.Chart(options);
return false;
})
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<form method="post" action="data.php" id="form_search">
<header><h3>Thong ke CCU</h3></header>
<div class="module_content">
<fieldset>
<label>Tu ngay</label>
<input type="text" name="t_n" />
</fieldset>
<fieldset>
<label>Den ngay</label>
<input type="text" name="d_n" />
</fieldset>
<div class="clear"></div>
</div>
<footer>
<div class="submit_link">
<input type="submit" name="s_t" value="Search" id="submit" class="alt_btn">
<input type="reset" name="reset" value="Refesh" >
</div>
</form>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
当我提交值为2的表单时，文本字段数据显示在data.php上，数据类型为JSON。
代码data.php:
if(isset($_POST['s_t'])){
include("../config/dbconnect.php");
$date = new DateTime();
$t_n = strtotime($_POST['t_n']);
$d_n = strtotime($_POST['d_n']);
$tn = date("Y-m-d",$t_n);
$dn = date("Y-m-d",$d_n);
$query = mysql_query("select SUM(ccu) as sumccu,DATE_FORMAT(date,'%d-%m') as day from skycity_log.ccu_log where date >='".$tn."' AND date <='".$dn."' GROUP BY date") or (mysql_error());
$category = array();
$category['name'] = 'DAY';
$series1 = array();
$series1['name'] = 'CCU';
while($r = mysql_fetch_array($query)) {
echo $r['day'];
$category['data'][] = $r['day'];
$series1['data'][] = $r['sumccu'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
}
?>
缺少的部件有：
- 拦截表单提交（例如，通过使用jquery.submit定义obsubmit处理程序）
- 从服务器手动获取JSON数据（例如使用jquery.post）
- 必要时，将接收到的数据转换为Highcharts系列格式
- 使用接收到的数据（文档中当前的代码。就绪处理程序）初始化Highcharts