简单分享一下,后台使用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一下,刷新一下系统的字体缓存。

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

nodejs搭配phantomjs highcharts后台生成图表的更多相关文章

  1. highcharts 结合phantomjs纯后台生成图片系列二之php2

    上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合 ...

  2. highcharts 结合phantomjs纯后台生成图片

    highcharts 结合phantomjs纯后台生成图片 highcharts 这个图表展示插件我想大家应该都知道,纯javascript编写,相比那些flash图表插件有很大的优势,至少浏览器不用 ...

  3. highcharts 结合phantomjs纯后台生成图片系列二之php

    上篇文章中介绍了phantomjs的使用场景,方法.本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片. 一.准备: 下载phantomjs解析插件,从 highc ...

  4. 纯后台生成highcharts图片有哪些方法?

    比如说,领导抛给你一个需求,把一些数据做成图表,每天通过邮件发送,让领导能在邮件中就看到图片,你会有什么思路呢?本人使用的是phantomjs这个神器,它的内核是WebKit引擎,不提供图形界面,只能 ...

  5. Highcharts使用二维数组生成图表

    Highcharts使用二维数组生成图表 二维数组是更为灵活的一种数据存储方式.在Highcharts中.能够使用配置项column和rows二维数组.对于使用columns构建的二维数组,Highc ...

  6. 百度echart如何动态生成图表

    百度echart如何动态生成图表 一.总结 一句话总结: clear hideloading setOption 主要是下面三行代码: myChart.clear(); //清空画布myChart.h ...

  7. 深入浅出ghostbuster剖析NodeJS与PhantomJS的通讯机制

    深入浅出ghostbuster剖析NodeJS与PhantomJS的通讯机制 蔡建良 2013-11-14 一. 让我们开始吧 通过命令行来执行 1) 进行命令窗口: cmd 2) 进入resourc ...

  8. 使用ichartjs生成图表

    官网:http://www.ichartjs.com/ ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. ichartj ...

  9. highCharts+Struts2生成柱状图

    这篇文章主要结合Struts2+json+Highcharts实现动态数据的显示.为了节省时间,就不写数据库了.在action中用一个集合来模拟从数据库取到的数据.模拟数据为三个学生在不同时间成绩的变 ...

随机推荐

  1. 【UIScrollView】基本方法+基本描述

    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(, , , )]; scrollView.backgroundColor = [ ...

  2. Eclipse启动的时候窗口一闪就关的解决办法(转)

    有时候会碰到如题这种问题,从网上查知解决办法,非常管用 为eclipse.exe创建一个快捷方式,然后快捷方式上右键-属性,在目标栏填入 E:\eclipse\eclipse.exe -vm &quo ...

  3. Makedown常用符号整理

    整理自:http://www.jianshu.com/p/1e402922ee32 不过这里发现博客园的makedown语法支持还不完善,代码语法显示挺有问题的,比较遗憾. 标题 # 一级标题## 二 ...

  4. [resource-]Python 网页爬虫 & 文本处理 & 科学计算 & 机器学习 & 数据挖掘兵器谱

    reference: http://www.52nlp.cn/python-%e7%bd%91%e9%a1%b5%e7%88%ac%e8%99%ab-%e6%96%87%e6%9c%ac%e5%a4% ...

  5. html+css学习笔记 4[定位]

    如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a ...

  6. 2436: [Noi2011]Noi嘉年华 - BZOJ

    Description NOI2011 在吉林大学开始啦!为了迎接来自全国各地最优秀的信息学选手,吉林大学决定举办两场盛大的 NOI 嘉年华活动,分在两个不同的地点举办.每个嘉年华可能包含很多个活动, ...

  7. Objective-C传递数据小技巧

    转自:http://www.guokr.com/blog/203413/ 比如说,如果你想向UIAlertView的delegate方法中传递一些信息,怎么办?继承UIAlertView么?使用Cat ...

  8. (ASP.NET)C#连接Oracle数据库示例(中文乱码问题解决)

    接手了一个遗留的ASP.NET系统,数据库用的是Oracle,以前没搞过.NET和Oracle数据库,数据库搞了半天才解决乱码问题,在此做个笔记备忘. 1.下载安装ODAC 1)请去Oracle官网下 ...

  9. 【BZOJ】【2693】JZPTAB

    莫比乌斯反演 PoPoQQQ讲义第5题,是BZOJ 2154的升级版(多次询问) 题解:http://blog.csdn.net/popoqqq/article/details/42078725 WA ...

  10. CString向char类型转化 ---“=”: 无法从“wchar_t *”转换为“char *

    此文从网上复制过来,原文出处已丢失,望见谅哈       VC 2005中,这个本来很简单的问题又稍微复杂了一点.    在工程里面,一个必不可少的步骤就是把CString转换为shar*字符串.通过 ...