Hightcharts之实时曲线图

//container3为js中定义的图表渲染容器的 HTML 元素的 id 或对象引用
 <div id="container3" style="width:380px;height:230px;margin:0 auto;padding-top: 10px"> 
 </div>

/**
 * 
 */
$(function(){
	Highcharts.setOptions({
	//全局配置参数是针对所有 Highcharts 图表生效的配置，所以只能通过 Highcharts.setOption 函数来配置
		global:{
			useUTC:false     //默认true
	/*使用UTC的优点是，无论用户代理的时区设置如何，时间都显示得一样。当实时加载数据或需要正确的夏令时转换时，可以使用本地时间*/
		}
	});
	//更新曲线上的点
function activeLastPointToolip(chart) {
		var points = chart.series[0].points;
		chart.tooltip.refresh(points[points.length -1]);
	}

var chars;
$(document).ready(function(){
	var options = {
//			图表定义
			chart:{
				backgroundColor:'transparent',		//背景色
				renderTo: 'container3',//图表渲染容器的 HTML 元素的 id 或对象引用
				type:'spline',  				//曲线，修改spline可改为饼图等其他图表
				marginRight:10,
				events:{
					//图表加载完成时触发
					load:function(){
						var series = this.series[0];
						options = this;
						activeLastPointToolip(options);
						var t = 0;
						var r = 0;
						//ajax请求，获取后台数据
						$.ajax({
							url:'/Software-cup001/Current',			//获取数据的页面地址
							
							//默认值: true，dataType 为 script 和 json时默认为 false。设置为 false 将不缓存此页面。
							cache:false,
							dataType:"json",
							data:{},
							//仅在服务器数据改变时获取新数据。默认值: false
							ifModified:false,
							//获取数据成功，将数据放入result
							success: function(result){
								t = result.length;   //获取到的数据的长度
							}
							
						});
						//定时器，每秒钟获取一次数据
						setInterval(function(){
						$.ajax({
							url:'/Software-cup001/Current',
							
							//默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。
							cache:false,
							dataType:"json",
							data:{},
							//仅在服务器数据改变时获取新数据。默认值: false
							ifModified:false,
							success: function(result){
									
								if(r>result.length){
									t=result.length;
									
								}
								//保证每次取数据都是从上次所取数据的后一个数据
								//ajax每次取数据都是从头开始获取
								r=result.length;
								for(;t<result.length;t++){	
									if(result[t].site=="校园大门"){
										var x = (new Date()).getTime();
										//将符合的数据加入曲线图表
										series.addPoint([x,result[t].headnum],true,true);
										activeLastPointToolip(options);
										}													
								}
//								});
							}
						});	
						},1000);
					}
				}
			},
			colors:['#64E572'],   //曲线颜色
			title:{      
			//标题名称    
              text: '',
               //标题相对于水平对齐的偏移量，取值范围为：图表左边距到图表右边距，可以是负值，单位px
              x:-20
          },
          /*x轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调*/
          xAxis:{
        	  type:'datetime',			//x轴类型，时间型
        	  tickPixelInterval: 100, 			//决定了刻度之间间隔的像素值
          },
          //y轴，y轴的数据值最小为0
          yAxis: {
        	  startOnTick:true,  //为true时，设置min生效
        	  min:0,
              //y轴标题
              title: {
                  text: '数值',
                  
              },
              //标示线
              plotLines:[{
                  color:'red',           //线的颜色，定义为红色
                  dashStyle:'solid',     //默认值，这里定义为实线
                  value:3,               //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
                  width:2,                //标示线的宽度，2px
                  label:{
                      text:'标准人数：3人',     //标签的内容
                      align:'left',                //标签的水平位置，水平居左,默认是水平居中center
                      x:10,                         //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
                      style:{
                      color:'white',		//文字颜色
                      }
                  }
              }]
          },
          //图例，图例说明是包含图表中数列标志和名称的容器
          legend:{
        	  align:'center',
        		  floating:false,
        		  borderWidth:0,
        		 itemStyle:{
        			 color:'#FFDAB9'
        		 }
          },
          //数据提示框，显示每个点的含义（对应的x轴和y轴数据）
          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, 0);
                }
          }, 
          //版权信息
          credits:{
        	  enabled:false    //版权信息不可见
          },
        //数据点信息
        plotOptions: {
            series: { 	
                marker: {
                    enabled: false, /*数据点是否显示，不显示则为一条线*/
                    radius: 5,  /*数据点大小px*/

                    //fillColor:'#ff3300'         /*数据点颜色*/
                },
            },
       
          
        },
        //数据列
        series:[{
        	name:'校园大门人流量'	,
        	//20个伪数据
        	data: (function () {
    			// 生成随机值
    			var data = [],
    				time = (new Date()).getTime(),
    				i;
    			for (i = -19; i <= 0; i += 1) {
    				data.push({
    					x: time + i * 1000,
    					y: Math.random()*10+3
    				});
    			}
    			return data;
    		}())
        }]
	};
	
	
	chart = new Highcharts.Chart(options);
});
});