Highcharts之动态刷新——结合后台数据

【若要转载  请标明出处  http://raising.iteye.com/blog/2214779】

 

最近要求做前台的一些东西，用到了Highcharts。。其实在Highcharts中文网上有相应的演示demo，一般你所需要的图的样式都可以找到。难点在于实际开发中，需要的数据往往是要结合后台请求并响应的数据的。

附Highcharts中文网：

http://www.hcharts.cn/demo/index.php

 

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

 

注意属性：global: {    useUTC: false }是很重要的，对于我们在中国地区使用的系统而言，如果你这个设置为true或者不设置的话，会莫名其妙少了8个小时。因为如果你不设置为false,则是以世界标准时区为准，而由于中国所在时区为+8，所以经过 Highcharts 的处理后会减去8个小时。——这也是会偶尔出现的比较难以发现的问题。。（我就遇到了这个问题，一直在highcharts的dateFormat上找问题，搞了好久才发现这个问题~~~~）

 

 重点是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 ccc = result.key;
				var size = ccc.length;
				for(var i=0; i<size; i++) {
					var name = ccc[i].yyyy;
					var perTotalCnt = ccc[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});
				}
			}
		}); 
		alert(series);
		return series;
		
	}

 

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

注意series是一个json的数组，哪怕你只有一个series,也是一个长度为1的数组。如：

function create() {
		var series = {};
		 series.name = '个数';
    	 series.data =  [{'x':1448887500000,'y':50},{'x':1448887620000,'y':30},{'x':1448887680000,'y':31},{'x':1448887740000,'y':20},{'x':1448887800000,'y':20},{'x':1448887860000,'y':33},{'x':1448887920000,'y':39}];
		 var data = [];
		 data[0] = series;
		 return data;
}

 2）xAxis的tickInterval: 60 * 1000属性，表明x轴的显示间隔为分钟（单位为ms）,前提是你指定xAis的type: 'datetime'，这个属性决定了x轴显示的数据格式，如你指定为1分钟时，显示的是20:45，20.46，20:47等，同时也决定了显示的个数；

3）当你指定xAis的type为datetime时，point的x值是long值的毫秒数，表示从1970年01月01日00:00:00:000至今为止的毫秒数。

4）当出现Highcharts Errors #19的错误时，请检查加载时x轴的点个数是否超过999个（最高限制）；x轴上的两个点的时间间隔是否太大。

 

而这一部分：

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对象中)。

 

 

其实，highcharts绘制chart也是典型的jquery语法·，所以我们取一个已经存在的highcharts对象时，可以直接用$("#divId").highcharts()即可，这符合Highcharts为对象属性赋值和取值的规则~~~~~~~~

 

效果（某一时刻）：

 

画图完毕。

评论

1 楼 Barbossa- 2015-11-27  

大哥 你的 xxxx/yyyyy.json不符合命名规范吧  有没有更完整点的说明啊 求教