CPU内存动态监视图页面代码

$(document).ready(function() {
  //设置全局属性
  Highcharts.setOptions({
   global: {
    useUTC: false
   }
  });
  var k = 0;
  var chart;
  $('#container').highcharts({
   chart: {
    //设置背景色
    backgroundColor: {
     linearGradient: {
      x1: 0,
      y1: 0,
      x2: 1,
      y2: 1
     },
     stops: [[0, 'rgb(0, 0, 0)'], [1, 'rgb(0, 0, 0)']]
    },
    //设置放大的方向 可以是x或者y
    zoomType: 'xy',
    //设置绘图区域边框颜色和宽度
    plotBorderColor: '#008800',
    plotBorderWidth: 0,
    shadow: true,
    //设置动画效果
    animation: Highcharts.svg,
    //左边距和右边距
    marginRight: 50,
    marginLeft: 70,
    borderColor: '#008800',
    borderWidth: 1,
    events: {
     load: function() {
      // 图像的折线或者条状图坐标数组，可以有多个
      var series = this.series[0];
      var series1 = this.series[1];
      //highchart内置的定时器，用于动态添加点坐标，这个功能非常好用，如果Amcharts也有这样的功能就好了
      setInterval(function() {
       $.ajax({
        type: "get",
        url: "<%=path%>/getData/getData.do?param=getData",
        dataType: "html",
        data: {},
        success: function(result) {
         var tempData = result.split("_");
         var x = (k++);
         series.addPoint([x, parseFloat(tempData[0])], true, true);
         series1.addPoint([x, parseFloat(tempData[1])], true, true);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
         //alert("出错啦");
        }
       });
      },1000);
     }
    }
   },
   title: {
    text: "CPU/内存使用率监视图",
    style: {
     color: '#FFFFFF',
     font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
    }
   },
   //设置x轴的属性
   xAxis: {
    tickInterval: 10,
    gridLineColor: '#008800',
    gridLineWidth: 1,
    lineWidth: 0,
    labels: {
     step: 1
    },
   },
   yAxis: [{ // Primary yAxis
    gridLineColor: '#008800',
    gridLineWidth: 1,
    min: 0,
    max: 100,
    labels: {
     formatter: function() {
      return this.value + "%";
     },

     style: {
      color: '#FFFFFF'
     }
    },
    title: {
     text: '使用率',
     style: {
      color: '#FFFFFF'
     }
    },
    opposite: false
   }],
   tooltip: {
    shared: false,
    valueDecimals: 0
   },
   legend: {
    enabled: true
   },
   exporting: {
    enabled: false
   },
   plotOptions: {
    area: {
     // pointStart: 1940,
     marker: {
      enabled: false,
      symbol: 'circle',
      radius: 2,
      states: {
       hover: {
        enabled: true
       }
      }
     }
    },
    line: {
     marker: {
      enabled: false,
      symbol: 'circle',
      radius: 1,
      //lineWidth: 15,// 线条粗线
      states: {
       hover: {
        enabled: true
       }
      }
     }
    }
   },

   series: [{
    name: '<b style="color:white">内存使用率</b>',
    type: 'line',
    color: '#FF0000',
    yAxis: 0,
    data: (function() {
     var data = [],time = (new Date()).getTime(),i;

     for (i = -200; i <= 0; i++) {
      data.push({
       x: -1,
       y: 0
      });
     }
     return data;
    })()
   },

   {
    name: '<b style="color:white">CPU使用率</b>',
    type: 'line',
    color: '#0000FF',
    // Y轴对象是一个数组，这里绑定了数组的第一个对象
    yAxis: 0,
    data: (function() {
     // generate an array of random data
     var data = [],time = (new Date()).getTime(),i;

     for (i = -200; i <= 0; i++) {
      data.push({
       x: -1,
       //time + i * 1000,
       y: 0
      });
     }
     return data;
    })()
   }]
  });
 });