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

最新推荐文章于 2017-02-15 18:28:00 发布

陈蒙_

最新推荐文章于 2017-02-15 18:28:00 发布

阅读量1.3w

点赞数 3

分类专栏： Java 编程文章标签： Highcharts jquery servlet 实时多条曲线

本文为博主原创文章，欢迎转载，请保留原文出处。

本文链接：https://blog.csdn.net/zhaizu/article/details/17170555

版权

Java 编程专栏收录该内容

26 篇文章 0 订阅

订阅专栏

效果图如下：

代码很详细，请详细阅读注释，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&parameter', 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>

—————————————————————————————————————————————————————————————————————

这是本人正在维护的一个关于眼睛护理的微信公众账号，专注IT白领人群，免费发布实用有趣的护眼知识，欢迎关注。