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 条评论
登录 后参与评论

相关文章

来自专栏程序猿DD

Spring Cloud构建微服务架构:Hystrix监控面板【Dalston版】

前言 在上一篇《服务容错保护(hystrix断路器)》的介绍中,我们提到断路器是根据一段时间窗内的请求情况来判断并操作断路器的打开和关闭状态的。而这些请求情况的...

2207
来自专栏nimomeng的自我进阶

基于Jenkins的CocoaPods化iOS项目构建+蒲公英/FIR系统发布

本文以本地和Git为例,结合CocoaPods,简单介绍了如何用jenkins来进行CI编译并上传蒲公英和Fir生成相应二维码的流程。

1943
来自专栏张戈的专栏

零门槛!使用Docker快速部署ES集群

自从接触 Docker 之后,对 Docker 简直是爱不释手,做什么都是行云流水。遇到部署开源软件需求,第一时间想到的都是有没有现成的 Docker 镜像?能...

3K4
来自专栏SpringBoot 核心技术

第三十九章:基于SpringBoot & Quartz完成定时任务分布式单节点持久化

68010
来自专栏菩提树下的杨过

spring-boot 速成(1) helloworld

一、mac上安装 $ brew tap pivotal/tap $ brew install springboot 安装成功后,可在终端查看命令行 ➜  ~ s...

2298
来自专栏菩提树下的杨过

spring-boot 速成(1) helloworld

一、mac上安装 $ brew tap pivotal/tap $ brew install springboot 安装成功后,可在终端查看命令行 ➜  ~ s...

2325
来自专栏三杯水

ELKB5.2.2集群环境部署配置优化终极文档

3,logstash filter 加入urldecode支持url、reffer、agent中文显示

3602
来自专栏battcn

一起来学SpringBoot | 第三篇:SpringBoot日志配置

SpringBoot 内部采用的是 CommonsLogging进行日志记录,但在底层为 JavaUtilLogging、 Log4J2、 Logback 等日...

1373
来自专栏乐沙弥的世界

基于Linux (RHEL 5.5) 安装Oracle 10g RAC

    本文所描述的是在Red Hat 5.5下使用vmware server 来安装Oracle 10g RAC(OCFS + ASM),本文假定你的RHEL...

1563
来自专栏朱慕之的博客

Hello Hexo

Welcome to Hexo! This is your very first post. Check documentation for more info...

871

扫码关注云+社区

领取腾讯云代金券