码迷,mamicode.com
首页 > 其他好文 > 详细

160422、Highcharts后台获取数据

时间:2016-04-25 12:59:50      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点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

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!