Highcharts+Ajax+Json动态生成报表并且实时刷新

　最近和我的团队开发web管理系统，主要功能就是统计、定位、显示、功能删改、语音、视频通话、图表统计、实时更新。并且结合公司资源，进行机器人的操作。

一、功能页面

 2、机器人导航、实时显示检测数据，动态呈现

二、技术分离

html：

<div id="content" style="display:block"><div id="chart_combo" class="chart_combo"></div></div> 

js:

var chart;

/* 柱状图表数据 */
chart = new Highcharts.Chart({
chart : {
renderTo : 'chart_combo' //关联页面元素div#id
},

title : { //图表标题
text : '变电站室内信息'
},

/* xAxis : { //x轴
categories : [ '变压器1', '变压器2', '变压器3', '变压器4','变压器5','变压器6' ], //X轴类别
labels : {
y : 18
}
//x轴标签位置：距X轴下方18像素
}, */
yAxis : { //y轴
title : {
text : '摄氏度'
}, //y轴标题
lineWidth : 3
//基线宽度
},
tooltip : {
formatter : function() { //格式化鼠标滑向图表数据点时显示的提示框
var s;
if (this.point.name) { // 饼状图
s = '<b>' + this.point.name + '</b> <br>' + this.y
+ '℃(' + twoDecimal(this.percentage)
+ '%)';
} else {
s = '' + this.x +'</b> <br> '+ this.series.name+':'+ + this.y + '';
}
return s;
}
},
labels : { //图表标签
items : [ {
html : '',//温湿度对比
style : {
left : '48px',
top : '8px'
}
} ]
},
exporting : {
enabled : true
//设置导出按钮不可用
},
series : [ { //数据列
type : 'column',
name : '温度',
enabled:true,
data : []
}, {
type : 'column',
name : '湿度',
color : 'rgb(22, 93, 219)',
data : []
}, {
type : 'column',
name : '油温',
color : 'rgb(35, 142, 241)',
data : []
},{
type : 'column',
name : 'PM25',
color : '#6a8f92',
data : []
},
{
type : 'spline',
name : '平均值',
data : []
}/* {
type : 'pie', //饼状图
name : '温湿度对比',
data : [ {
name : '温度',
y : 45.2,
color : '#4572A7'
}, {
name : '湿度',
y : 44,
color : 'rgb(22, 93, 219)'
}, {
name : '油温',
y : 47.7,
color : 'rgb(35, 142, 241)'
} ],
center : [ 100, 80 ], //饼状图坐标
size : 100, //饼状图直径大小
dataLabels : {
enabled : false
//不显示饼状图数据标签
}
} */]
});
/* 柱状图表数据 */
//保留2位小数
function twoDecimal(x) {
var f_x = parseFloat(x);
if (isNaN(f_x)) {
alert('错误的参数');
return false;
}
var f_x = Math.round(x * 100) / 100;
var s_x = f_x.toString();
var pos_decimal = s_x.indexOf('.');
if (pos_decimal < 0) {
pos_decimal = s_x.length;
s_x += '.';
}
while (s_x.length <= pos_decimal + 2) {
s_x += '0';
}
return s_x;
}

//动态获取定时更新数据

/* 接收后台数据*/
function transNums(){
$.ajax({
type:'POST',
url:'web/robotMap',
dataType:'json',
contentType:'application/json',
async:"false",//同步
success:function(data){
var tempArr=[];//温度
var humiArr=[];//定义数组接收所有的类型数值 湿度
var pmArr=[];//pm2.5
var oilArr=[];//油温
for(var i=0;i<data.length;i++){
humiArr.push(parseFloat(data[i].humi));
pmArr.push(parseFloat(data[i].pm));
tempArr.push(parseFloat(data[i].temp));
oilArr.push(parseFloat(data[i].oil));
}
//设置统计数据
var brand_chart = $("#chart_combo").highcharts();
//设置x轴数据
brand_chart.xAxis[0].setCategories(["变压器1", "变压器2", "变压器3", "变压器4", "变压器5","变压器6"]);
chart.series[0].setData(tempArr);//表格温度
chart.series[1].setData(humiArr);//表格湿度
chart.series[2].setData(oilArr);//表格油温
chart.series[3].setData(pmArr);//表格pm25
//计算平均值
var oAver=(tempArr[0]+humiArr[0]+pmArr[0]+oilArr[0])/4;
var tAver=(tempArr[1]+humiArr[1]+pmArr[1]+oilArr[1])/4;
var thAver=(tempArr[2]+humiArr[2]+pmArr[2]+oilArr[2])/4;
var fAver=(tempArr[3]+humiArr[3]+pmArr[3]+oilArr[3])/4;
var fiAver=(tempArr[4]+humiArr[4]+pmArr[4]+oilArr[4])/4;
var sAver=(tempArr[5]+humiArr[5]+pmArr[5]+oilArr[5])/4;
var Aver=[oAver,tAver,thAver,fAver,fiAver,sAver];//建立平均值数组
chart.series[4].setData(Aver);//表格平均值
//检查温度是否超标 >40 超标
for(var t=0;t<tempArr.length;t++){
var tValue=tempArr[t];
var tId=t;
var transId=document.getElementById("trans_img"+tId);
if(tValue>40){
trans_img_shows(transId);
}else{
transId.style.visibility = "visible";

}
}
//检查油温是否超标 >90 超标
/* for(var o=0;o<oilArr.length;o++){
var oValue=oilArr[o];
if(oValue>90){
var oId=o;
var transId=document.getElementById("trans_img"+oId);
trans_img_shows(transId);

}
} */
}
});
}

transNums();
setInterval("transNums()",800);//起个定时器定时刷新

转载于:https://www.cnblogs.com/seanna/p/6402733.html