前言：
有這么一個需求，是定時任務，需要定時發送郵件，郵件中數據統計圖，該圖片是有 Highcharts 生成。所以無論從美觀還是其他方面都是最好的。所以現在前端統計都會使用 Highcharts 插件來做統計圖。
問題就來了，定時任務如何生成 Highcharts統計圖？首先 Highcharts是不支持 java 的，只支持 node.js、 Android 和 iOS，總之他支持由前端來使用進行渲染。
但是他支持另外一種形式：highcharts-export-server。
注意：使用 highcharts-export-server 之前，你需要安裝 node.js 服務器。
第一步：了解官網（永遠是最權威的）
- https://www.highcharts.com.cn/docs/setting-up-the-server
- https://www.highcharts.com.cn/docs/render-charts-serverside
第二步： 安裝 highcharts-export-server
- 官網上提供了安裝方式
- 第一種 npm
npm install highcharts-export-server -g
- 第二種
git clone https://github.com/highcharts/node-export-server npm install npm link
- 第一種 npm
- 由於是外網下載，建議使用 淘寶鏡像下載（推薦）
- 安裝鏡像（不會的，自行百度）
npm config set registry https://registry.npm.taobao.org
-
使用鏡像進行安裝
cnpm install highcharts-export-server -g
- 安裝之前要先安裝 bzip2（額外補充）
yum install bzip2
否則可能會出現該錯誤
tar: Error is not recoverable: exiting now at ChildProcess.exithandler (child_process.js:303:12) at ChildProcess.emit (events.js:310:20) at maybeClose (internal/child_process.js:1021:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) { killed: false, code: 2, signal: null, cmd: 'tar jxf /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2' } Error: Command failed: tar jxf /tmp/phantomjs/phantomjs-2.1.1-linux-x86_64.tar.bz2 tar (child): bzip2：無法 exec: 沒有那個文件或目錄 tar (child): Error is not recoverable: exiting now tar: Child returned status 2 tar: Error is not recoverable: exiting now at ChildProcess.exithandler (child_process.js:303:12) at ChildProcess.emit (events.js:310:20) at maybeClose (internal/child_process.js:1021:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) [npminstall:runscript:error] phantomjs-prebuilt@2.1.14 scripts.install run "node install.js" error: Error [RunScriptError]: Run "sh -c node install.js" error, exit code 1 at ChildProcess.<anonymous> (/usr/local/src/node/lib/node_modules/cnpm/node_modules/runscript/index.js:96:21) at ChildProcess.emit (events.js:310:20) at maybeClose (internal/child_process.js:1021:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) { name: 'RunScriptError', stdio: [Object] } Install fail! RunScriptError: post install error, please remove node_modules before retry! Run "sh -c node install.js" error, exit code 1 RunScriptError: Run "sh -c node install.js" error, exit code 1 at ChildProcess.<anonymous> (/usr/local/src/node/lib/node_modules/cnpm/node_modules/runscript/index.js:96:21) at ChildProcess.emit (events.js:310:20) at maybeClose (internal/child_process.js:1021:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) npminstall version: 3.27.0 npminstall args: /usr/local/src/node/bin/node /usr/local/src/node/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/root/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://r.npm.taobao.org highcharts-export-server -g
- 安裝過程可能會出現這個（能選 y的選 y，不能的直接 回車）
Agree to the license terms? y/n: (no) y Select your Highcharts version (e.g. 4.2.2):: (latest) Include Maps? (requires Maps license): (no) Include Gantt? (requires Gantt license, and >V6.2): (no) Enable styled mode? (requires Highcharts/Highstock 5+ license): (no) Include moment.js for date/time handling?: (no) Which CDN would you like to use?: (https://code.highcharts.com/) Enable wordcloud support? y/n: (no) y Enable annotations support? y/n: (no) y Pulling Highcharts from CDN (latest).. - 安裝過程中，也遇到了報錯（沒去管他，能正常運行）
Downloading highcharts-export-server-g to /usr/local/lib/node_modules/highcharts-export-server-g_tmp Error: GET https://r.npm.taobao.org/highcharts-export-server-g response 404 status at get (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/get.js:68:17) at get.next (<anonymous>) at onFulfilled (/usr/local/lib/node_modules/cnpm/node_modules/co/index.js:65:19) at processTicksAndRejections (internal/process/task_queues.js:97:5) npminstall version: 3.27.0
- 安裝鏡像（不會的，自行百度）
第三步：測試安裝是否成功（顯示該內容就表示安裝好了）。
- highcharts-export-server（表明已經成功）
➜ ~ highcharts-export-server __ ___ __ __ __ / / / (_)___ _/ /_ _____/ /_ ____ ______/ /______ / /_/ / / __ `/ __ \/ ___/ __ \/ __ `/ ___/ __/ ___/ / __ / / /_/ / / / / /__/ / / / /_/ / / / /_(__ ) /_/ /_/_/\__, /_/ /_/\___/_/ /_/\__,_/_/ \__/____/ ____//___/ __ _____ / ____/ ______ ____ _____/ /_ / ___/___ ______ _____ _____ / __/ | |/_/ __ \/ __ \/ ___/ __/ \__ \/ _ \/ ___/ | / / _ \/ ___/ / /____> </ /_/ / /_/ / / / /_ ___/ / __/ / | |/ / __/ / /_____/_/|_/ .___/\____/_/ \__/ /____/\___/_/ |___/\___/_/ /_/ v2.0.24 Usage:
- 若出現 -bash: highcharts-export-server: 未找到命令，設置一個軟連接就行了
ln -s 安裝node地址/bin/highcharts-export-server /usr/local/bin/ -
ln -s /usr/local/src/node/bin/highcharts-export-server /usr/local/bin/
第四步：啟動 highcharts-export-server --enableServer 1 --port 3000
- 啟動 highcharts-export-server 你需要知道 他具體位置
➜ ~ which highcharts-export-server /usr/local/bin/highcharts-export-server - 切換到 /usr/local/bin/highcharts-export-server 地址
- 但是 highcharts-export-server 是個腳本文件，所以只能切換到 /usr/local/bin/ 下
~ cd /usr/local/bin/
- 啟動方式：highcharts-export-server --enableServer 1 --port 3000
➜ bin highcharts-export-server --enableServer 1 --port 3000 __ ___ __ __ __ / / / (_)___ _/ /_ _____/ /_ ____ ______/ /______ / /_/ / / __ `/ __ \/ ___/ __ \/ __ `/ ___/ __/ ___/ / __ / / /_/ / / / / /__/ / / / /_/ / / / /_(__ ) /_/ /_/_/\__, /_/ /_/\___/_/ /_/\__,_/_/ \__/____/ ____//___/ __ _____ / ____/ ______ ____ _____/ /_ / ___/___ ______ _____ _____ / __/ | |/_/ __ \/ __ \/ ___/ __/ \__ \/ _ \/ ___/ | / / _ \/ ___/ / /____> </ /_/ / /_/ / / / /_ ___/ / __/ / | |/ / __/ / /_____/_/|_/ .___/\____/_/ \__/ /____/\___/_/ |___/\___/_/ /_/ v2.0.24
- 到此 highcharts-export-server就啟動好了，這不是以守護進程啟動，所以就額外開啟了一個終端。
第五步：測試圖片生成
- 使用官網給的json 進行測試
{"title":{"text":"不同城市的月平均氣溫","x":-20},"subtitle":{"text":"數據來源:WorldClimate.com","x":-20},"xAxis":{"categories":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]},"yAxis":{"title":{"text":"溫度(°C)"},"plotLines":[{"value":0,"width":1,"color":"#808080"}]},"tooltip":{"valueSuffix":"°C"},"legend":{"layout":"vertical","align":"right","verticalAlign":"middle","borderWidth":0},"series":[{"name":"東京","data":[7,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]},{"name":"紐約","data":[-0.2,0.8,5.7,11.3,17,22,24.8,24.1,20.1,14.1,8.6,2.5]},{"name":"柏林","data":[-0.9,0.6,3.5,8.4,13.5,17,18.6,17.9,14.3,9,3.9,1]},{"name":"倫敦","data":[3.9,4.2,5.7,8.5,11.9,15.2,17,16.6,14.2,10.3,6.6,4.8]}]} - 在本地生成一份以 .json 為擴展的文件並保存以上內容（如：options.json)。
- 命令行的方式方式：運行成功會是這樣。
document highcharts-export-server --infile options.json --outfile ~/work/document/chart.png __ ___ __ __ __ / / / (_)___ _/ /_ _____/ /_ ____ ______/ /______ / /_/ / / __ `/ __ \/ ___/ __ \/ __ `/ ___/ __/ ___/ / __ / / /_/ / / / / /__/ / / / /_/ / / / /_(__ ) /_/ /_/_/\__, /_/ /_/\___/_/ /_/\__,_/_/ \__/____/ ____//___/ __ _____ / ____/ ______ ____ _____/ /_ / ___/___ ______ _____ _____ / __/ | |/_/ __ \/ __ \/ ___/ __/ \__ \/ _ \/ ___/ | / / _ \/ ___/ / /____> </ /_/ / /_/ / / / /_ ___/ / __/ / | |/ / __/ / /_____/_/|_/ .___/\____/_/ \__/ /____/\___/_/ |___/\___/_/ /_/ v2.0.2
- 生成的圖片查看
-
- java 測試（代碼比較簡單，直接就可以運行）。
public static void main(String[] args) { String options = "/Users/zhangzhonghui/work/document/options.json"; String outPath = "/Users/zhangzhonghui/work/document/char1.png"; String cmd = "highcharts-export-server --infile " + options + " --outfile "+outPath; try { Runtime run = Runtime.getRuntime(); Process p = run.exec(cmd); BufferedInputStream in = new BufferedInputStream(p.getInputStream()); BufferedReader inBr = new BufferedReader(new InputStreamReader( in )); String lineStr; while ((lineStr = inBr.readLine()) != null) { System.out.println(lineStr); } inBr.close(); in .close(); } catch (IOException e) { e.printStackTrace(); } }
我遇到的問題以及解決的方式（持續更新）
- 啟動過程中
libfontconfig.so.1: cannot open shared object file: No such file or directory
Thu Mar 26 2020 15:54:09 GMT+0800 (GMT+08:00) [error] phantom worker 3 error - /usr/local/src/node/lib/node_modules/highcharts-export-server/node_modules/_phantomjs-prebuilt@2.1.14@phantomjs-prebuilt/lib/phantom/bin/phantomjs: error while loading shared libraries: libfontconfig.so.1: cannot open shared object file: No such file or directory
- 解決方式
- yum -y install freetype
- yum -y install fontconfig
結論：
以上內容，百分之90來自於官網，該功能在實際開發中還是比較重要的，否則我也不會接觸到它。
其實還有很多疑問，需要我去發掘，如：如何不生成文件，而是返回一個流？這個問題就是我接下來要去琢磨的。