插件highcharts在thinkphp中的使用

【一】概論

（1）介紹

Highcharts基於jquery開發的國外圖示插件，統計圖，折線圖，餅狀圖等常用到。

國內也有一款類似插件echarts，由百度開發。

（2）支援特效demo：3D、儀表板、折現、類心電圖即時刷新、柱狀、點狀、雷達、漏斗、金字塔

##         漏斗圖：常用於銷售走勢，最上方為有意向用戶，底部為成交客戶。具體有以下幾類

（3）應用實例：QQ的全國在線人數分佈，透過Flash做的；百度echarts的全國數據分佈，透過js做的

非常直觀地反映出中國互聯網發展情況和地域。亮點越多說明當地網路越發達。已開發地區有北上廣，重慶

（4）echarts包含更豐富的demo，拓展了許多，包含全球航線、股票數據走勢

（5）用法基本一致 

【二】案例

使用Highcharts實現部門人數統計

要求：使用圖示形式統計出每個部門人數

（1）準備與步驟：

        1. 選取樣式目錄，這裡我使用的

examples/column-rotated-labels;

#        2.分析 demo：①引入jquery和js類別檔案；②取代data資料；③宣告div圖示容器，用來放置圖示

（2）開始編寫

        1. 修改範本檔案 User/showList.html，將下面的統計按鈕設定鏈接，點擊後跳到統計頁面

            這裡不用做任何操作，所以直接修改a標籤的href即可，寫成什麼呢？這要看方法了

        2. 定義圖示頁面方法charts，方法寫在了User控制器裡，所以href寫為__CONTROLLER__/charts

        3.定義charts方法展示模板檔案

//charts图表
 public function charts(){
       $this->display();
 }

        4. 複製範本檔案到指定位置；同時為了更快在線上存取網站，需要複製靜態資源檔案到網站目錄下；

            ①這裡是複製到User/charts ,html下；

            ②引入靜態資源並修改路徑：這裡為了方便，我直接把整個code複製到了靜態資源目錄下，後期使用的插件都放到plugin(插件)目錄下

        5. 改寫chars方法，查詢出數據，替換模板文件中的數據

            先分析下最終數據格式：,產品部：10，技術部20，外交部30..... .

僅僅一個資料表無法實現，所以需要聯表查詢

（sp_user、sp_dept）

主表

sp_user（t1）；從表sp_dept（t2）;

關聯條件：

t1.dept_id = t2.id##原生SQL語句table方法：

select t2.name as deptname,count(*) as count from sp_user as t1,sp_dept as t2 where t1.dept_id=t2.id group by deptname;

在Navicat中運行後輸出正確，所以接下來

TP連貫操作：

public function charts(){
$model = M();                //连贯操作
$data = $model->field('t2.name as deptname,count(*) as count')->table('sp_user as t1,sp_dept as t2')
     ->where('t1.dept_id=t2.id')->group('deptname')->select();
dump($data);die;
$this->display();
            }

輸出$data結果：

array(3) {
  [0] => array(2) {
    ["deptname"] => string(9) "人力部"
    ["count"] => string(1) "3"
  }
  [1] => array(2) {
    ["deptname"] => string(9) "技术部"
    ["count"] => string(1) "2"
  }
  [2] => array(2) {
    ["deptname"] => string(9) "财务部"
    ["count"] => string(1) "3"
  }
}

如果目前使用的ThinkPHP版本為5.6 ，則可以直接將data二維數組assign，不需要任何處理。 5.6以下版本需進行字串拼接

  $str = "[";//循环遍历字符串
        foreach ($data as $key => $value) 
     {                    
      $str .= "['".$value['deptname']."',".$value['count']."],";
     } //去除最后的，
      $str = rtrim($str,',');                
      $str .= "]";

           6. 變數傳遞至模板;

           7.修改模板，接收變數。刪除原先的數組，改為傳遞變數即可

data:{$str},

（3）細節完善

1. 修改表頭

         2. 修改左側單位資訊

         3. 修改滑鼠浮效果（截止目前）

    選擇    4. 修改上為小數0f，表示精確到0位元）；

         5. 至於列印圖片的操作，需要修改highcharts.js，從原始碼上修改即可。查詢輸入相關單字，修改即可

總結：

（1）.1f表示精確到1位小數（如3.0、5.0），若不要. 0，則可以精確到0位元小數即可（如3、5）

以上就是ThinkPHP---外掛程式highcharts的全部內容。

相關參考：

thinkphp教學

以上是插件highcharts在thinkphp中的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！