在thinkphp中插件highcharts怎么用

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

【一】概論

（1）介紹

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

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

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

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

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

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

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

（5）用法基本一致

【二】案例

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

要求：使用圖標(biāo)形式統(tǒng)計(jì)出每個(gè)部門人數(shù)

（1）準(zhǔn)備和步驟：

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

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

（2）開(kāi)始編寫(xiě)

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

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

2. 定義圖標(biāo)頁(yè)面方法charts，方法寫(xiě)在了User控制器里，所以href寫(xiě)為_(kāi)_CONTROLLER__/charts

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

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

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

①這里是復(fù)制到User/charts,html下；

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

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

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

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

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

關(guān)聯(lián)條件：t1.dept_id = t2.id

原生SQL語(yǔ)句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中運(yùn)行后輸出正確，所以接下來(lái)

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結(jié)果：

array(3) {
  [0] => array(2) {
    ["deptname"] => string(9) "人力部"
    ["count"] => string(1) "3"
  }
  [1] => array(2) {
    ["deptname"] => string(9) "技術(shù)部"
    ["count"] => string(1) "2"
  }
  [2] => array(2) {
    ["deptname"] => string(9) "財(cái)務(wù)部"
    ["count"] => string(1) "3"
  }
}

如果當(dāng)前使用的ThinkPHP版本為5.6+，則可以直接將data二維數(shù)組assign，不需要任何處理。5.6以下版本需要進(jìn)行字符串拼接

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

6. 變量傳遞給模板；

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

data:{$str},

（3）細(xì)節(jié)完善

1. 修改表頭

2. 修改左側(cè)單位信息

3. 修改鼠標(biāo)懸浮效果（截止當(dāng)前）

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

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

總結(jié)：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“在thinkphp中插件highcharts怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!