【一】概論

（1）介紹

基於jquery開發的國外圖標插件，統計圖，折線圖，餅狀圖等常常用到。

國內也有一款類似插件echarts，由百度開發。

（2）官網：www.highcharts.com 愛好者編寫集成的官網：www.hcharts.cn

官網的下載地址：https://www.highcharts.com/products/highcharts

demo網址：www.highcharts.com/demo

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

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

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

非常直觀反映出中國互聯網發展情況和地域。亮點越多說明當地互聯網越發達。發達地區有北上廣，重慶

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

（6）用法基本一致

【二】案例

使用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.

視頻學習筆錄---ThinkPHP---插件highcharts