然后 返回到一般处理程序 ，将转换后的json数据 respon.write，然后 在ajax 的success 获取date 然后 json循环到 highcharts 里的字段
没有源代码，我估计问题产生的原因可能如下两个：一、可能是作图区域大小设定过小。
二、小数位数过长。
解决方法：
一、
源代码中查找：
<divid="container"style="min-width: 后面一段略
位置在源代码的最后几行
大概如下的样子：
<divid="container"style="min-width: 400pxheight: 650pxmargin: 0 auto"></div>
height: 后面的数字改大就行了。多试几次，改一个合适的大小。
二、
源代码中查找：
this.percentage+' %'
改成：
this.percentage.toFixed(2)+' %'
其作用是百分比保留两位小数。toFixed(3)即保留三位小数，具体保留几位自己确定。
Highcharts与Ajax结合实现实时刷新图表——PHP版
参考网址：网页链接
参考官网：网页链接
一、环境及sql
开发语言：php+Jquery
数据库：mysql
数据表结构：
Sql语句：
use testCREATE 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:800pxheight: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)
?>
三、资源下载
百度网盘下载：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）