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完成了，畫圖也就簡單了；正好開發用到這個，就記錄下來，可能自己以後會用到，同時分享給需要的童鞋，文筆不好，可能表達的不是太好，有問題可以留言，相互討論學習下~~  效果圖如下：









            




相關文章