jQuery实现下拉菜单（内容为时间）的实时更新及图表的随动更新的方法

//显示日期下拉选框for(var i=0;i<7;i++){$("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值} //这个是上述的对应函数//以下为日期下拉选择框自动调整function GetDateStr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = dd.getMonth()+;var d = dd.getDate(); return y+"-"+m+"-"+d;}

$("#choose1").bind("change",function(){var value=$(this).val();var result={"time":value+" 00:15:00"};//工程刷新时间为凌晨，所以设置时间格式为延迟15分钟//注意，此处的result是将字符串格式化为对象refreshData(result);//调用Hcharts绘制函数}); //对应的函数为：function refreshData(result){$.ajax({type: "POST",//请求格式设置为post类型url:actionname,dataType:"text", //ajax返回值设置为text（json格式也可用它返回，可打印出结果，也可设置成json）data:result,//此处的result是格式化的传过来的所选的时间，进而使得action带时间参数传递success: function(json){ var obj = $.parseJSON(json); //使用这个方法解析jsonvar xAxisData=new Array();//转换成数组var yAxisData=new Array();var AxisData=new Array();var str=new Array(),x=new Array();y=new Array();for(var i=0;i<obj.resultData.length;i++){xAxisData[i]=obj.resultData[i].date;yAxisData[i]=obj.resultData[i].value;str=xAxisData[i].split(" ");x=str[0].split("-");y=str[1].split(":");for(var j=0;j<3;j++){x[j]=parseInt(x[j]);y[j]=parseInt(y[j]);}var year=x[0],month=x[1]-1,day=x[2],hour=y[0],minute=y[1],second=y[2];AxisData[i]=[Date.UTC(year,month,day,hour,minute,second),yAxisData[i]];//注意，这里是格式化的时间格式（符合hcharts表的要求）}$('#box').highcharts({chart: {type: 'spline',//类型设置marginBottom:70},title: {margin:10},xAxis: {type: 'datetime',title: {text: '时间',align:'high'},dateTimeLabelFormats:{second:'%Y-%m-%d %H:%M:%S'}},yAxis: {title: {text: '能耗',rotation:0,align:'high'} },tooltip: { formatter: function () { return '<b>' + "乙烯生产能效值: "+this.y + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' ; //格式化输出} }, plotOptions: {//在这个位置可以设置比如像折线图中点的点击事件spline: {marker: {enabled: true}},series:{cursor:'pointer',point:{events:{click:function(){//点击事件对应的函数实现以及参数定义var timee=new Date(this.x);timee.setHours(timee.getHours()-8);//获取AddDayCount天后的日期 var yy = timee.getFullYear(); var mt = timee.getMonth()+1;var dd = timee.getDate();var hh=timee.getHours();var mm=timee.getMinutes();var ss=timee.getSeconds();if(hh<10) hh="0"+hh;if(mm<10) mm="0"+mm;if(ss<10) ss="0"+ss;if(dd<10) dd="0"+dd;if(mt<10) mt="0"+mt;//对于个位数，对应的十位设置为0var action=yy+'-'+mt+'-'+dd+' '+hh+':'+mm+':'+ss;$("#Time_click").html(action); var result={"time":action};refreshTable(result)//刷新表 }}}},series:[{name:meaning,data:AxisData//此处写入要进行显示的数据}]}); refreshTable(result);}}}); }