gdhb/WebRoot/pages/charts/main.js

var chart1;
var chart2;
var options1;
var options2;
Highcharts.setOptions( {
	global : {
		useUTC : false
	}
});

options1 = {

	chart : {
		renderTo : 'container1'
	},
	title : {
		text : '风场绩效榜'
	},
	xAxis : [ {
		categories : [ '01号风机', '02号风机', '03号风机', '04号风机', '05号风机' ]
	}, {
		categories : [ '', '', '', '', '' ],
		opposite : true
	} ],
	yAxis : { // Primary yAxis
		min : 0,
		title : {
			text : ''
		}
	},

	legend : {
		align : 'center',
		verticalAlign : 'top',
		margin : 0,
		y : 20,
		reversed : true
	},
	plotOptions : {
		series : {
			stacking : 'normal'
		}
	/*,
	     bar: {
	        dataLabels: {
	            enabled: true
	        }
	    }*/
	},
	series : [ {
		type : 'bar',
		name : '性能损失和误差',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '受累损失',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '限电损失',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '非计划检修损失',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '计划检修损失',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '实发电量',
		yAxis : 0,
		data : [],
		stack : '2'
	}, {
		type : 'bar',
		name : '理论电量',
		yAxis : 0,
		data : [],
		stack : '3'
	}, {
		type : 'line',
		inverted : true,
		xAxis : 1,
		yAxis : 0,
		color : '#000000',
		name : ' ',
		data : []
	} ]
};


options2 = {
		colors: [
					         '#00B259', //绿
					         '#B20000', //红
					         '#006DD9', //蓝
					         '#000000', //黑
					         '#FFBFFF',//藕荷色
					         '#FF8000'//橘黄
					      ],
					chart: {
					    renderTo: 'container2',
					    type: 'spline',
					    //backgroundColor:'#BFDFFF',
					    //plotBackgroundColor:'#BFDFFF',
					    zoomType: 'x',
				        events: {
				        	
				        }
				         },
				         title: {
	            			 text: '风电历史功率'
	        			 },
				         
				         subtitle: {
				             text: ''
				         },
				         xAxis: {
				          		labels: {
				          			align: 'center',
				                	formatter: function() {
				                       return  Highcharts.dateFormat('%H<br/>%M', this.value);
				                	}
				                },
				            type: 'datetime'
				         },
				         yAxis: [{
				             title: {
				                 text: '功率数值(MW)'
				             }
				         },{
				         	title:{
				                text :'风速（m/s）'
				            },
				            labels:{  
					             formatter: function(){  
					                 return this.value;  
					             }  
					         },
				            lineWidth : 1,
				            opposite:true
				          }],
				         legend: {
				             	layout: 'vertical',
				             // backgroundColor: '#FFFFFF',
					            align: 'right',
					            verticalAlign: 'top',
					            floating: true
					       //     shadow: true
				          //   	layout: 'vertical',
				          // 	align: 'right',
				          // 	verticalAlign: 'middle',
				          //	 	borderWidth: 0
				         },
				         tooltip: {
				          	 crosshairs:{//控制十字线  
				              	width:2  
				          	 },
				          	 shared:true,
				          	 xDateFormat:'%Y-%m-%d %H:%M'
				             /*formatter: function() {
				                    return '<b>'+ this.series.name +'</b>：'+
				                    Highcharts.numberFormat(this.y, 2) +' 万kW<br/>时间：'+
				                    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
				             }*/
				         },
				         credits: {
				    		enabled: false
						},
				         plotOptions: {
				         	spline: {
				                  		dataLabels : {  
				                            enabled :false  
				                        },  
				                      // pointPadding: 0.2,
				                       borderWidth: 0
				                  },
				             series: {
				                 cursor: 'pointer',
				                 marker: {
				                     radius: 0, 
				                     symbol: 'circle' //曲线点类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
				                 }
				             }
				         },
				         series: [{
				         	type: 'spline',
				             name: '应发功率(单位：MW)',
				             yAxis:0
				         }, 
				         {
				         	type: 'spline',
				          	 name: '实发功率(单位：MW)',
				          	 yAxis:0
				         }, 
				         {
				         	type: 'spline',
				          	 name: '理论功率(单位：MW)',
				          	 yAxis:0
				         }, 
				         {
				         	type: 'spline',
				          	 name: '预测功率(单位：MW)',
				          	 yAxis:0
				         }, 
				         {
				         	type: 'spline',
				          	 name: '保证功率(单位：MW)',
				          	 yAxis:0
				         },{
				         	type: 'spline',
				          	 name: '平均风速',
				          	 yAxis:1
				         }]
	   };
function getResultInfo(res) {
	if (res["sfdl"] != null) {
		var yfdl = [];
		var sfdl = [];
		var gzdl = [];
		var whdl = [];
		var xddl = [];
		var qfdl = [];
		var sldl = [];
		var names = [];
		var names2 = [];
		$.each(res["names"], function(m, obj) {
			names.push(obj);
		});
		$.each(res["names2"], function(m, obj) {
			names2.push(obj);
		});
		$.each(res["yfdl"], function(m, obj) {
			yfdl.push(parseFloat(obj));
		});
		$.each(res["sfdl"], function(m, obj) {
			sfdl.push(parseFloat(obj));
		});
		$.each(res["gzdl"], function(m, obj) {
			gzdl.push(parseFloat(obj));
		});
		$.each(res["whdl"], function(m, obj) {
			whdl.push(parseFloat(obj));
		});
		$.each(res["xddl"], function(m, obj) {
			xddl.push(parseFloat(obj));
		});
		$.each(res["qfdl"], function(m, obj) {
			qfdl.push(parseFloat(obj));
		});
		$.each(res["sldl"], function(m, obj) {
			sldl.push(parseFloat(obj));
		});

		var num = names.length;

		

		options1.series[0].data = qfdl;
		options1.series[1].data = sldl;
		options1.series[2].data = xddl;
		options1.series[3].data = gzdl;
		options1.series[4].data = whdl;

		options1.series[5].data = sfdl;
		options1.series[6].data = yfdl;
		options1.series[7].data = yfdl;

		options1.xAxis[0].categories = names;
		options1.xAxis[1].categories = names2;
	} else {

		options1.series[0].data = [];
		options1.series[1].data = [];
		options1.series[2].data = [];
		options1.series[3].data = [];
		options1.series[4].data = [];
		options1.series[5].data = [];
		options1.series[6].data = [];
		options1.series[7].data = [];
		options1.xAxis[0].categories = [];
		options1.xAxis[1].categories = [];
	}

	chart1 = new Highcharts.Chart(options1);
}
function historyApdata(){
	
	       
        		
		var url = "historyAjax.action";
		$.ajax({
			url : url,
			type : "post",
			cache : false,
			dataType : "json",
			data : {},
			ifModified : false,
			success : function(result) {
				var yfgl = [];
				var sjgl = [];
				var lvgl = [];
				var ycgl = [];
				var bzgl = [];
				var pjfs = [];
				var xtime=[];
				var index=0;
				var count=0;
				$.each(result, function(m, obj) {
					//if(m == result.length -1){
					if(index<obj.value7){
						index++;
						ycgl.push( parseFloat(obj.value4) );
						
						
					}
					if(count<obj.value8){
						yfgl.push(  parseFloat(obj.value1) );
						sjgl.push( parseFloat(obj.value2) );
						lvgl.push( parseFloat(obj.value3) );
						
						bzgl.push( parseFloat(obj.value5) );
						pjfs.push( parseFloat(obj.value6) );
						count++;
					}

					xtime.push(parseFloat(obj.time));

				});

					options2.series[0].data = yfgl;
					options2.series[1].data = sjgl;
					options2.series[2].data = lvgl;
					options2.series[3].data = ycgl;
					options2.series[4].data = bzgl;
					options2.series[5].data = pjfs;
					options2.xAxis.categories = xtime;
					chart2 = new Highcharts.Chart(options2);
					
			}
		});
}
function queryApDataAll() {

$.ajax({
			url : "queryPowerAll.action",
			type : "post",
			cache : false,
			dataType : "json",
			data : {},
			ifModified : false,
			success : function(result) {
			
				getResultInfo(result);
			}
		});
	 }

$(document).ready(function() {
queryApDataAll();
historyApdata();
showJqGrid1();
showJqGrid2();
});