WEB前端數據統計圖實現教程及代碼

這幾天要做數據統計，聽louis介紹了一個jquery框架，現在也介紹給大家。

外國，真是一個神奇的地方。不多說。

數據報表折線圖

然後這個jquery插件內置大量dome,看都能看會。

細節在後台PHP處理數據，然後返回給前端JS，一般是用JSON傳值，但這個jquery插件處理數據都是用字符串，所以要特別注意一下

這樣，我就把我寫的PHP處理類也共享出來

<?php
class TotalAction extends Action{

   public function getData($table,$field)
   {
      //獲取統計數據,實例化數據模型
	  $model = M($table);
	  //獲得當天的日期
	  $nowDate = date("Y-m-d");
	  //獲取七天
	  $beforDate = date("Y-m-d",strtotime('-7 day'));

	  //獲取當間的數據
	  $map["del"] = array("eq","0");
	  $map[$field] = array("between",array($beforDate,$nowDate));
	  $data = $model->where($map)->field($field)->order($field." desc")->select();
	  return $this->hanldData($data,$nowDate,$beforDate,$field);
   }
   //獲取時間間距
   private function space($nowDate,$beforDate)
   {

       //開始的時間
       $endday=((int)substr($nowDate,8,2));
       //結束的時間
	   $beforday = ((int)substr($beforDate,8,2));

	   for($i=$beforday;$i<$endday;$i++)
	   {
	      $daystack[] = $i;
	   }

	   return $daystack;
   }

   //對數據進行統計分類處理
   private function hanldData($data,$nowDate,$beforDate,$field)
   {
     $daystack = $this->space($nowDate,$beforDate);
     //獲取日期頁面
      foreach($daystack as $val)
	  {

	    foreach($data as $key=>$value)
		{
	      //獲取這個日期所在在日期號
		  $day=((int)substr($value[$field],8,2));

		  //篩選出所有數據
		  if($day == $val)
		  {
		    $countDay[$val] ++;
		  }
		  else
		  {
		    if(!isset($countDay[$val]))
			{
		      $countDay[$val]= 0;
		    }
		  }
		}
	  }

  return $countDay;
 }

  //獲取當前日期
  public function getDate($data,$year="",$month="")
  {
     //獲取當年
	 if(empty($year))
	 {
	    $year =date("Y");
	 }
	 if(empty($month))
	 {
	    $month = date("m");
	 }
	 //開始處理數據
	 foreach($data as $key=>$value)
	 {
	    $date[] = $year."-".$month."-".$key;
	 }

	 return $this->arraytostr($date);
  }

  //獲取具體數據量
  public function getNum($data)
  {
    if(is_array($data))
	 {
	    $str = implode(",",$data);
	 }
	 return $str;
  }

  //將數組轉換成字符串
  private function arraytostr($array)
  {
     if(is_array($array))
	 {
	    $str = implode("\",\"",$array);
	 }
	 return $str;
  }
}
?>

類是基於thinkphp開發的，怎麼用？很簡單，看getData方法。只需要傳入兩個值，一個是要統計的表名，另一個是要統計的字段。
那個jquery插件連接在這裡。 highChartsjs