转换后的JSON字符串:{"x":1393555496625,"y":[{"data":[4.5],"name":"上传流量"},{"data":[3.9],"name":"下载流量"}]}
jsp页面中:
Highcharts.setOptions({
global: {
useUTC: false
}
});
chartCPU = new Highcharts.Chart({
chart: {
renderTo: 'container', //图表放置的容器,DIV
defaultSeriesType: 'spline', //图表类型为曲线图
/* events: {
load: function() {
var series = this.series[0];
//每秒钟,图表更新一次,y数据值在0-100之间的随机数
setInterval(function() {
var x = (new Date()).getTime(); // 当前时间
//y = Math.random()*100;
//y = this.y;
//alert(point.y);
//series.addPoint([x, y], true, true);
series.addPoint([x], true);
},
1000);
}
} */
marginRight: 10
},
colors: [
'#ff0000'
],
title: {
text: '实时流量走势图' //图表标题
},
xAxis: { //设置X轴
title: {
text: '时间'
},
type: 'datetime', //X轴为日期时间类型
tickPixelInterval: 150 //X轴标签间隔
},
yAxis: { //设置Y轴
//title: '使用率',
title: {
text: '流量值'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
//max: 100, //Y轴最大值
min: 0 //Y轴最小值
},
tooltip: {//当鼠标悬置数据点时的提示框
formatter: function() { //格式化提示信息
return '流量瞬时值'+ '
'+
Highcharts.dateFormat('%H:%M:%S', this.x) +'
'+
Highcharts.numberFormat(this.y, 2)+'%';
}
},
legend: {
enabled: false //设置图例不可见
},
exporting: {
enabled: false //设置导出按钮不可用
},
series: [{
data: (function() { //设置默认数据,
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: 0
});
}
return data;
})()
}]
});
setInterval(getflux, 1000);
});
function getflux(){
$.post(sy.contextPath + '/fluxcount/currentflux!current.sy', function(data) {
//这里的x(时间) 格式要是毫秒式13位
var result = {"x":data.x,"y":data.y};
var series = chartCPU.series[0];
var x = result.x; // current time
var y = result.y;
series.addPoint([x, y], true, true);
parent.$.messager.progress('close');
}, 'json');
}