jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
工程分享:
模块1:下拉菜单的实时显示最近一周时间:
//显示日期下拉选框 for(vari=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//该语句为了便于下拉选中的数据的值 } //这个是上述的对应函数 //以下为日期下拉选择框自动调整 functionGetDateStr(AddDayCount) { vardd=newDate(); dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 vary=dd.getFullYear(); varm=dd.getMonth()+; vard=dd.getDate(); returny+"-"+m+"-"+d; }
输出格式为年-月-天
在工程中,实现的是选择对应传参刷新table值,对应内容如下:
$("#choose1").bind("change",function(){ varvalue=$(this).val(); varresult={"time":value+"00:15:00"};//工程刷新时间为凌晨,所以设置时间格式为延迟15分钟 //注意,此处的result是将字符串格式化为对象 refreshData(result);//调用Hcharts绘制函数 }); //对应的函数为: functionrefreshData(result){ $.ajax({ type:"POST",//请求格式设置为post类型 url:actionname, dataType:"text",//ajax返回值设置为text(json格式也可用它返回,可打印出结果,也可设置成json) data:result,//此处的result是格式化的传过来的所选的时间,进而使得action带时间参数传递 success:function(json){ varobj=$.parseJSON(json);//使用这个方法解析json varxAxisData=newArray();//转换成数组 varyAxisData=newArray(); varAxisData=newArray(); varstr=newArray(),x=newArray();y=newArray(); for(vari=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(varj=0;j<3;j++) {x[j]=parseInt(x[j]); y[j]=parseInt(y[j]);} varyear=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(){//点击事件对应的函数实现以及参数定义 vartimee=newDate(this.x); timee.setHours(timee.getHours()-8);//获取AddDayCount天后的日期 varyy=timee.getFullYear(); varmt=timee.getMonth()+1; vardd=timee.getDate(); varhh=timee.getHours(); varmm=timee.getMinutes(); varss=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;//对于个位数,对应的十位设置为0 varaction=yy+'-'+mt+'-'+dd+''+hh+':'+mm+':'+ss; $("#Time_click").html(action); varresult={"time":action}; refreshTable(result)//刷新表 } } } }, series:[{ name:meaning, data:AxisData//此处写入要进行显示的数据 }] }); refreshTable(result); } } }); }
以上所述是小编给大家介绍的jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!