集群监控之web端动态的显示数据（highchart）

来源：互联网发布：java float 精度编辑：程序博客网时间：2024/06/08 14:09

集群监控做到今天，基本的功能已经实现了80%,还有一个监控报警没有做。和大型的监控例如zabbix，nagios相比，我做的监控的在某些细节方面还存在一些改进。
今天运用了highchart对从agent返回的数据在前端进行了动态的展示，不得不说，highchart是一个非常好的工具，提供了动态图，静态图，各种饼图，柱状图等各种图形，在我的监控项目中我采用了动态图展示cpu的负载，运用ajax的方式，动态的访问监控的api接口，在接口中我通过调取数据库在把数据返回给前端。
前端highchart的主要代码如下

     $(function () {    $(document).ready(function () {        Highcharts.setOptions({            global: {                useUTC: false            }        });        $('#container2').highcharts({            chart: {                type: 'spline',                animation: Highcharts.svg, // don't animate in old IE                marginRight: 10,                events: {                    load: function () {                        // set up the updating of the chart each second                        var series = this.series[0];                        setInterval(function () {                            var x = (new Date()).getTime(), // current time                            y=window.highchar_y                            series.addPoint([x,y], true, true);                        }, 1000);                    }                }            },            title: {                text: '{{hostname}}节点cpu负载'            },            xAxis: {                type: 'datetime',                tickPixelInterval: 150            },            yAxis: {                title: {                    text: '负载值'                },                plotLines: [{                    value: 0,                    width: 1,                    color: '#808080'                }]            },            tooltip: {                formatter: function () {                    return '<b>' + this.series.name + '</b><br/>' +                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +                        Highcharts.numberFormat(this.y, 2);                }            },            legend: {                enabled: false            },            exporting: {                enabled: false            },            series: [{                name: 'Random data',                data: (function () {                    // generate an array of random data                    var data = [],                        time = (new Date()).getTime(),                        i;                    for (i = -19; i <= 0; i += 1) {                        data.push({                            x: time + i * 1000,                            y: Math.random()                        });                    }                    return data;                }())            }]        });    });});

采用了定时器，里面执行ajax，代码如下：

setInterval('going3()',2000);    window.highchar_y=0;    function going3()    {              $.ajax(              {                url:'/app02/highchart2/{{hostname}}',                type:'POST',                async:false,                success:function(callback)                {                callback=jQuery.parseJSON(callback);                window.highchar_y=callback;                //console.log(window.highchar_y)                }              });    }

遇到一个问题。我用ajax在里面给一个全局变量赋值，结果死活赋值不了，纠结了好半天，后天上网查了查，才知道，ajax默认是异步请求（当要赋值时，此时的值没有拿到，所以赋值不成功）如果要在ajax({里面给全局变量赋值，需要改为同步操作，即加上async : false，就可以了。

0 0