Highcharts曲线图，双曲线图，柱状图动态加载数据

Highcharts曲线图 
 

//页面部分页面代码省略
 <div id="main_id">
                                            <table>
                                                <tr>
                                                    <th id="cpudiv" width="25%;"></th>
                                                    <th id="iodiv" width="25%;"></th>
                                                    <th id="memory" width="25%;"></th>
                                                    <th id="chart" width="25%;"
                                                        style="min-width:400px;height:300px"></th>
                                                </tr>
                                            </table>
                                        </div>

//由于一个页面显示四个图 所以放在一个表格中

  //加载CPU数据 cputimes 多少时间刷新一次
var cpu_series = "";
var tobjCpu ="";
  function cpuLoad(cpu_series, cputimes) {
    var loadData = function () {
      var url = "${path}/home/home_cpu";
      AppKit.postJSON(url, null, function (json) {
        var x = Number(json.data.times);//由于x.y轴只能接受数字 所以记得转换 否则报错
        var y = Number(json.data.overall);
        cpu_series[0].addPoint([x, y], true, true);//给x,y赋值
      });
    }
    tobjCpu = setInterval(loadData, cputimes);//定义刷新时间 如果需要关闭
  }
clearInterval(cpu_series);//关闭动态刷新
// 静态单曲线图
function cpu() {
    var htmlStr = "<div id='chart1' />";
    $("#cpudiv").append(htmlStr);
    $('#chart1').highcharts({
      chart: {
        type: 'spline',
        events: {
          load: function () {
            cpu_series = this.series;//把series作为全局变量 方便后台加载数据
          }
        }
      },
      title: {
        text: 'CPU处理效率'
      },
      plotOptions: {//数据列此处为曲线上面的点数据显示
        spline: {
          dataLabels: {
            enabled: true,
            format:'{y:.4f}',//值小数点后四位
            rotation: 45,//倾斜45°
            allowOverlap :true
          },
          showInLegend: true,
        }
      },
      xAxis: {
        title: {
          text: '当前时间'
        },
        type: 'datetime',
        tickPixelInterval: 75
      },
      yAxis: {
        title: {
          text: 'CPU处理效率'
        }
      },
      tooltip: {//辞职鼠标移动加载数据
        formatter: function () {
          return '当前时间:' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              'CPU处理效率:' + Highcharts.numberFormat(this.y, 4);
        }
      },
//legend: { 如果加上这个参数 曲线名称不能显示
        //enabled: false
     // },
      exporting: {
        enabled: false
      },
      series: [{//默认加载5个点如果不加载好像会报错 
        name: 'CPU占用率',
        data: (function () {
          var data = [];
          var time = (new Date()).getTime();
          for (var i = 0; i < 5; i++) {
            data.push({
              x: time,
              y: 0
            });
          }
          return data;
        }())
      }]
    });
  }

Highcharts双曲线图 

/...和前面的CPU一样
  //加载IO数据
var io_series="";
var tobjIo ="";
  function ioLoad(io_series, iotimes) {
    var loadData = function () {
      var url = "${path}/home/home_io";
      AppKit.postJSON(url, null, function (json) {
        for (var i = 0; i < io_series.length; i++) {//判断有几条数据循环几次
          var time = Number(json.data.times);//时间
          var writeY = Number(json.data.writes);//写入速度
          var readsY = Number(json.data.reads);//读取速度
          if (i == 0) {//
            io_series[i].addPoint([time, writeY], true, true);//给第一条数据赋值
          } else {
            io_series[i].addPoint([time, readsY], true, true);//给第二天调数据赋值
          }
        }
      });
    }
    tobjIo = setInterval(loadData, iotimes);//刷新数据
  }
clearInterval(tobjIo);//关闭刷新

//双曲线图
 function io() {
    var htmlStr = "<div id='chart2' />";
    $("#iodiv").append(htmlStr);
    $('#chart2').highcharts({
      chart: {
        type: 'spline',
        renderTo: 'chart2',
        marginRight: 10,
        events: {
          load: function () {
            io_series = this.series;
          }
        }
      },

      title: {
        text: '数据盘IO读写速度'
      },
      xAxis: {
        title: {
          text: '当前时间'
        },
        type: 'datetime',
        tickPixelInterval: 75
      },
      plotOptions: {//数据列
        spline: {
          dataLabels: {
            enabled: true,
            format:'{y:.2f}',
            rotation: 45,
            allowOverlap :true
          },
          showInLegend: true,
        }
      },
      yAxis: {
        title: {
          text: '读写速度'
        },
        labels: {
          formatter: function () {
            return this.value + '/kb';
          }
        }
      },
      tooltip: {
        formatter: function () {
          return '当前时间:' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
              this.series.name+":" + Highcharts.numberFormat(this.y, 2) + 'kb/s';
        }
      },
      exporting: {
        enabled: false
      },
      series: [{
        name: '读取数据',
        data: (function () {
          var data = [];
          var time = (new Date()).getTime();
          for (var i = 0; i < 5; i++) {
            data.push({
              x: time,
              y: 0
            });
          }
          return data;
        }())
      }, {
        name: '写入数据',
        data: (function () {
          var data = [];
          var time = (new Date()).getTime();
          for (var i = 0; i < 5; i++) {
            data.push({
              x: time,
              y: 0
            });
          }
          return data;
        }())
      }]
    });

  }

Highcharts 柱状图

var  memory_series ="";
var tobjMemory ="";
  //加载内存数据
  function memoryLoad(memory_series, memory_times) {
    var loadData = function () {
      var urls = "${path}/home/home_memory";
      AppKit.postJSON(urls, null, function (json) {
        var datas = [];
        datas.push({y: Number(json.data.overall / 1024), color: 'green', name: '总内存'});
        datas.push({y: Number(json.data.remaining / 1024), color: '#b47095', name: '使用内存'});
        datas.push({y: Number(json.data.employ / 1024), color: '#2ab4ac', name: '剩余内存'});
        memory_series[0].setData(datas);
      });
    }
    tobjMemory = setInterval(loadData, memory_times);
  }


//处理内存图
  function memory() {
    var htmlStr = "<div id='chart3' />";
    $("#memory").append(htmlStr);
    $('#chart3').highcharts({
      chart: {
        type: 'column',
        events: {
          load: function () {
            memory_series = this.series;
          }
        }
      },
      tooltip: {
        formatter: function () {
          return this.x + ':' + Highcharts.numberFormat(this.y, 0) + ' M';
        }
      },
      plotOptions: {//数据列
        column: {
          dataLabels: {
            enabled: true,
            format:'{y:.0f} M'
          },
          showInLegend: true,
        }
      },
      title: {
        text: '总体内存'
      },
      xAxis: {
        categories: ['总内存', '使用内存', '剩余内存']
      },
      yAxis: {
        title: {
          text: '内存使用情况'
        },
        labels: {
          formatter: function () {
            return this.value + '/M';
          }
        }
      },
      legend: {
        enabled: false
      },
      series: [{
        data: [0, 0, 0]
      }]
    });
  }