phantomjs server + highchart 在服务器端生成highchart图表图片
前言
当项目需要将一个highchart图表以邮件发送的时候,js+css形式的highcharts 图表肯定是不好做的,有查可以借助flash去执行js,但很麻烦,所以折中将highchart图表转为图片。并且这个邮件里可能有几十个这样的图表,在浏览器端生成图片再上传发送的方案也不可取,所以选择直接在服务端生成highchart图表。
服务端图表其实也有PChart之类的直接在服务端生成图片的,不过那图片效果实在不敢恭维。最后找到了phantomjs+highchart的方式生成highchart图表,图表美观。
参考: http://www.highcharts.com/articles/2-news/56-improved-image-export-with-phantomjs
phantomjs 是一个服务端JavaScript执行引擎。
phantomjs + highchart支持两种方式,一种是命令行方式,一种是server方式。在使用命令行方式造成进程数过多把服务器整挂一次后,我换成了phantomjs Server的方式,这种方式效果好,所以下面的示例也使用的是phantomjs server
安装phantomjs
可以编译安装也可以直接下载rpm,或者下载已经静态编译可以直接执行的二进制文件。这三者我都做过,最后因为要安装的机器比较多,每台机器还有点区别,有的编译成功有的编译失败,最后懒惰的我直接找到了可以直接下载使用的phantomjs二进制可执行文件。
安装完之后,在demo根目录下行执行以下命令启动phantomjs server
- phantomjs highcharts-convert.js -host 127.0.0.1 -port
其中demo目录下有这些文件,其中highcharts-convert.js文件能够使用的网上已经非常难找了,需要的可以联系我。
highcharts-convert.js highcharts.js highcharts-more.js highstock.js jquery-1.8.3.min.js loadspeed.js rasterize.js
DEMO
下面编写测试代码
- <?php
- $options = array('chart' => array('type' => 'spline', 'width' => '500', 'height' => '300', 'style' => array('fontFamily' => 'consolas,Console,SimSun'), 'backgroundColor' => '#F5F8F9'), 'tooltip' => array('valueSuffix' => '%'), 'colors' => array('#3366CC', '#097138', '#AB0'), 'credits' => array('enabled' => 0), 'yAxis' => array('title' => array('text' => '百分比(%)'), 'plotLines' => array(0 => array('value' => 0, 'width' => 1, 'color' => '#808080'))), 'title' => array('text' => '视频下载成功率3G'), 'xAxis' => array('categories' => array('1-22', '1-23', '1-24', '1-25', '1-26', '1-27', '1-28')), 'series' => array(0 => array('name' => 'Android版(6.0 正式)6.0.1.288', 'data' => array(0, 100, 100, 0, 0, 100, 0)), 1 => array('name' => 'Android版(5.8正式)5.8.1.288', 'data' => array(96.75, 96.90000000000001, 89.3, 81.16, 97.23, 92.59, 98.73999999999999)), 2 => array('name' => 'Android版(5.7正式换包)5.7.1.289', 'data' => array(96.55, 25, 91.08, 100, 100, 0, 97.14))));
- $optionsJson = json_encode($options);
- $imgFile = dirname(__FILE__) . '/' . md5($optionsJson) . '.png';
- $curl = curl_init('127.0.0.1:3003');
- curl_setopt($curl, CURLOPT_POST, true);
- curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
- $postData = json_encode(array(
- 'infile' => preg_replace('/\"(\w+)\"\:/', '${1}:', $optionsJson),
- 'outfile' => $imgFile,
- ));
- curl_setopt($curl, CURLOPT_POSTFIELDS, $postData);
- $resp = curl_exec($curl);
参数细节
请注意上面的
- $postData = json_encode(array(
- 'infile' => preg_replace('/\"(\w+)\"\:/','${1}:',$optionsJson),
- 'outfile' => $imgFile
- ));
第2行中的infile为什么要这么写呢?因为传递给highchart-convert.js的infile需要的参数,并不是标准的json,这个不仔细看真注意不到。
可以仔细看 http://www.highcharts.com/articles/2-news/56-improved-image-export-with-phantomjs 参数说明
- "{"infile":"{xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]};","callback":"function(chart) {chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({fill : '#FCFFC5',stroke : 'black','stroke-width' : 1}).add();}","constr":"Chart","outfile":"//tmp//chart.png"}"
可以上面红色的代码,并不是json而是js对象格式。
上面有preg_replace替换的php代码得到的是就是这样的json
- {"infile":"{chart:{type:\"spline\",width:\"500\",height:\"300\",style:{fontFamily:\"consolas,Console,SimSun\"},backgroundColor:\"#F5F8F9\"},tooltip:{valueSuffix:\"%\"},colors:[\"#3366CC\",\"#097138\",\"#AB0\"],credits:{enabled:0},yAxis:{title:{text:\"\\u767e\\u5206\\u6bd4\\uff08%\\uff09\"},plotLines:[{value:0,width:1,color:\"#808080\"}]},title:{text:\"\\u89c6\\u9891\\u4e0b\\u8f7d\\u6210\\u529f\\u73873G\"},xAxis:{categories:[\"1-22\",\"1-23\",\"1-24\",\"1-25\",\"1-26\",\"1-27\",\"1-28\"]},series:[{name:\"Android\\u7248(6.0 \\u6b63\\u5f0f)6.0.1.288\",data:[0,100,100,0,0,100,0]},{name:\"Android\\u7248(5.8\\u6b63\\u5f0f)5.8.1.288\",data:[96.75,96.9,89.3,81.16,97.23,92.59,98.74]},{name:\"Android\\u7248(5.7\\u6b63\\u5f0f\\u6362\\u5305)5.7.1.289\",data:[96.55,25,91.08,100,100,0,97.14]}]}","outfile":"\/home\/wwwroot\/demo.qq.com\/25afeab1d3e957b8beb4c58ea79c6ebd.png"}
转成js对象可以看到是这样的
如果不像上面那样写,而是直接写成
- $postData = json_encode(array(
- 'infile' => $options,
- 'outfile' => $imgFile
- ));
得到的json是这样的
- {"infile":{"chart":{"type":"spline","width":"500","height":"300","style":{"fontFamily":"consolas,Console,SimSun"},"backgroundColor":"#F5F8F9"},"tooltip":{"valueSuffix":"%"},"colors":["#3366CC","#097138","#AB0"],"credits":{"enabled":0},"yAxis":{"title":{"text":"\u767e\u5206\u6bd4\uff08%\uff09"},"plotLines":[{"value":0,"width":1,"color":"#808080"}]},"title":{"text":"\u89c6\u9891\u4e0b\u8f7d\u6210\u529f\u73873G"},"xAxis":{"categories":["1-22","1-23","1-24","1-25","1-26","1-27","1-28"]},"series":[{"name":"Android\u7248(6.0 \u6b63\u5f0f)6.0.1.288","data":[0,100,100,0,0,100,0]},{"name":"Android\u7248(5.8\u6b63\u5f0f)5.8.1.288","data":[96.75,96.9,89.3,81.16,97.23,92.59,98.74]},{"name":"Android\u7248(5.7\u6b63\u5f0f\u6362\u5305)5.7.1.289","data":[96.55,25,91.08,100,100,0,97.14]}]},"outfile":"\/home\/wwwroot\/demo.qq.com\/25afeab1d3e957b8beb4c58ea79c6ebd.png"}
换成js对象是这样的
而且请求发送给phantomjs执行会出错
这是一个坑
输出
如果参数不指定outfile,那么curl_exec 得到的响应resp就是图片数据的base64编码数据。可以直接decode输出
乱码问题
另外,服务器端生成图表,一定要为Linux安装bitmap字体,否则会得到下面这样的乱码图片
安装的方式很简单
- yum install bitmap-fonts bitmap-fonts-cjk
然后就能得到正常的图表了
另外再给系统安装一些其余漂亮的中文字体,在highchart中可以指定中文字体,让图表更加漂亮。
注:因为写博客的时间与做这个事情的时间相距较远,输出的图片与代码数据并不匹配,见谅。
phantomjs server + highchart 在服务器端生成highchart图表图片的更多相关文章
- 使用poi和jfreechart生成excel图表图片
最近项目在频繁的操作excel,里边涉及到很多和图表有关的东西.有时候需要使用java操作excel自带的图标,比较复杂的我们都是使用excel模板的形式实现. 除此之外,也有一些功能只需要生成对应的 ...
- Highcharts结合PhantomJS在服务端生成高质量的图表图片
项目背景 最近忙着给部门开发一套交互式的报表系统,来替换原有的静态报表系统. 老系统是基于dotnetCHARTING开发的,dotnetCHARTING的优势是图表类型丰富,接口调用简单,使用时只需 ...
- 【phantomjs】使用phantomjs生成highChart的图片(待完善)
阅读目录 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan' ...
- 使用PowerDesigner 15进行逆向工程生成数据库图表时,列的注释问题
上一章讲了对数据库进行逆向工程生成图表操作,可能会遇到无法生成注释的问题: 一.解决PowerDesigner逆向工程没有列注释 1.打开PowerDesigner 15,选择菜单:File→Reve ...
- java调用phantomjs采集ajax加载生成的网页
java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...
- FusionCharts生成Flash图表常见问题FAQ
本文主要汇总了FusionCharts生成Flash图表时的一些常见问题(FAQ)以及解决方法/调试方法,欢迎交流! 问题描述:利用FusionCharts创建Flash图表时,能否直接从数组或rec ...
- echarts生成的图表大小怎么随屏幕的大小改变自适应
最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...
- 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)
利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表 实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...
- 使用Jmeter聚合报告生成对比图表
背景 最近在帮别的项目组执行性能测试,使用的工具是Jmeter.接口录制和参数化前一个人已经做好了,我主要的工作就是执行脚本,撰写测试报告.事情并不复杂,可做起来却极为耗时. 首先,由于有6组账号,分 ...
随机推荐
- spring boot 数据库连接池配置
HikariCP 连接池配置: http://stackoverflow.com/questions/29650501/hikaricp-starts-when-mvn-spring-bootrun- ...
- 横竖屏事件响应(viewWillLayoutSubviews和通知)两种方式
转载:http://blog.csdn.net/nogodoss/article/details/17246489 最近搞横竖屏,获得一些心得,特记录下来. 做横竖屏最重要的是确定横竖屏响应的接口.目 ...
- 【转】oracle创建表空间
原文:http://www.cnblogs.com/netsql/articles/1745978.html 注意点: 1.如果在PL/SQL 等工具里打开的话,直接修改下面的代码中[斜体加粗部分]执 ...
- 读完了csapp(中文名:深入理解计算机系统)
上个星期最终把csapp看完了. 我买的是中文版的,由于除了貌似评价不错以外,由于涉及到些自己不了解的底层东西,怕是看英文会云里雾里.如今看来,大概不能算是个长处,可是的确可以加快我的看书速度,否则一 ...
- cocosbuilder中的Callbacks和sound effects
cocosbuilder3中有增加了 Callback和sound effects 的timeline 这个东西用来在动画播放过程中控制音效和回调动作,非常方便 按住option键(alt), 点击t ...
- MySQL主主复制+LVS+Keepalived实现MySQL高可用性
http://bestvivi.com/2015/09/09/MySQL%E4%B8%BB%E4%B8%BB%E5%A4%8D%E5%88%B6+LVS+Keepalived%E5%AE%9E%E7% ...
- Android 自定义View修炼-仿QQ5.0 的侧滑菜单效果的实现
有一段时间没有写博客了,最近比较忙,没什么时间写,刚好今天有点时间, 我就分享下,侧滑菜单的实现原理,一般android侧滑的实现原理和步骤如下:(源码下载在下面最后给出哈) 1.使用ViewGrou ...
- Storm集群扩容——从单机模式拓展到集群模式,以此类推
Storm是分布式的实时流处理系统,单机模式肯本不能体现其强大特点,尤其是当需要处理的数据很大很快的 时候,Storm可以随时扩容,而且操作非常简单,编写的应用程序自动负载均衡. 前面已经介绍了如何安 ...
- mysql 中间件 分析
360的Atlas 1.读写分离 2.从库负载均衡 3.IP过滤 4.自动分表 5.DBA可平滑上下线DB 6.自动摘除宕机的DB altas 在10000/s的请求量级应该是毫无问题的 https: ...
- C#扫盲之:String字符串的常用方法和冷知识
前言 字符串对于任何编程语言都是必须操作和了解的,因为在实际编程中,任何项目和工程都必须要处理字符串数据,文件路径.提示消息,文本的处理等等,而在使用过程中很多人都是没有系统的了解,大量使用strin ...