【一】概論

（1）介紹

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

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

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

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

（3）應(yīng)用實例：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)計按鈕設(shè)置鏈接，點擊后跳到統(tǒng)計頁面

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

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

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

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

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

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

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

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

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

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

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

關(guān)聯(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結(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) "財務(wù)部"     ["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. 修改左側(cè)單位信息

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

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

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

總結(jié)：

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