Highcharts小技巧

//初始化一个图标区域

var chart =  new Highcharts.Chart({

	chart: {
		renderTo:container,
		type: 'spline', //line,
		zoomType:'x',
		events: {
		load: function() {

		//实时刷新数据，并将点绘制到曲线上
			setInterval(function() {
				var tokenUrl = baseUri + 'sensorData/flushSjfxDataList';
				//golbalStationCode 多选框的code的数组
				console.info("定时添加获取到的多选框值",golbalStationCode);
				if(chart != null && chart != undefined ){
				console.info("series.length:",chart.series.length);
				for(var v = 0 ;v < chart.series.length ;v++){// chart.series.length
					var series = chart.series[v];
					console.info("name:",series.name);
					var dataPoints = series.points.length;
					/*console.info("last point:",series.points[dataPoints-1]);
					console.info("last point x:",series.points[dataPoints-1].x);
					console.info("last point y:",series.points[dataPoints-1].y);*/
					$.ajax({
						url: tokenUrl, //controller方法选择
						headers: {
							Content-type': 'application/json;charset=UTF-8'
							}, //传entity对象参数时，规划格式
						type: 'get', //提交方式
						dataType: 'json', //返回数据的类型
						data: {
							code:series.name,
							afterTime:series.points[dataPoints-1].x
							},
						cache: false, //避免Ie，一次执行ajax，从缓存中读取错误信息
						async: false, //设置才ajax同步加载，即后台执行完成后再执行前台
						//成功执行方法
						success: function(response) {
							console.info("曲线刷新response111111",123);
							if(response.state == '0'){
								var datalist = response.data.content;
								console.info("曲线刷新response",datalist.length);
								for(var a = 0 ; a < datalist.length; a++){
									var x = datalist[a].saveTime;
									var y ="";
									if(container == "containerx"){
										y = datalist[a].x;
									}else if(container == "containery"){
										y = datalist[a].y;
									}else if(container == "containerz"){
										y = datalist[a].z;
									}
									console.info("x~y:",container+":::"+x+"---"+y);
									series.addPoint([x, y], true, true);
								}
							}
							/*var x = (new Date()).getTime(), // current time
							 y = Math.random();
							series.addPoint([x, y], true, true);*/
						},
						error: function(XMLHttpRequest, textStatus, errorThrown) {
						console.info("曲线初始化这定时刷新出问题了："+XMLHttpRequest.status + ":" + XMLHttpRequest.statusText);
						}
					});
				}
			}
			}, 1000*60*31);//31分钟定时刷新
		}		
		}
		},
			colors: ['#3c78d8', '#AEEEEE', '#90ed7d', '#f7a35c', '#81E9E4',
				'#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'],//设置曲线生成的颜色，可省略，则颜色随机
			title: {
				text:title
			},
			subtitle: {
				text: '来源: 传感器'
			},
			xAxis: {
				allowDecimals: false,
				type: 'datetime',
				/*maxZoom: 24* 60 * 60 * 1000 *30,
				dateTimeLabelFormats:{
					second: '%H:%M:%S',
					minute: '%H:%M',
					hour: '%H:%M',
					day: '%e. %b',
					week: '%e. %b',
					month: '%b \'%y',
					year: '%Y'
				},*/
				labels: {
					formatter: function () {//初始化x轴时间，对时间进行格式化

						if($("#selectTime").val() == "0"){//最近一天
							var timeCurrent = (new Date(this.value)).format('hh:mm');
							if(timeCurrent=="00:00"){
								timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
							}
						}else if($("#selectTime").val() == "1"){//最近一周
								var timeCurrent = (new Date(this.value)).format('hh:mm');
								if(timeCurrent=="00:00"){
									timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
								}else{
									timeCurrent = (new Date(this.value)).format('YYYY-MM-dd  hh:mm');
								}


							//var timeCurrent = (new Date(this.value)).format('YYYY-MM-dd hh:mm');

						}else if($("#selectTime").val() == "2"){//最近一月
							var timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
						}else{
							var beforeTime11 = (new Date(beforeTime)).format('YYYY-MM-dd hh:mm:ss');
							var afterTime11 =(new Date(afterTime)).format('YYYY-MM-dd hh:mm:ss');
							var m = afterTime11.substr(5,2) -beforeTime11.substr(5,2);
							//console.info("m",m);
							var d = afterTime11.substr(8,2) -beforeTime11.substr(8,2);
							//console.info("d",d);
							if(m<=0){//同一个月
								if(d<=7){//七天天以内
									var timeCurrent = (new Date(this.value)).format('hh:mm');
									if(d>=3){
										if(timeCurrent=="00:00"){
											timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
										}else{
											timeCurrent = (new Date(this.value)).format('YYYY-MM-dd  hh:mm');
										}
									}
									if(timeCurrent=="00:00"){
										timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
									}
								}else{
									var timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
								}
							}else{
								if((d>0 &&d <=7) || (d>-30 && d <=-23)){
									var timeCurrent = (new Date(this.value)).format('hh:mm');
									if(timeCurrent=="00:00"){
										timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
									}
								}else{
									var timeCurrent = (new Date(this.value)).format('YYYY-MM-dd');
								}
							}

						}

						 return  timeCurrent;

					},
					rotation:-30,

				},
				tickPixelInterval:140
			},
			yAxis: {
				title: {
					text: ytitle
				},
				enabled:false,
				labels: {
					formatter: function () {
						return this.value ;
					}
				},
				plotLines: [{
					value: 0,
					width: 0,
					color: '#808080'
				}],
				showFirstLabel: true,
				plotBands: [/*{
						from: 0.275,               // 标示区开始值
						to: 1,                 // 标示区结束值
						color: '#ff0000',            // 标示区背景颜色// 标示区边框颜色
						id: "1",                 // 标示区 id，用于删除等操作
						zIndex:2,              // 标示区层叠，用于调整显示层次

					},
					{
						from: -1,               // 标示区开始值
						to: -0.275,                 // 标示区结束值
						color: '#FCFFC5',            // 标示区背景颜色
						id: "2",                 // 标示区 id，用于删除等操作
						zIndex:1,              // 标示区层叠，用于调整显示层次
					}*/]
			},
			/*tooltip: {
				dateTimeLabelFormats: {
					millisecond: '%H:%M:%S.%L',
					second: '%H:%M:%S',
					minute: '%H:%M',
					hour: '%H:%M',
					day: '%Y-%m-%d',
					week: '%m-%d',
					month: '%Y-%m',
					year: '%Y'
				}
			},*/
			tooltip: {
				headerFormat: '<b>{series.name}</b><br>',//气泡数据的头部
				pointFormat: '采集时间：{point.x:%Y-%m-%d %H:%M:%S}<br/>' +
				'采集数据： {point.y:.2f} '
			},
			legend: {
				layout: 'vertical',
				align: 'right',
				verticalAlign: 'middle',
				borderWidth: 0
			},
			plotOptions: {
				line: {
					pointStart: 1470731639000,
					pointInterval: 1000,
					marker: {
						enabled: false,
						symbol: 'circle',
						radius: 2,
						states: {
							hover: {
								enabled: true
							}
						}
					}
				},
				series: {
					turboThreshold: 200000
				}

			},
			series: []
		});
		var axis = chart.yAxis[0];
		//console.log(plotBandPoints);
		for(var i = 0 ;i < plotBandPoints.length;i++){//循环添加 标示区
			//console.log( 'myAxisPlotBand_'+fag +i);
			axis.addPlotBand({
				id: 'myAxisPlotBand'+fag +i,     // id 用于后续删除用
				from: plotBandPoints[i].from,
				to: plotBandPoints[i].to,
				color:plotBandPoints[i].color
			});
		}
		chartx.addSeries({//添加曲线数据
							id:$scope.names[i],
							name: $scope.names[i],
							data: $scope.entitysfinal[i][j],
							color:colors[i]
						}, true);