nodejs搭配phantomjs highcharts后台生成图表

简单分享一下,后台使用nodejs结合highcharts、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 file
                         try {
                              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一下,刷新一下系统的字体缓存。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java技术

使用Spring Session和Redis解决分布式Session跨域共享问题

对于分布式使用Nginx+Tomcat实现负载均衡,最常用的均衡算法有IP_Hash、轮训、根据权重、随机等。不管对于哪一种负载均衡算法,由于Nginx对不同的...

722
来自专栏魏艾斯博客www.vpsss.net

Batcache 插件给服务器提速的安装过程

魏艾斯博客写过有关开启 memcached,opcache 缓存的文章,前者是内容缓存插件,后者是 php 缓存插件,本来以为服务器优化折腾到此就差不多了,这几...

803
来自专栏IMWeb前端团队

AS3程序员小福利--as3js介绍及FlashDevelop工程的配置

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载 ? 什么是AS3JS? AS3JS是ActionScript 3.0到Jav...

1986
来自专栏CRPER折腾记

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天...

702
来自专栏前端儿

趁webpack5还没出,先升级成webpack4吧

webpack4升级完全指南 webpack4 changelog React 16 加载优化性能

1733
来自专栏Python绿色通道

高级爬虫(三):使用Scrapy爬取拉勾网数据并写入数据库

之前我们讲到了使用Scrapy,今天我们使用Scrapy来作一个项目实战。Scrapy详细教程可以看前面两篇:

734
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(12)——跳过验证码登录add_cookie

3515
来自专栏MixLab科技+设计实验室

设计师编程指南之Sketch插件开发 10 - skpm & webview

往期文章索引: 1 / 入门基本概念、page的相关操作 2 / artboard 、NSFileManager 和 NSString 关于文件及文件夹的相关操...

3457
来自专栏小特工作室

PB调用WebService示例(含源码)

说起PowerBuilder,可能大家都会嗤之以鼻,然后说一句:“哥们,还用呢啊”?记得以前看过的电影“功夫熊猫“里说:存在即是合理。我想说得是,世界上如果...

2269
来自专栏用户2442861的专栏

make makefile cmake qmake都是什么,有什么区别?

作者:玟清 链接:https://www.zhihu.com/question/27455963/answer/36722992 来源:知乎 著作权归作者...

391

扫码关注云+社区