yuezhonghenyue123 2014-02-28 03:00
浏览 5193

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');            
}    
  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥15 如何用stata画出文献中常见的安慰剂检验图
    • ¥15 c语言链表结构体数据插入
    • ¥40 使用MATLAB解答线性代数问题
    • ¥15 COCOS的问题COCOS的问题
    • ¥15 FPGA-SRIO初始化失败
    • ¥15 MapReduce实现倒排索引失败
    • ¥15 ZABBIX6.0L连接数据库报错,如何解决?(操作系统-centos)
    • ¥15 找一位技术过硬的游戏pj程序员
    • ¥15 matlab生成电测深三层曲线模型代码
    • ¥50 随机森林与房贷信用风险模型