jQuery實現(xiàn)下拉菜單(內(nèi)容為時間)的實時更新及圖表的隨動更新的方法
更新時間:2016年07月07日 09:12:46 作者:Cultivate
這篇文章主要介紹了實現(xiàn)下拉菜單(內(nèi)容為時間)的實時更新及圖表的隨動更新的方法的相關(guān)資料,需要的朋友可以參考下
工程分享:
模塊1:下拉菜單的實時顯示最近一周時間:
//顯示日期下拉選框 for(var i=0;i<7;i++){ $("#choose1>option:eq("+i+")").html(GetDateStr(-i)); $("#choose1>option:eq("+i+")").attr("value",GetDateStr(-i));//該語句為了便于下拉選中的數(shù)據(jù)的值 } //這個是上述的對應(yīng)函數(shù) //以下為日期下拉選擇框自動調(diào)整 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; }
輸出格式為年-月-天
在工程中,實現(xiàn)的是選擇對應(yīng)傳參刷新table值,對應(yīng)內(nèi)容如下:
$("#choose1").bind("change",function(){ var value=$(this).val(); var result={"time":value+" 00:15:00"};//工程刷新時間為凌晨,所以設(shè)置時間格式為延遲15分鐘 //注意,此處的result是將字符串格式化為對象 refreshData(result);//調(diào)用Hcharts繪制函數(shù) }); //對應(yīng)的函數(shù)為: function refreshData(result){ $.ajax({ type: "POST",//請求格式設(shè)置為post類型 url:actionname, dataType:"text", //ajax返回值設(shè)置為text(json格式也可用它返回,可打印出結(jié)果,也可設(shè)置成json) data:result,//此處的result是格式化的傳過來的所選的時間,進而使得action帶時間參數(shù)傳遞 success: function(json){ var obj = $.parseJSON(json); //使用這個方法解析json var xAxisData=new Array();//轉(zhuǎn)換成數(shù)組 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',//類型設(shè)置 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>' + "乙烯生產(chǎn)能效值: "+this.y + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' ; //格式化輸出 } }, plotOptions: {//在這個位置可以設(shè)置比如像折線圖中點的點擊事件 spline: { marker: { enabled: true } }, series:{ cursor:'pointer', point:{ events:{ click: function(){//點擊事件對應(yīng)的函數(shù)實現(xiàn)以及參數(shù)定義 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;//對于個位數(shù),對應(yīng)的十位設(shè)置為0 var action=yy+'-'+mt+'-'+dd+' '+hh+':'+mm+':'+ss; $("#Time_click").html(action); var result={"time":action}; refreshTable(result)//刷新表 } } } }, series:[{ name:meaning, data:AxisData//此處寫入要進行顯示的數(shù)據(jù) }] }); refreshTable(result); } } }); }
以上所述是小編給大家介紹的jQuery實現(xiàn)下拉菜單(內(nèi)容為時間)的實時更新及圖表的隨動更新的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
我們經(jīng)常要使用腳本處理各種業(yè)務(wù)邏輯, 最常見的就是數(shù)組和對象的操作. jQuery工具函數(shù)為我們操作對象和數(shù)組提供了便利條件.2011-02-02jquery實現(xiàn)tab菜單切換內(nèi)容(精簡版demo)
這篇文章主要為大家介紹了jquery實現(xiàn)tab菜單切換內(nèi)容的精簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10