模拟动态实时数据图，一直想弄这么个东西，感觉很酷的样子，但又没有时间去弄。最近承接了个项目，要用到价格自动实时波动，但又得是数据库中的数据，所以花了点时间做了这么个玩意，当然不足就是数据变化不平滑，也懒得再继续研究了。分享给大家看看。
技术主要用到 php Highcharts stcok ajax请求，
技术点：
1 如何写入数据？因为数据是从数据库提前写入的，不可能后台添加大量数据，所以做了个任务，每1秒执行一次写入模拟数据。
2 如何实时拉取数 采用了ajax定时调用 当然我只是用到实时拉取一个实时的价格数据
3 如何生成动态图，采用了highcharts 这个还是很好用的
4核心代码
Highcharts.stockChart(‘container’, {
chart : {
backgroundColor:’#000′,
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
$datashow=array();
$sqljs = “select * FROM ” . $GLOBALS[‘ecs’]->table(“qushi”) . ” order by id asc “;
$rowjs=$db->getAll($sqljs);
foreach($rowjs as $k=>$v){
$datashow[$k]=array(‘y’=>round(floatval($v[“ndata”]),4),’label’=>$v[“ndate”]*1000);
}
$sqljs1 = “select ndata,ndate FROM ” . $GLOBALS[‘ecs’]->table(“qushi”) . ” order by id desc limit 1 “;
$rowjs1=$db->getRow($sqljs1);
// print_r($datashow);
$dd=$rowjs1[“ndate”];
?>
var x =time = (new Date()).getTime(), // current time
y = newprice;
series.addPoint([x, y], true, true);
//alert(y);
}, 3000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: ‘minute’,
text: ‘1M’
}, {
count: 5,
type: ‘minute’,
text: ‘5M’
}, {
type: ‘all’,
text: ‘All’
}],
inputEnabled: false,
selected: 0
},
title : {
text : ‘TLINK Price’,
style:{color: ‘#fff’,
fontSize: ’16px’}
},
tooltip: {
split:true
},
exporting: {
enabled: false
},
series : [{
name : ‘USDT’,
data : (function () {
// generate an array of random data
var data = [], time = (new Date()).getTime(), i;
if($datashow[$i][label]!=0){
?>
data.push([
echo $datashow[$i][‘label’];
?>,
]);
}
}?>
console.log(data)
return data;
}())
}]
});
最后的效果图：
