hightchats的使用!

需求:hightcharts跟ajax结合,取出数据并且在hightcharts中进行实时绘制曲线。

1 绘制曲线的js函数:

 $(function(){
		  series_data1  = new Array();
		  series_data2  = new Array();
		  series_data3  = new Array();
		  series_data4  = new Array();  
		  var chart;
		  getDate1();//对series_data1到series_data4进行初始化化,并且将该数据在曲线上进行渲染
		  function getForm(){  
              $.ajax({  
                   type:"Post",  
                   //后台获取数据的函数,注意当对该页面重命名时,  
                    //必须手动更改该选项  
                     url: "/Test16Web/airCondition/selectLastairCondition.action",  
                     contentType:"application/json; charset=utf-8",  
                     dataType:"json",  
                     //成功获取数据  
                     success:function (data){  
                     //console.log(data.tempeture_1);
                     var series1= chart.series[0];
                     var series2 = chart.series[1];
                     var series3 = chart.series[2];
                     var series4 = chart.series[3];
                     var someDate = new Date(Date.parse(data.date));//把字符串类型专程Date类型
           		     var tms=Date.UTC(someDate.getFullYear(), someDate.getMonth(), someDate.getDate(), someDate.getHours(),someDate.getMinutes(),someDate.getSeconds());//进行Date.UTC处理
                     var xt = (new Date()).getTime();
           		     series1.addPoint([xt,parseFloat(data.tempeture_1)],true,false);
                     series2.addPoint([xt,parseFloat(data.tempeture_2)],true,false);
                     series3.addPoint([xt,parseFloat(data.tempeture_3)],true,false);
                     series4.addPoint([xt,parseFloat(data.tempeture_4)],true,false);
                     chart.redraw();
                     },  
                     //显示错误                                         
                     error:function (err){  
                      console.log("error");  
                  }  
               });  
          }   
                //获取后台数据  
                function getDate1(){
                	$.ajax({  
                         type:"Post",  
                         //后台获取数据的函数,注意当对该页面重命名时,  
                          //必须手动更改该选项  
                           url: "/Test16Web/airCondition/selectAllairCondition.action",  
                           contentType:"application/json; charset=utf-8",  
                           dataType:"json",  
                           //成功获取数据  
                           success:function (data){  
                        	   for(var i = 0;i<data.length;i++){
                        		   var someDate = new Date(Date.parse(data[i].date));//把字符串类型专程Date类型
                        		  var tms=Date.UTC(someDate.getFullYear(), someDate.getMonth(), someDate.getDate(), someDate.getHours(),someDate.getMinutes(),someDate.getSeconds());//进行Date.UTC处理
                        		  var xt = (new Date()).getTime();
                        		 series_data1[i]=[someDate.getTime(),parseFloat(data[i].tempeture_1)];
  	                        	 series_data2[i]=[someDate.getTime(),parseFloat(data[i].tempeture_2)];
  	                        	 series_data3[i]=[someDate.getTime(),parseFloat(data[i].tempeture_3)];
  	                        	 series_data4[i]=[someDate.getTime(),parseFloat(data[i].tempeture_4)];
  	                         }
                        	   drawChart();
                           },  
                           //显示错误                                         
                           error:function (err){  
                            alert(err + "调用后台程序出现错误,请尝试刷新!");  
                        }  
                     });  
                }
          function drawChart(){
        	  Highcharts.setOptions({  
                  global: {  
                     useUTC: false  
                          }  
             });  
             //声明报表对象   
             chart = new Highcharts.Chart({   
                 chart:{   
                 //将报表对象渲染到层上   
                 renderTo:'container' ,  
                 defaultSeriesType:'spline'  
             }, //chart end  
             title:{  
                text:'空调实时曲线'         
             }, 
             tooltip:{
            	   formatter:function(){
            	      return'<strong>'+this.series.name+'</strong>'+':'+this.y+'℃'+' '+
            	      Highcharts.dateFormat('%Y-%m-%d %H:%M:%S',this.x);
            	   }
            	},
             yAxis:{  
                 title:{  
                    text:'温度℃'             
                 } ,
                 crosshair: {
						width: 1,
						color: 'blue'
				}
             }, 
             xAxis: {
					type: 'datetime',
					tickPixelInterval: 150,
					labels: {
						rotation: -45, //字体倾斜
						align: 'right',
						step: 1,
						style: {
							font: 'normal 13px 宋体'
						},
						formatter: function() {
							return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
						}
					},
					crosshair: {
						width: 1,
						color: 'green'
				}
				},
             credits: {  
                 enabled: false     //不显示LOGO 
             },
             //设定报表对象的初始数据   
             series:[{  
            	 name:'温度1',
                data:series_data1
             } ,
             {  
            	name:'温度2',
                data:series_data2
             }, {  
            	name:'温度3',
                data:series_data3
             }, {  
            	name:'温度4',
                data:series_data4
             }]  
         });  //Highcharts end 
          }
              $(document).ready(function() {   
                   //每隔3秒自动调用方法,实现图表的实时更新   
                   window.setInterval(getForm,6000);                 
                });     
            });    

其中 获取数据必须跟绘制表格的
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值