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

創(chuàng)新互聯(lián)建站擁有網(wǎng)站維護技術和項目管理團隊，建立的售前、實施和售后服務體系，為客戶提供定制化的成都網(wǎng)站建設、成都網(wǎng)站制作、網(wǎng)站維護、川西大數(shù)據(jù)中心解決方案。為客戶網(wǎng)站安全和日常運維提供整體管家式外包優(yōu)質服務。我們的網(wǎng)站維護服務覆蓋集團企業(yè)、上市公司、外企網(wǎng)站、電子商務商城網(wǎng)站建設、政府網(wǎng)站等各類型客戶群體，為全球超過千家企業(yè)提供全方位網(wǎng)站維護、服務器維護解決方案。

【一】概論

（1）介紹

Highcharts基于jquery開發(fā)的國外圖標插件，統(tǒng)計圖，折線圖，餅狀圖等常常用到。

國內(nèi)也有一款類似插件echarts，由百度開發(fā)。

（2）支持特效demo：3D、儀表盤、折現(xiàn)、類心電圖實時刷新、柱狀、點狀、雷達、漏斗、金字塔

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

（3）應用實例：QQ的全國在線人數(shù)分布，通過Flash做的；百度echarts的全國數(shù)據(jù)分布，通過js做的

非常直觀反映出中國互聯(lián)網(wǎng)發(fā)展情況和地域。亮點越多說明當?shù)鼗ヂ?lián)網(wǎng)越發(fā)達。發(fā)達地區(qū)有北上廣，重慶

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

（5）用法基本一致

【二】案例

使用Highcharts實現(xiàn)部門人數(shù)統(tǒng)計

要求：使用圖標形式統(tǒng)計出每個部門人數(shù)

（1）準備和步驟：

1. 選樣式目錄，這里我用的examples/column-rotated-labels；

2. 分析demo：①引入jquery和js類文件；②替換data數(shù)據(jù)；③聲明div圖標容器，用來放置圖標

（2）開始編寫

1. 修改模板文件User/showList.html，將下面的統(tǒng)計按鈕設置鏈接，點擊后跳到統(tǒng)計頁面

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

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

3. 定義charts方法展示圖表模板文件

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

4. 復制模板文件到指定位置；同時為了更快在線上訪問網(wǎng)站，需要復制靜態(tài)資源文件到站點目錄下；

①這里是復制到User/charts,html下；

②引入靜態(tài)資源并修改路徑：這里為了方便，我直接把整個code復制到了靜態(tài)資源目錄下，后期使用的插件都放到plugin(插件)目錄下

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

先分析下最終數(shù)據(jù)格式：,產(chǎn)品部：10，技術部20，外交部30......

僅僅一個數(shù)據(jù)表無法實現(xiàn)，所以需要聯(lián)表查詢（sp_user、sp_dept）

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

關聯(lián)條件：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二維數(shù)組assign，不需要任何處理。5.6以下版本需要進行字符串拼接

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

6. 變量傳遞給模板；

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

data:{$str},

（3）細節(jié)完善

1. 修改表頭

2. 修改左側單位信息

3. 修改鼠標懸浮效果（截止當前）

4. 修改圖標上小數(shù)點（1f改為0f，表示精確到0位）；

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

總結：

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

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