前言

当项目需要将一个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二进制可执行文件。

https://bitbucket.org/ariya/phantomjs/downloads 直接下载二进制文件(我现在的环境打不开这个页面了,估计要翻墙)

安装完之后,在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图表图片的更多相关文章

  1. 使用poi和jfreechart生成excel图表图片

    最近项目在频繁的操作excel,里边涉及到很多和图表有关的东西.有时候需要使用java操作excel自带的图标,比较复杂的我们都是使用excel模板的形式实现. 除此之外,也有一些功能只需要生成对应的 ...

  2. Highcharts结合PhantomJS在服务端生成高质量的图表图片

    项目背景 最近忙着给部门开发一套交互式的报表系统,来替换原有的静态报表系统. 老系统是基于dotnetCHARTING开发的,dotnetCHARTING的优势是图表类型丰富,接口调用简单,使用时只需 ...

  3. 【phantomjs】使用phantomjs生成highChart的图片(待完善)

    阅读目录 //center }, subtitle: { text: 'Source: WorldClimate.com', x: -20 }, xAxis: { categories: ['Jan' ...

  4. 使用PowerDesigner 15进行逆向工程生成数据库图表时,列的注释问题

    上一章讲了对数据库进行逆向工程生成图表操作,可能会遇到无法生成注释的问题: 一.解决PowerDesigner逆向工程没有列注释 1.打开PowerDesigner 15,选择菜单:File→Reve ...

  5. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  6. FusionCharts生成Flash图表常见问题FAQ

    本文主要汇总了FusionCharts生成Flash图表时的一些常见问题(FAQ)以及解决方法/调试方法,欢迎交流! 问题描述:利用FusionCharts创建Flash图表时,能否直接从数组或rec ...

  7. echarts生成的图表大小怎么随屏幕的大小改变自适应

    最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...

  8. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

  9. 使用Jmeter聚合报告生成对比图表

    背景 最近在帮别的项目组执行性能测试,使用的工具是Jmeter.接口录制和参数化前一个人已经做好了,我主要的工作就是执行脚本,撰写测试报告.事情并不复杂,可做起来却极为耗时. 首先,由于有6组账号,分 ...

随机推荐

  1. 判断文件是否存在(exist)

    set datedir=%date:~0,4%%date:~5,2%%date:~8,2%if exist d:\rollback\%datedir%\Server\ (rename d:\rollb ...

  2. 让ie9之前的版本支持canvas

    原来google的研发人员早就帮我们解决了这问题. 在这里我们得首先感谢google 在这链接http://excanvas.sourceforge.net/ 下载下来后 吧excanvas.js引入 ...

  3. [Javascript] Lodash: Refactoring Simple For Loops (_.find, _.findLast, _.filter)

    This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style ...

  4. iOS开发经验总结(上)

    在iOS开发中经常需要使用的或不常用的知识点的总结,几年的收藏和积累(踩过的坑). 一. iPhone Size 手机型号 屏幕尺寸 iPhone 4 4s 320 * 480 iPhone 5 5s ...

  5. android自定义View之仿通讯录侧边栏滑动,实现A-Z字母检索

    我们的手机通讯录一般都有这样的效果,如下图: OK,这种效果大家都见得多了,基本上所有的android手机通讯录都有这样的效果.那我们今天就来看看这个效果该怎么实现. 一.概述 1.页面功能分析 整体 ...

  6. Struts---- <s:bean>标签

    近几天学习的都是跟struts有关的.详细写<s:bean>标签 具体内容为: 一.准备工作 1.新建Web工程 2.添加struts:右键点击工程名选择My Eclipse-->点 ...

  7. 深入Windows窗体原理及控件重绘技巧

    之前有学MFC的同学告诉我觉得Windows的控件重绘难以理解,就算重绘成功了还是有些地方不明白,我觉得可能很多人都有这样的问题,在这里我从Windows窗体的最基本原理来讲解,如果你有类似的疑惑希望 ...

  8. 首页的sitecontent地址

    当无法出现工具栏时,利用url地址,可以方便直接进入sitecontent http://sp2013/sites/bentest/_layouts/15/viewlsts.aspx

  9. ionic(一) build你的第一个android apk

    1.ionic start myApp tabs    >>创建一个app 2.cd myApp  >>进入myApp文件 3.ionic platform add andro ...

  10. Android中使用shape实现EditText圆角

    之前看到手机上的百度editText控件是圆角的就尝试做了一下,看了看相关的文章. 因为代码少,看看就知道了.所以下面我就直接贴上代码供大家参考,有其他的好方法记得分享哦~ 整个代码不涉及JAVA代码 ...