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

上篇文章中介绍了phantomjs的使用场景,方法。本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片。

一.准备:

下载phantomjs解析插件,从 highcharts官方 下载所需插件.

新建一个工程文件夹名位:phantomjs,所必备的js文件有:

其中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在页面上展示时,是先通过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图片;

时间: 2024-07-31 16:42:22

highcharts 结合phantomjs纯后台生成图片系列二之php的相关文章

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

上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合phantomjs纯后台生成图片系列的准备: 下载phantomjs解析插件,从highcharts官方下载所需插件. 新建一个工程文件夹phantomjs,所必备的js文件有: highcharts 结合phantomjs纯后台生成图片系列二之php 其中jquery.js为 v1.7.1; hi

Highcharts使用phantomjs导出图片

Highcharts使用phantomjs导出图片 ?Highcharts使用phantomjs导出图片 描述 在用Highcharts这个强大的图标组件时,你一定在某些时刻想把画出来的图标导出为一个图片并下载到本地.Highcharts本身提供了导出功能,只需要导入exporting.js文件,就可以在图表右上角找到导出按钮了.这已经基本满足的大多数情况我们的需求.但是这原始到导出是发送请求到Highcharts的服务器上进行转化的,很多时候我们并不想把我们的数据信息暴露给他们,所以我们必须在

ASP.NET MVC学习系列(二)-WebAPI请求

继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的get和post请求,我们在Web API中要如何来处理. 这里我使用Jquery 来发起异步请求实现数据调用. 继续使用上一文章中的示例,添加一个index.html页面,添加对jquery的引用. 一.无参数Get请求 一般的get请求我们可以使用jquery提供的$.get() 或者$.ajax({type:"get"}) 来实现: 请求的后台Action方法仍为上篇文章中的GetU

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法

WPF入门教程系列(二) 深入剖析WPF Binding的使用方法 同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置binding对象的方法名得知: public static BindingExpressionBase SetBinding( DependencyObject target, DependencyProperty dp, BindingB

Android后台杀死系列之一:FragmentActivity及PhoneWindow后台杀死处理机制

App在后台久置后,再次从桌面或最近的任务列表唤醒时经常会发生崩溃,这往往是App在后台被系统杀死,再次恢复的时候遇到了问题,而在使用FragmentActivity+Fragment的时候会更加频繁.比如,如果Fragment没有提供默认构造方法,就会在重建的时候因为反射创建Fragment失败而崩溃,再比如,在onCreate里面new 一个FragmentDialog,并且show,被后台杀死后,再次唤醒的时候,就会show两个对话框,这是为什么?其实这就涉及了后台杀死及恢复的机制,其中涉

Cordova Android源码分析系列二(CordovaWebView相关类分析)

本篇文章是Cordova Android源码分析系列文章的第二篇,主要分析CordovaWebView和CordovaWebViewClient类,通过分析代码可以知道Web网页加载的过程,错误出来,多线程处理等. CordovaWebView类分析 CordovaWebView类继承了Android WebView类,这是一个很自然的实现,共1000多行代码.包含了PluginManager pluginManager,BroadcastReceiver receiver,CordovaInt

数据分页模块系列 (二) 完美封装PageModel实现分页模块

先说一下框架分页技术,在我们之前那个高校项目中使用DWZ实现的分页用了自定义标签使用起来也比较方便,除了DWZ很多框架已经给我们做好了分页我们需要做的仅仅是把一些分页参数传给我们的框架,俗话说你用别人的东西就得按着别人的来,得按着别人的框架进行布局了.传参了等等,这样灵活性大大降低,况且感觉使用框架频繁的一些软件一般是一些管理类型的,对界面的美观方便需求并不是很高,工整.能用就可以,然而呢,还有些界面需要灵活配置分页按钮.分页条等,这就需要把类似于这样的功能封装起来. 分页的模块很多人都在写都在

玩玩asp.net 2.0的caching系列二 - RemoveOutputCacheItem

在asp时代,要作cache通常是用application来存数据, 要完整一点的.就是自己写个class来操作application控制要cache的数据. 但是在asp.net,页面要cache变得简单许多. 只要一行 就可以了, 但是,现在问题又来了, 客户希望后台新增完后他要立即可以从前台看到更新的数据. 先前在网络上看到是有说只要页面有修改outputcache就会被清除. 但是...这是在测试时候的方式, 在production环境的页面应该是不能让客户每次更新完就去动一下页面. 要

iOS开发UINavigation系列二——UINavigationItem

iOS开发UINavigation系列二--UINavigationItem 一.引言 UINavigationItem是导航栏上用于管理导航项的类,在上一篇博客中,我们知道导航栏是通过push与pop的堆栈操作来对item进行管理的,同样,每一个Item自身也有许多属性可供我们进行自定制.这篇博客,主要讨论UINavigationItem的使用方法. UINavigationBar:http://my.oschina.net/u/2340880/blog/527706. 二.来说说UINavi