highcharts 结合phantomjs纯后台生成图片系列二之php
上篇文章中介绍了phantomjs的使用场景,方法。本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片。
一.准备:
下载phantomjs解析插件,从 highcharts官方 下载所需插件.
新建一个工程文件夹名位:phantomjs,所必备的js文件有:
highcharts 结合phantomjs纯后台生成图片系列二之php
highcharts 结合phantomjs纯后台生成图片系列二之php
其中jquery.js为v1.7.1;
highcharts-convert.js的下载地址可去 github上下载 .
highcharts官方文档有关于highcharts-convert.js的使用介绍:
PhantomJS is started from the command line with our highcharts-convert.js script as first parameter. With the other command line parameters we pass over the Highcharts configuration, the name of the output file and parameters for the graphical layout. Example usage on the command line:
phantomjs highcharts-convert.js -infile options.js -outfile chart.png -scale 2.5 -width 300
参数说明如下:
highcharts 结合phantomjs纯后台生成图片系列二之php
详细说明请点 这里 .
我们知道highcharts在页面上展示时,是先通过php从表中取出数据后,组装好数组后,以json串传给highcharts即可。
那么看见上面的命令行,我们大概知道把 json串放在option.js文件里即可,那么,是不是这样呢?先看一个例子:
1.infile.json:
{ 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] }]};
2.callback.js:
function(chart) { chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({ fill : '#FCFFC5', stroke : 'black', 'stroke-width' : 1 }).add();}
3.执行:
phantomjs highcharts-convert.js -infile infile.json -callback callback.js -outfile a.png -width 2400 -constr Chart -scale 1
4.回车后,输出如下:
highcharts 结合phantomjs纯后台生成图片系列二之php
5.看看phantomjs目录下,生成了一个a.png:
highcharts 结合phantomjs纯后台生成图片
很明显,这就是一个由highcharts生成的图片。也就告诉我们之前猜想的是对的:
1.将提供数据的json串放入infile.json里;
2.通过在回调函数callback.js来渲染,就生了一张highchaarts图片;
highcharts 结合phantomjs纯后台生成图片系列二之php的更多相关文章
- highcharts 结合phantomjs纯后台生成图片系列二之php2
上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合 ...
- highcharts 结合phantomjs纯后台生成图片
highcharts 结合phantomjs纯后台生成图片 highcharts 这个图表展示插件我想大家应该都知道,纯javascript编写,相比那些flash图表插件有很大的优势,至少浏览器不用 ...
- [知识库分享系列] 二、.NET(ASP.NET)
最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...
- Web 开发人员和设计师必读文章推荐【系列二十九】
<Web 前端开发精华文章推荐>2014年第8期(总第29期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十七】
<Web 前端开发精华文章推荐>2014年第6期(总第27期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十三】
<Web 前端开发精华文章推荐>2014年第2期(总第23期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML5 ...
- Web 前端开发精华文章推荐(HTML5、CSS3、jQuery)【系列二十二】
<Web 前端开发精华文章推荐>2014年第一期(总第二十二期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各类能够提升网站用户体验的优秀 jQuery 插件,展示前沿的 HTML ...
- 【圣诞特献】Web 前端开发精华文章推荐【系列二十一】
<Web 前端开发精华文章推荐>2013年第九期(总第二十一期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 ...
- WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProp ...
随机推荐
- MySQL多实例-精典故障案例
很久以前搭建过MySQL多实例,记得当时很顺利,呵呵!今天公司因为业务需要,我再一次搭建多实例.安装完MySQL后,初始化两个实例时,出现如下报错: 150915 1:10:36 [ERROR] C ...
- Hadoop分布式安装
一.安装准备 1.下载hadoop,地址:http://hadoop.apache.org/,下载相应版本 2.下载JDK版本:Hadoop只支持1.6以上,地址:ht ...
- JAVA读取TXT文本中的数据
现在在Demo.txt中存在数据: ABC 需要将ABC从文本文件中读取出来 代码片: import java.io.*; class FileReaderDemo { public static v ...
- 敏捷开发之道(四)Scrum概述
上次的博文敏捷开发之道(二)极限编程XP和敏捷开发之道(三)极限编程XP续中,我们介绍了一下敏捷开发中的XP开发方法,今天咱们来了解另一个比较流行的敏捷开发方法--Scrum. 1.Scrum简介 S ...
- Log4j配置和简单使用
Log4j是一款基于Java的开源日志组件,Log4j功能非常强大,我们可以将日志信息输出到控制台.文件.用户界面,也可以输出到操作系统的事件记录器和一些系统常驻进程.更值得一提的是,Log4j可以允 ...
- DB天气app冲刺二阶段第四天
今天就进度来说没有丝毫进度..考虑直接把数据库文件弄到代码里.因为每次挑选城市的时候都有时会出bug ,所以我想明天试一下看看是不是这个的问题,虽然工程量有点大,但是应该不困难,所以明天试一下需要. ...
- android 讯飞语音识别(离线)注意事项
讯飞语音识别:使用注意事项:mainfest.xml中一定要记得权限写进去21001:我的情况是没有写SpeechApp类,并且需要在application中注册:20005:无匹配结果23300:本 ...
- 在windows 7搭建xcode开发环境
前言:本文适用于没有ios开发环境(如无iphone,mac等),在windows上搭建出ios的开发环境.值得注意的是,在windows搭建的ios开发环境只能做开发测试,无法发布产品.若需要发布产 ...
- 输入一个链表,输出该链表中倒数第k个结点。
// test14.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- K短路
K短路 用dijsktra+A*启发式搜索当点v第K次出堆的时候,这时候求得的路径是k短路.A*算法有一个启发式函数f(p)=g(p)+h(p), 即评估函数=当前值+当前位置到终点的最短距离g(p) ...