利用PhantomJS搭建Highcharts export服务

一直在使用Highcharts做web图表的展示, 但是当发送定时的报表邮件的遇到了这个问题. 为了保证邮件图表和web页图表样式一致, 需要能原样生图. 这里考虑如下:

1. 如何生成jpg图片

在很久以前,官方推荐用Imagemagick将SVG转成jpg. 考虑如何得到SVG, 大量文档推荐用 nodejs+jsdom从json数据中生成svg. 在实际使用中,  Imagemagick和jsdom环节处理复杂的数据都非常孱弱, 复杂的图表丢东少西难看要死, 无法上线. 在google上纠结好久, 终于发现了这神器PhantomJS.

做测试这么久, 尽然不知道PhantomJS这种神器. 简单说, PhantomJS是个不显示UI的浏览器, 可以无GUI的server上使用. 而且核心为webkit, 轻松支持Highcharts等几乎所有的js库. 在本文中, PhantomJS拿来解决这个问题再合适不过. 只需要想办法把数据传给PhantomJS, 简单几句代码, 截个图就行了.

2. 数据传递

下面这个问题就是怎么把数据传给PhantomJS. PhantomJS支持命令行, 在服务器端, (一般为Java, Python, PHP),  与JS交互的最好数据格式就是JSON. 但是JSON数据比较大时, 直接用命令行就不行了.  传递方式可以选:

  1. fork子进程, 利用其stdin吐进去
  2. 生成一个json临时文件, 命令行指定该文件地址
  3. 利用PhantomJS的webserver模块单独开启一个服务, 向其POST

三种方式都可以, 看具体的需求. 第二种比较简单, 就是总要生成中间文件, 不是很喜欢....

还有一个问题, 利用JSON提供基本数据还可以, 但是传递控制显示样式的callback函数(比如formatter)比较麻烦. 如果所有图表样式统一还好说, 在PhantomJS脚本内写死就可以. 对于图表需要个性样式的情况, 目前想到的解决办法是, 将callback写成各个js文件, 在传递JSON时指定一个额外的配置, 确定读取哪个js文件, 然后再统一到一起.

这两个问题解决, 就可以直接从服务器端生成图片了.

补充: 刚看到了官方的解决方案, 跟我想法差不多, 地址如下:

http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts

而且在文章后半部, 指出了PhantomJS在数据点过多情况下的性能问题.

稍有不同的是, 官方使用了命令行参数指定callback js文件, 并且callback是通过Highcharts强大的api来调整样式的. 而不是向本文一样做合并.

https://github.com/highcharts/highcharts-export-server/tree/master/phantomjs

http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts

https://github.com/one2team/highcharts-serverside-export

http://www.cnblogs.com/mgzy/p/3850183.html

http://download.csdn.net/detail/yexiufei123/8876521

http://phping.sinaapp.com/highcharts-%E7%BB%93%E5%90%88phantomjs%E7%BA%AF%E5%90%8E%E5%8F%B0%E7%94%9F%E6%88%90%E5%9B%BE%E7%89%87%E7%B3%BB%E5%88%97%E4%BA%8C%E4%B9%8Bphp/

利用PhantomJS搭建Highcharts export服务的更多相关文章

  1. 在Windows 10上利用seafile搭建个人云服务

    参考seafile官方文档 安装Python 2.7.11 32位版 下载地址:https://www.python.org/downloads/release/python-2711/ 选择 32位 ...

  2. 利用OpenStreetMap（OSM）数据搭建一个地图服务

     http://www.cnblogs.com/LBSer/p/4451471.html 图 利用OSM数据简单发布的北京地图服务   一.OSM是什么 开放街道图(OpenStreetMap,简称O ...

  3. 利用NTP搭建自己的ntp服务

    利用NTP搭建自己的ntp服务 发表于 2013 年 9 月 22 日 作者 admin 对于校园网/企业用户,如果您网内所有计算机都通过互联网同步时间,在速度和精度上都有一定的折扣,并且对互联网出口 ...

  4. 利用 MinIO 轻松搭建静态资源服务

    目录 1 引言 2 MinIO 简介 3 MinIO 运行与静态资源使用 3.1 MinIO 获取 3.2 MinIO 启动与运行 3.2.1 前台简单启动 3.2.2 后台指定参数运行 3.2.3 ...

  5. Docker系列——利用gogs搭建属于自己的git服务

    gogs简介 Gogs的目标是打造一个最简单.最快速和最轻松的方式搭建自助Git服务.使用Go语言开发使得Gogs能够通过独立的二进制分发,并且支持Go语言支持的所有平台,包括 Linux.Mac O ...

  6. 利用Hexo搭建个人博客－环境搭建篇

    我是一个爱写博客进行总结分享的人.然而,有着热爱写博客并且深知写博客好处的我,却没有好好的把这个习惯坚持下来.如今毕业已经一年多了吧,每一次与师弟师妹们聊天,我总会意味深长的建议他们,一定要定期梳理总 ...

  7. 如何将phantomjs单独部署在服务端

    如何将phantomjs单独部署在服务端 文章目录 一. 容我分析(lao dao)几句 二. 服务端 Look here 服务端phantomjs搭建 web端搭建及如何调用phantomjs 三. ...

  8. 利用 Docker 搭建 IPFS 私有网络

    利用 Docker 搭建 IPFS 私有网络 本文原始地址:https://sitoi.cn/posts/40630.html 下载项目 项目地址:https://github.com/Sitoi/p ...

  9. ZooKeeper1 利用虚拟机搭建自己的ZooKeeper集群

    前言:       前段时间自己参考网上的文章,梳理了一下基于分布式环境部署的业务系统在解决数据一致性问题上的方案,其中有一个方案是使用ZooKeeper,加之在大数据处理中,ZooKeeper确实起 ...

随机推荐

  1. python 数字、字符串、列表常用函数

    一.数字的标准类型: cmp():比较两个数的大小:返回值(-1,0,1). str():数字转化成字符串. type():返回数字类型. 转换工厂函数: int(obj,base=10) long( ...

  2. python之super()函数

    python之super()函数 python的构造器奇特, 使用魔方. 构造器内对基类对象的初始化同样也很奇特, 奇特到没有半点优雅! 在构造器中使用super(class, instance)返回 ...

  3. HTTP报文格式

    请求报文 <method><SP><uri><SP><version><CRLF> <head-name><: ...

  4. c++数组-矩阵的转置

    #include <iostream> using namespace std; int main(){ ][]={{,,},{,,}}; ][]; ;j<;j++){ ;i< ...

  5. iTween基础之Punch（摇晃）

    一.基础介绍:二.基础属性 原文地址 : http://blog.csdn.net/dingkun520wy/article/details/50828042 一.基础介绍 PunchPosition ...

  6. Sublime Text 2 入门

    SublimeText 2 的介绍视频: http://player.youku.com/player.php/partnerid/XOTcy/sid/XMzU5NzQ5ODgw/v.swf   以下 ...

  7. Notes of the scrum meeting(10/28)

    meeting time:4:00~6:00p.m.,October 28th,2013 meeting place:雕刻时光 attendees: 顾育豪                       ...

  8. 如何利用OpenCV自带的级联分类器训练程序训练分类器

    介绍 使用级联分类器工作包括两个阶段:训练和检测. 检测部分在OpenCVobjdetect 模块的文档中有介绍,在那个文档中给出了一些级联分类器的基本介绍.当前的指南描述了如何训练分类器:准备训练数 ...

  9. C++拷贝构造函数详解（转载）

    一. 什么是拷贝构造函数 首先对于普通类型的对象来说,它们之间的复制是很简单的,例如: int a = 100; int b = a; 而类对象与普通对象不同,类对象内部结构一般较为复杂,存在各种成员 ...

  10. 1452: [JSOI2009]Count - BZOJ

    Description Input Output Sample Input Sample Output 1 2HINT 一开始还想什么离线做,其实不用,空间足够,我们直接开100个二维树状数组,然后就 ...