利用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. [转] shell字符串操作方法，以及实例

    每一种语言都有他独自的字符串操作方法,shell也一样,下面以以例子的方式,简单介绍常用方法. 1,取得字符串长度 string=abc12342341 //等号二边不要有空格 echo ${#str ...

  2. Python编码与解码

    # -*- coding: utf-8 -*- # 直接保存为Python脚本,对照执行结果会好看点. # 实验的内容都是在Python 2.7.x下进行的. # Python3默认采用unicode ...

  3. Windows Form 分页。

    其实功能实现很简单.我做的是一个通用的分页控件.项目时间很紧,可能有点粗糙.欢迎大家斧正.不说了直接贴代码吧. using System; using System.Collections.Gener ...

  4. C++中使用心得

    1.struct成员默认访问方式是public,而 class默认访问方式是private! 2.exit函数终止程序执行会调用析构函数 ,abort函数终止程序不会调用析构函数! 3.静态局部变量直 ...

  5. Leetcode-Read N Characters Given Read4 II

    The API: int read4(char *buf) reads 4 characters at a time from a file. The return value is the actu ...

  6. Android keyevent 中的各个值

    Android keyevent 中的各个值,在使用adb shell input 的时候用得到. 是从http://blog.csdn.net/huiguixian/article/details/ ...

  7. Android Bluetooth Stream Non-blocking Communication Tutorial

    This is a tutorial for Android to do non-blocking bluetooth socket communication. I am using 32feet ...

  8. C#根据日期DateTime和持续时间int找到日期

    protected DateTime GetFinish(DateTime start, int duration) { return start.AddDays(duration); } prote ...

  9. mybatis集成spring的事务管理

    第一 创建一个测试实体 public class Order { private int id; private String orderName; public Order(String order ...

  10. HTTP 错误 403.14 - Forbidden

    在打开一个网站时,显示HTTP 错误 403.14 - Forbidden 是一件很不幸的事情.我这几天打开某网站就出现了这个问题.Web 服务器被配置为不列出此目录的内容,错误代码0x0000000 ...