利用PhantomJS搭建Highcharts export服務

利用PhantomJS搭建Highcharts export服務

一直在使用Highcharts作web圖表的展現, 可是當發送定時的報表郵件的遇到了這個問題. 爲了保證郵件圖表和web頁圖表樣式一致, 須要能原樣生圖. 這裏考慮以下:

1. 如何生成jpg圖片

在好久之前,官方推薦用Imagemagick將SVG轉成jpg. 考慮如何獲得SVG, 大量文檔推薦用 nodejs+jsdom從json數據中生成svg. 在實際使用中,  Imagemagick和jsdom環節處理複雜的數據都很是孱弱, 複雜的圖表丟東少西難看要死, 沒法上線. 在google上糾結很久, 終於發現了這神器PhantomJS.

作測試這麼久, 盡然不知道PhantomJS這種神器. 簡單說, PhantomJS是個不顯示UI的瀏覽器, 能夠無GUI的server上使用. 並且核心爲webkit, 輕鬆支持Highcharts等幾乎全部的js庫. 在本文中, PhantomJS拿來解決這個問題再合適不過. 只須要想辦法把數據傳給PhantomJS, 簡單幾句代碼, 截個圖就好了.

2. 數據傳遞

下面這個問題就是怎麼把數據傳給PhantomJS. PhantomJS支持命令行, 在服務器端, (通常爲Java, Python, PHP),  與JS交互的最好數據格式就是JSON. 可是JSON數據比較大時, 直接用命令行就不行了.  傳遞方式能夠選:

1. fork子進程, 利用其stdin吐進去
2. 生成一個json臨時文件, 命令行指定該文件地址
3. 利用PhantomJS的webserver模塊單獨開啓一個服務, 向其POST

三種方式均可以, 看具體的需求. 第二種比較簡單, 就是總要生成中間文件, 不是很喜歡....

還有一個問題, 利用JSON提供基本數據還能夠, 可是傳遞控制顯示樣式的callback函數(好比formatter)比較麻煩. 若是全部圖表樣式統一還好說, 在PhantomJS腳本內寫死就能夠. 對於圖表須要個性樣式的狀況, 目前想到的解決辦法是, 將callback寫成各個js文件, 在傳遞JSON時指定一個額外的配置, 肯定讀取哪一個js文件, 而後再統一到一塊兒.

 

這兩個問題解決, 就能夠直接從服務器端生成圖片了. 

補充: 剛看到了官方的解決方案, 跟我想法差很少, 地址以下:

http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts

並且在文章後半部, 指出了PhantomJS在數據點過多狀況下的性能問題. 

稍有不一樣的是, 官方使用了命令行參數指定callback js文件, 而且callback是經過Highcharts強大的api來調整樣式的. 而不是向本文同樣作合併.

 

 

https://github.com/highcharts/highcharts-export-server/tree/master/phantomjs

http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts

https://github.com/one2team/highcharts-serverside-export

http://www.cnblogs.com/mgzy/p/3850183.html

http://download.csdn.net/detail/yexiufei123/8876521

http://phping.sinaapp.com/highcharts-%E7%BB%93%E5%90%88phantomjs%E7%BA%AF%E5%90%8E%E5%8F%B0%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E7%B3%BB%E5%88%97%E4%BA%8C%E4%B9%8Bphp/