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后台获取数据

最新文章

热门文章