你的位置:首页 > Java教程

[Java教程]如何实现下拉菜单(内容为时间)的实时更新,以及图表的随动更新


工程分享:

模块1:下拉菜单的实时显示最近一周时间:

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

在工程中,实现的是选择对应传参刷新table值,对应内容如下:

1 $("#choose1").bind("change",function(){2     var value=$(this).val();3     var result={"time":value+" 00:15:00"};//工程刷新时间为凌晨,所以设置时间格式为延迟15分钟4                        //注意,此处的result是将字符串格式化为对象5       refreshData(result);//调用Hcharts绘制函数6     });
//对应的函数为: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); //使用这个方法解析json        var 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;//对于个位数,对应的十位设置为0                            var action=yy+'-'+mt+'-'+dd+' '+hh+':'+mm+':'+ss;                             $("#Time_click").html(action);                             var result={"time":action};                             refreshTable(result)//刷新表                                                          }                  }                }              },              series:[{                name:meaning,                data:AxisData//此处写入要进行显示的数据              }]            });              refreshTable(result);                       }        }        });     }

 


 


以上是我的分享,与大家共学习!