highCharts動態取值之單折線圖

自由的刺蝟發表於2016-04-13

     一般專案中做統計功能的時候會用圖表的的形式展示,我在專案中繪製圖表使用的是HighCharts,官網API:HighCharts中文網  ,官網上呢,關於highcharts的使用方法講的很詳細,還有案例可以看。但是,大都是些靜態資料,在這裡主要總結下通過ajax動態取值展示資料的案例:

      假設有這樣一個場景:學校一個貼吧,有一個使用者表,欄位如下(隨便說幾個):loginTime(登入時間),userId(使用者ID),outTime(退出時間)。 有這樣一個需求:統計某一時間段

內使用者登入(上網)數量。前臺頁面佈局如下:

日曆控制元件的程式碼就不貼上了,用的是My97DatePicker ,需要用的可以去網上下載下js檔案,然後查詢下用法即可,下載連結日曆控制元件js  然後頁面上還需要提前設定好畫布(其實就是折線圖顯示的地方),如下即可:

<div id="container" style="min-width:700px;height:400px;"></div>
然後就是取值的問題了,js程式碼如下:

 var timeArray = new Array();
 var step;
 var chart;
 var series = [];
 var titleY = "";
 $(function(){
   reDrawLine(0);
 });

 //單擊事件,根據傳的引數重新畫圖
  function reDrawLine(id){
    timeArray = new Array();
    step = 0;
    series = [];
    getDatas(id);
    chart = null;
    drawLine();
  }
  //獲取資料
  function getDatas(id){
       var startTime = $("#startTime").val();  //頁面上設定好的日曆控制元件  開始時間  id為startTime
       var endTime = $("#endTime").val();	  
       $.ajax({
	   type:'POST',
	   url:'<%=basePath%>userlog/userlog!getOnlineNumbers.action',
	      data:{
		 'formInfo.startTime':startTime,
		 'formInfo.endTime':endTime
	      },
	      cache : false,
	      async : false,
	      dataType : 'JSON',
	      success : function(data){
			  var countArray = new Array();
			  var resultDate = data;
			  var count = "";
			  if(resultDate != null){
				  for(var j=0;j<resultDate.length;j++){
					  timeArray.push(resultDate[j].clientTimeStr);
					  countArray.push(resultDate[j].vcount);
				  } //for
				  series[0] = {
					 name: nameValue,
				     marker: {
				         symbol: 'circle'
				     },
				     data: countArray 
				  };
			  } //if
		  } //function
	  }); //ajax
	  
  } 
 //畫折線圖
  function drawLine(){
	  chart = $("#container").highcharts({
		  title:{
			  text : titleX
		  },
		  xAxis:{
			  categories : []
		  },
		  yAxis:{
			  title:{
				  text:titleY
			  }
		  },
		  plotOptions:{
			  series:{
				  cursor:'pointer',
				  events:{
					  click:function(event){
						  
					  },
					  legendItemClick:function(){
						  return false;
					  }
				  }
			  }
		  },
		  tooltip:{
			  crosshairs:true,
			  shared:true
		  },
		  credits:{
			  enabled:false  //禁用版權資訊
		  },
		  series:series
	  }).highcharts();
  }
action中主要實現如下:
public void getOnlineNumbers(){
   List<UserlogInfo> list = UserlogInfoManager.getOnlineNum(formInfo);
   JSONArray jsonArray = new JSONArray();
   jsonArray = JSONArray.fromObject(list);
   writeString(jsonArray.toString());
}

 用的ibatis  Sql如下(時間進行了處理,只到年月):
select count(userId) as vcountTwo,date_format(loginTime,#dateFormat#) as clientTimeStr from 
 ( select B.userId,date_format(B.loginTime,#dateFormat#) loginTime from m_userInfo B  where  B.loginTime!=''
	 <isNotEmpty prepend="and" property="startTime">
	     date_format(B.loginTime,#dateFormat#) between #startTime# and #endTime#
	 </isNotEmpty>
	  group by date_format(B.loginTime,#dateFormat#),B.userId
 ) A
 group by loginTime

主要就是這樣實現的,至於dao層等的做法就不一一闡述了,解析json的java類也有些許差異,主要將sql 及頁面的js記錄下來,以備之需。另外說下,畫圖新手的問題可能主要就是不知道如何傳值,關於畫圖其實最主要的還是sql,只要你根據業務需求將sql完成了,畫圖也就簡單了;正好開發用到這個,就記錄下來,可能自己以後會用到,同時分享給需要的童鞋,文筆不好,可能表達的不是太好,有問題可以留言,相互討論學習下~~  效果圖如下:






            

相關文章