這篇文章主要介紹了在thinkphp中插件highcharts怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創新互聯公司主營閻良網站建設的網絡公司,主營網站建設方案,app軟件開發公司,閻良h5微信小程序開發搭建,閻良網站營銷推廣歡迎閻良等地區企業咨詢

【一】概論

（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. 修改圖標上小數點（1f改為0f，表示精確到0位）；

5. 至于打印圖片的操作，需要修改highcharts.js，從源碼上修改即可。查詢輸入相關單詞，修改即可

總結：

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“在thinkphp中插件highcharts怎么用”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

本文標題：在thinkphp中插件highcharts怎么用-創新互聯
標題鏈接：http://vcdvsql.cn/article40/pphho.html

成都網站建設公司_創新互聯，為您提供網站策劃、營銷型網站建設、企業建站、面包屑導航、動態網站、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯