利用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. SQL Server中如何用mdf，ldf文件还原数据库

    不论是手动还原还是写个脚本还原,首先都要修改文件的属性为可读写,另外这个用户能够修改 1.手动Attach 2.写个脚本还原 我个人比较喜欢写个脚本去还原 Exec sp_attach_db @dbn ...

  2. tcp-client-c++

    #include "stdafx.h" #include <Winsock2.h> #include <iostream> #pragma comment( ...

  3. Nginx 老是抢先捕获了404 我想这个404我Yii项目来处理 要怎么配置？

    配置Nginx vhost的时候别指定error_page 它就不会跟Yii抢生意了 or 你弄一个frontendController   然后再里面 加上 $user->loginRequi ...

  4. （转）c指针

    转自:http://www.cnblogs.com/wchhuangya/archive/2009/12/24/1631121.html 这两天开始搞BREW了,用的是C的语法.上学时学过的C都还给学 ...

  5. JPA学习---第二节：JPA开发环境和思想介绍

    一.下载相关 jar http://hibernate.org/orm/ 下载 hibernate ,解压 http://www.slf4j.org/download.html 下载 slf4j,解压 ...

  6. 如何在eclipse中添加android ADT

    百度经验:http://jingyan.baidu.com/article/b0b63dbfa9e0a74a4830701e.html 截图:

  7. EXT经验--查询items的xtype

    前言:EXT由多个组件组成,每个组件可配置多个子组件(items),而每个子组件也可嵌套多个子组件(items)--给人一种子子孙孙无穷匮也的印象,这对于初学者引来一个很重要的问题,特别是阅读他人编写 ...

  8. JS Web打印，实现预览新样式

    问题描述:     JS实现Web打印,要求打印前一种样式,打印预览时新样式 问题解决:         (1)设置打印时的css样式,设置打印前的css样式 注:         以上为print. ...

  9. Android工具包

    Eclipse + ADT +SDK,下载ADT Bundle全包含 adt-bundle-windows-x86_64-20140702 http://www.cnblogs.com/tc310/p ...

  10. 01-06-01【Nhibernate (版本3.3.1.4000) 出入江湖】事务

    Nhibernate事务的使用: public void Add(Customer customer) { ISession session = _sessionManager.GetSession( ...