160422、Highcharts后台获取数据

标签：

而我这次做的是趋势图，涉及到动态刷新，做的过程还是花了一番功夫的，也补充和巩固了一点js的知识，为了纪念，把过程记录一下：

首先，是引入HIghcharts绘图相关的js文件和jQuery.js。

接下来，把HIghcharts动态刷新的格式拷贝并作修改：

$(function(){
    $(document).ready(function() {
      Highcharts.setOptions({
        global: {
          useUTC: false//是否使用世界标准时间        }
      });
      var chart;
      chart = new Highcharts.Chart({
        chart: {
          renderTo: ‘container‘,
          type: ‘spline‘,
          marginRight: 10,
          events: {
            load: function() {
               var series = this.series;
               setInterval(function() {
                 var result = reload();
                 var x = result.time;
                 for(var i=0; i<series.length; i++) {
                   var y = result.y[i];
                   series[i].addPoint([x, y], true, true);
                 }
               }, 1000*5);
            }
          }
        },
        title: {
          text: ‘ssssss‘        },
        xAxis: {
          type: ‘datetime‘,
          tickPixelInterval: 150        },
        yAxis: {
          title: {
            text: ‘Value‘          },
          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: {
          layout: ‘vertical‘,
          align: ‘right‘,
          verticalAlign: ‘top‘,
          borderWidth: 0      },
        exporting: {
          enabled: false        },
        series: create()
      });
    });
  });

重点是chart里面的event属性，series属性。注意，此时：series属性是一个js函数的返回值，需用“js函数名()”来取得。

而demo里面，series是这样的：

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++) {									
      data.push({												 
        x: time + i * 1000,									 
        y: Math.random()										
      });														 
    }															   
    return data;													
  })()																
}]

这是死数据，并且只显示一条曲线（或折线）。我们需要得到后台数据，并且x,y的值都需要由后台决定。

create()方法的定义如下：

function create() {    var series = new Array();
        $.ajax({
      type: "POST",
      url: "xxxx/yyyyy.json",
      async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置      success: function(result){
        var channels = result.key;
        var size = channels.length;
        for(var i=0; i<size; i++) {
          var name = channels[i].yyyy;
          var perTotalCnt = channels[i].xxxx;
          var data = function() {
            var data = [],
              time = result.time,
              i;
            for(i=-6; i<=0; i++) {
              data.push({
                x: aaaa,
                y: zzzz
              });
            }
                        return data;
          }();
          series.push({"name": name, "data": data});
        }
      }
    }, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示    alert(series);
        return series;
      }

其中， series.push({"name": name, "data": data});这一行就是在往series数组[]中push数据，从而生成格式中需要的series数组；

而这一部分：

events: {
            load: function() {
               var series = this.series;
  setInterval(function() {
                            	 var result = reload();
                            	 var x = result.time;
                            	 for(var i=0; i<series.length; i++) {
                            		 var y = result.y[i];
                            		 series[i].addPoint([x, y], true, true);
                            	 }
  }, 1000*5);
      }
}

则是每隔一段时间(1000*5=5s)刷新页面数据，并且通过循环生成多条"曲线"。其中reload()也是一个js函数的返回值：注：定义json对象的方法var json = {"key1": value1, "key2":value2} (reload方法就不贴了，也是通过ajax请求后台，得到相应数据并且处理相应数据后，放到一个数据结构或json对象中)。

效果：

画图完毕。 

160422、Highcharts后台获取数据

标签：

原文地址：http://www.cnblogs.com/zrbfree/p/5430368.html