2 yuezhonghenyue123 yuezhonghenyue123 于 2014.02.28 11:00 提问

ssh+Highcharts如何动态显示,多条折线图?

转换后的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');            
}    
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!