站長資訊網
【一】概論
（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）
