Highcharts + jQuery + Servlet 实现从后台获取JSON实时刷新图表

转载 2015年07月10日 10:18:16

效果图如下:


代码很详细,请详细阅读注释,HTML 代码如下:

    <!DOCTYPE HTML>  
    <html>  
          
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=GBK">  
            <title> Highcharts + Ajax + Servlet Demo </title>  
            <script type="text/javascript" src="./jquery.min.js"></script>  
            <script type="text/javascript">  
                $(function() {  
                    $('#container').highcharts({  
                        chart: {  
                            type: 'spline',  
                            marginRight: 150,  
                            marginLeft: 150,  
                            marginBottom: 25,  
                            animation: Highcharts.svg,  
                              
                            events: {  
                                load: function() {  
      
                                    // 若有第3条线,则添加  
                                    // var series_other_property = this.series[2]  
                                    // 并在 series: [] 中添加相应的 (name, data) 对  
                                    var series_cpu = this.series[0];  
                                    var series_mem = this.series[1];  
      
                                    // 定时器,每隔1000ms刷新曲线一次  
                                    setInterval(function() {  
      
                                        // 使用JQuery从后台Servlet获取  
                                        // JSON格式的数据,  
                                        // 如 "{"cpu": 80,"mem": 10}"  
                                        jQuery.getJSON('./SomeServlet?action¶meter', null,  
                                        function(data) {  
      
                                            // 当前时间,为x轴数据  
                                            var x = (new Date()).getTime();  
      
                                            // y轴数据  
                                            var cpu = data.cpu;  
                                            var mem = data.mem;  
      
                                            // 更新曲线数据  
                                            series_cpu.addPoint([x, cpu], true, true);  
                                            series_mem.addPoint([x, mem], true, true);  
                                        });  
                                    },  
                                    1000/*启动间隔,单位ms*/  
                                    );  
                                }  
                            }  
                        },  
                        title: {  
                            text: '使用率(%)',  
                            x: -20  
                        },  
                        xAxis: {  
                            type: 'datetime',  
                            tickPixelInterval: 150  
                        },  
                        yAxis: {  
                            title: {  
                                text: '使用率(%)'  
                            },  
                            plotLines: [{  
                                value: 0,  
                                width: 1,  
                                color: '#808080'  
                            }]  
                        },  
                        tooltip: {  
                            valueSuffix: '%'  
                        },  
                        legend: {  
                            layout: 'vertical',  
                            align: 'right',  
                            verticalAlign: 'top',  
                            x: -10,  
                            y: 100,  
                            borderWidth: 0  
                        },  
                        series: [  
                        // 第1条曲线的(name, data)对  
                        {  
                            name: 'CPU',  
                            data: (function() {  
                                var data = [],  
                                time = (new Date()).getTime(),  
                                i;  
      
                                // 给曲线y值赋初值0  
                                for (i = -9; i <= 0; i++) {  
                                    data.push({  
                                        x: time + i * 1000,  
                                        cpu: 0  
                                    });  
                                }  
                                return data;  
                            })()  
                        },  
      
                        // 第2条曲线的(name, data)对  
                        {  
                            name: '内存',  
                            data: (function() {  
                                var data = [],  
                                time = (new Date()).getTime(),  
                                i;  
      
                                // 给曲线y值赋初值0  
                                for (i = -9; i <= 0; i++) {  
                                    data.push({  
                                        x: time + i * 1000,  
                                        y: 0  
                                    });  
                                }  
                                return data;  
                            })()  
                        },  
                        ]  
                    });  
                });  
            </script>  
            <style>  
                html,body { margin:0px; height:100%; }  
            </style>  
        </head>  
          
        <body>  
            <script src="./Highcharts/js/highcharts.js"></script>  
            <script src="./Highcharts/js/modules/exporting.js"></script>  
            <div id="container" style="min-width: 400px; height: 80%; margin: 0 auto">  
            </div>  
        </body>  
      
    </html>  



相关文章推荐

Highcharts + jQuery + Servlet 实现从后台获取JSON实时刷新图表

不墨迹,直接上代码,亲测可用。
  • zhaizu
  • zhaizu
  • 2013-12-06 17:35
  • 11103

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表...

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

转自:http://bolan392.iteye.com/blog/764163 使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表 博客分类:  ...

使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表

项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表...

jQuery结合highcharts从后台获取json实时刷新图表

项目做了一个报表,可以实时的观察呼叫中心的电话访问量,之前的版本是使用JFreechart做的,使用一段时间后出现内存溢出,服务器的内存使用量会变得很大,所以改用Ajax前台加载数据的方式实现实时报表...

Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

摘要 Highcharts AJAX JSON 实现动态数据交互显示 JQuery 图表 柱形图 主要使用的JQuery AJAX JSON SpringMVC 基于之前的2篇框架添加的新功能 ...

Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

这是第一篇实例的步骤与代码。还有整个项目的结构图。 http://my.oschina.net/xshuai/blog/345117         原创的博文。转载注明出处。大家赶紧收藏吧。...

jQuery+AJAX+JSON+Highcharts 可视化数据实战——实时的温度曲线实战

因为项目需要打算把原来做的比赛的东西,迁移到Angular JS上面,但是发现要熟悉使用起来还需要一段时间,旧的框架就是现有的jQuery+JSON+Highcharts+AJAX。 数据格式如下所示...

在网页上实现实时动态曲线——利用Highcharts控件和JQuery

Web上实现动态曲线 ——实时地从数据库中获取数据,并在网页上实现无刷新显示。        本文利用JavaScript实现,每隔3秒,从数据库中获取一个数据,并在网页上动态显示。并且当用鼠...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)