nodejs搭配phantomjs highcharts后台生成图表

简单分享一下，后台使用nodejs结合highcharts、phantomjs生成报表图片的方法。这主要应用在日报邮件。

主要参考以下资料：

http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts#phantom_usage
https://bitbucket.org/ariya/phantomjs/downloads
https://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs 这里整个目录都需要下载

关键是使用phantomjs模拟浏览器环境，这个是一个绿色的程序，无需安装。win7和64bit linux上亲测ok。

然后，大概我们需要部署一个类似这样的环境（代码地址 https://github.com/kenkozheng/HTML5_research/tree/master/NodeJS-Highcharts ）：

phantomjs是linux版，phantomjs.exe就是windows版。

那么在windows下，我们可以写：

var process = require("child_process");
process.exec('phantomjs.exe ./highcharts/highcharts-convert.js -infile options1.json -outfile chart1.png -constr Chart', {cwd: './'}, function (err, stdout, stderr) {console.log(err, stdout, stderr);
});

options1.json就是我们配置的数据。
需要注意的是，到了linux下，需要改为exec(‘./phantomjs …. 。当然，熟悉linux的同学都可以忽略我说的废话了。

当然，为了更方便使用，稍稍修改一下highcharts-convert.js，增加一个input参数，直接传入数据，而不需要读文件。

为了避免空格引号什么的问题，这里encode一下。

          for (i = 0; i < system.args.length; i += 1) {if (system.args[i].charAt(0) === '-') {key = system.args[i].substr(1, i.length);if (key === 'infile' || key === 'callback' || key === 'dataoptions' || key === 'globaloptions' || key === 'customcode') {// get string from filetry {map[key] = fs.read(system.args[i + 1]).replace(/^\s+/, '');} catch (e) {console.log('Error: cannot find file, ' + system.args[i + 1]);phantom.exit();}} else if(key === 'input'){map['infile'] = decodeURIComponent(system.args[i + 1]);     //这里是修改的部分} else {map[key] = system.args[i + 1];}}}

修改后就可以这么玩了：

var process = require("child_process");
var data = {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]}]
};
process.exec('phantomjs.exe ./highcharts/highcharts-convert.js -input ' + encodeURIComponent(JSON.stringify(data)) + ' -outfile chart1.png -constr Chart', {cwd: './'}, function (err, stdout, stderr) {console.log(err, stdout, stderr);
});

另外，在linux下，还可能遇到生成图片后，字体无法显示的问题。

到/usr/share/fonts/里边补回相应的字体文件即可（可以直接把windows的复制过去）。
复制过去后，需要fc -cache -fv一下，刷新一下系统的字体缓存。

kenkofox@qq.com https://github.com/kenkozheng 欢迎投简历给我，力推腾讯工作机会

转载于:https://www.cnblogs.com/firstdream/p/5119935.html

nodejs搭配phantomjs highcharts后台生成图表相关推荐

Java后台生成图表——主代码（折线图，饼状图，柱状图，-》并产出图片PDF或其他格式的图片内容）
声明: 本文采用的数据均来源于网络,本人只用于学习记录,若有侵权,还望能及时联系. Maven 的 POM 依赖 <!--用于jfreechart生成图片 --&g ...
使用 HighCharts 动态获取后台数据生成图表
在最近的一个小项目中,因为需要统计一些数据,便想着把它做成一个图表的样式更直观的显示.因为考虑到需要在页面上灵活的展示,所以就放弃了使用 jfreechart,很早便听说过 HighCharts这个生 ...
纯后台生成highcharts图片有哪些方法?
比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢? 本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只 ...
java后台生成echarts图表
java后台生成echarts图表最近博主在做一个项目,需要后台出图和前端echarts一样的图,比如折线图和柱状图. 经过一番整理,顺利实现了该功能,特此分享,需要白嫖的,拿走不谢. 直接上效果图 ...
java echarts 生成图片_java如何在后台生成echarts图表？实际代码展示
学习是一个永无止境的过程,关于java的学习更是如此.今天主要为大家介绍下,如何在java中后台生成echarts图表,并且为大家展示实际的操作流程. 首先说下它的适用情况:⑴.支持echart4.0 ...
java后台生成含有echarts图表的报告并发送邮件
无头浏览器使用业务场景, 有一个报告的预览页面,这个页面中含有echarts图表,点击下载报告之后,调用echarts的getDataURL()方法将图片数据传到后台,在后台生成word或者pdf. ...
利用ECharts在线生成图表
我们可以使用ECharts获取后台数据,通过Ajax,JavaScript在线生成图表. 我们制作测试用例,就不使用自动加载,采用手动方式进行生成,让流程直观. <a href="#& ...
java实现将数据生成图表至excel导出(包括折线图,柱状图,饼状图)
1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使用图表信息字符串. 2. 说明使用jfree图表绘制类库绘制图表,并生成到本 ...
java实现将数据生成图表至excel导出
https://www.jianshu.com/p/6c4f3832c396 1. 目的根据已有数据,手动(java后台)生成图表至excel并导出.用于后台查询到数据后直接创建图表,可以代替直接使 ...