Highcharts與Ajax結合實現實時刷新圖表——PHP版
參考網址：網頁鏈接
參考官網：網頁鏈接
壹、環境及sql
開發語言：php+Jquery
數據庫：mysql
數據表結構：
Sql語句：
use?test;CREATE?TABLE?`test`?(
`id`?int(11)?NOT?NULL?AUTO_INCREMENT, `datetime`?char(10)?NOT?NULL, `data`?double?DEFAULT?NULL, PRIMARY?KEY?(`id`))?ENGINE=InnoDB?AUTO_INCREMENT=31?DEFAULT?CHARSET=latin1;
insert?into?test?(datetime,data)?values?
('2013-10-01',20.5),('2013-10-02',23.7),('2013-10-03',22.4),('2013-10-04',29.0),('2013-10-05',22.2),
('2013-10-06',22.6),('2013-10-07',26.9),('2013-10-08',28.0),('2013-10-09',24.1),('2013-10-10',27.1),
('2013-10-11',23.6),('2013-10-12',28.8),('2013-10-13',22.4),('2013-10-14',23.6),('2013-10-15',24.2),
('2013-10-16',22.6),('2013-10-17',26.2),('2013-10-18',28.2),('2013-10-19',21.7),('2013-10-20',25.2),
('2013-10-21',25.0),('2013-10-22',21.6),('2013-10-23',25.7),('2013-10-24',21.7),('2013-10-25',22.2),
('2013-10-26',25.6),('2013-10-27',26.2),('2013-10-28',26.0),('2013-10-29',23.2),('2013-10-30',22.4);
二、基本思路及代碼
基本思路
文件結構（後面下載可獲取）
主要代碼：
1、test.html
<!DOCTYPE?HTML>
<html>
<head>
<title>Test</title>
<meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8"?/>
<script?type="text/javascript"?src="js/jquery-1.8.3.min.js"></script>
<script?type="text/javascript"?src="js/highcharts.js"></script>
<script>
//圖表屬性，不包含數據
var?options?=?{
chart:?{
renderTo:?'container',
type:?'spline',
},
title:?{
text:?'實時溫度曲線',
x:?-20?//center
},
xAxis:?{},
yAxis:?{
title:?{
text:?'Temperature?(°C)'
},
plotLines:?[{
value:?0,
width:?1,
color:?'#808080'
}]
},
series:?[{
name:?'溫度',
}],
tooltip:?{
valueSuffix:?'°C'
},
plotOptions:?{
spline:?{
dataLabels:?{
enabled:?true
},
animation:?false,
},
},
};
//初始函數，設置定時器，定時取數據
$(function()?{
queryData(0);
var?i?=?0;
var?timer?=?setInterval(function()?{
i++;
if?(i?>=?3)?{
i?=?0;
}
queryData(i);
},?3000);
//停止刷新
$("button").click(function()?{
clearInterval(timer);
});
});
var?categories?=?[];
var?datas?=?[];
//Ajax?獲取數據並解析創建Highcharts圖表
function?queryData(index)?{
$.ajax({
url:?'getDatas.php?index='?+?index,
type:?'get',
dataType:?"json",
success:?function(data)?{
$.each(data,?function(i,?n)?{
categories[i]?=?n[1];
datas[i]?=?n[2]?*?1;
});
options.xAxis.categories?=?categories;
options.series[0].data?=?datas;
chart?=?new?Highcharts.Chart(options);
}
});
}
</script>
</head>
<body>
<div?id="container"?style="min-width:800px;height:400px;"></div>
<p?align=center>
<button>停止刷新</button>
</p>
</body>
</html>
復制代碼
2、getDatas.php
<?php
$db_name?=?"test";
$db_host?=?"localhost";
$db_user?=?"root";
$db_pass?=?"root";
$index?=?0;
if(isset($_GET['index']))?{
$index?=?(int)$_GET['index'];
}?
$link?=?mysql_connect($db_host,$db_user,$db_pass)?or?die("Can't?connect?DB");
$db?=?mysql_select_db($db_name);
mysql_query("set?names?utf8");
$result?=mysql_fetch_row(mysql_query("select?count(*)?from?test"));
$pages?=?((int)($result[0]))/10;
if($index?>?($pages-1))?{
$index?=?($pages-1);
}
$select?=?"select?*?from?test?limit?".($index*10).",10";
$result?=?mysql_query($select);
$datas?=?array();
while($row?=?mysql_fetch_row($result))?{
$datas[]?=?$row;
}
echo?json_encode($datas);
>三、資源下載?
百度網盤下載：