您的位置:首页 > 数据库

Highcharts通过AJAX访问后台数据库实时刷新

2016-11-29 14:00 459 查看
最近项目中要做一个实时人流量的折线统计图,接触了下Highcharts在网上看了很多博客和官方API,总结出一下代码。

$(function () {
var chart = Highcharts.chart('flot-line-chart-moving', {
credits:{
enabled:false // 禁用版权信息
},
title :{
text:"实时人流量"
},
xAxis: {//X轴数据

//categories: json.TimeList,
labels: {
enabled:false   //X轴不显示labels
}
},
yAxis:{
title:{
text:'人数'
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [{
data: [0, 0, 0, 0, 0]  //图表初始化数据
}]
});

function getFrom() {
jQuery.ajax({
url: "*****",
type: "post",
async: false,  //这里务必加上
dataType: "json",
data: { Action: "data", AjaxFllage: true },
success: function (value) {
//添加一个点至图表最后,并使前方点向前挪动
chart.series[0].addPoint(value,true,true,true);
}
});
//chart.series[0].addPoint(1);
}

$(document).ready(function () {
//每隔1秒自动调用方法,实现图表的实时更新
window.setInterval(getFrom, 1000);
});
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  Web ajax
相关文章推荐