基于PHP的HTML5交互式图表

下载后可任意编辑 基于PHP的超炫酷HTML5交互式图表 用PHP实现专业级的基于Web的图表，而无需深化的HTML5和JavaScript知识。 介绍 最近，我需要从一组PHP数据组快速创建图表。要求图表必须是交互式的，用户友好的，也可下载的。在评估了一些PHP图表的解决方案，包括phpChart、pChart和Highcharts之后，我决定采纳phpChart作为我的首选工具。 背景 作为一个主要的后端程序员，我既没有很多时间去慢慢讨论使用JavaScript（客户想要在24小时内就能在网上看到图表），也不具备先进的前端编码知识。从根本上说，我希望几乎没有任何前端编程经验的PHP开发人员也能够快速开发出精致的图表。 我试过pChart，一个流行的PHP图表库。生成的图表看起来挺不错，虽然是可下载的，但图表都是静态图像。Highcharts似乎是最好的选 择。图表看上去令人惊艳，又是动画的，并且有很多自定义选项，但同时，它也是非常复杂的，而且需要大量的JavaScript知识。 Highcharts既不是专为PHP设计的，用于商务也不是免费的。 phpChart的基本要素 我最喜爱phpChart的地方就是它能让人从简单和最少量的代码入手。 phpChart精简版可以从这里下载http://phpchart.org/downloads/。下载文件并解压到网站根目录。 设置conf.php 我们要做的第一件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在你的Web服务器上的phpChart库的相对或绝对URL。 1. define( SCRIPTPATH , /phpChart/ ); 创建最简单的图表 1. 包含PHP头文件conf.php： 2. require_once(“/conf.php“); 调用构造函数C_PhpChartX，最后调用draw()函数。 1. $pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), ‘simplest_graph’); 2. $pc->draw(); 这就是开始你需要的代码。下面是经过渲染的输出。 这就是我所谓的最少量的编码。当你有一个团队的程序员来工作的时候，艰辛地去学习基础就没有意义了。任何程序员尽快想要做的一件事就是从一组新的库或工具埋头讨论复杂的文档。 顺便说一句，构造函数中的第二个参数的命名对你的图表而言应该是唯一的。我键入的是“simplest_graph”，也可以是任何非空格字符串。它必须是一个唯一的值，这样你才可以在一个页面中拥有多个图表。 添加标题 你应该为你的图表添加标题，以便用户知道他们在看什么。 1. $pc->set_title(array( text =>’My Simplest Graph )); 添加动画 pChart做不到的其中一件事就是动画。在phpChart中，动画支持通过简单地调用set_animate和传递true值即可使用。 1. $pc->set_animate(true); 就是这样。此时你的图表应该已经具备了标题和动画。完整的代码如下： 1. $pc = new C_PhpChartX(array(array(123, 34, 51, 22, 3)), simplest_graph ); 2. $pc->set_animate(true); 3. $pc->set_title(array( text => My Simplest Graph )); 4. $pc->draw(); 代码实质 假如你在浏览器中查看来源，你会发现，phpChart自动包含了许多的JavaScript以及CSS文件，包括jquery.js、 jquery-ui，和jqplot.js、jquery-ui.css等。虽然图表在浏览器中通过客户端的JavaScript渲染，但在前端的代码完 全是PHP。 之所以受人欢迎是因为这样一来对于我——一个PHP开发人员而言就不再也需要担心JavaScript了，因为phpChart会为我自动处理。下面是在查看源代码时生成的全部JavaScript代码——是我前面四行PHP代码的结果。 1. 2. var _simplest_graph_plot_properties; 3. $(document).ready(function(){ 4. setTimeout( function() { 5. _simplest_graph_plot_properties = { 6. “title“:{ 7. “text“:“My Simplest Graph“,“show“:1 8. },“animate“:true,“animateReplot“:true 9. } 10. 11. $.jqplot.config.enablePlugins = true; 12. $.jqplot.config.defaultHeight = 300; 13. $.jqplot.config.defaultWidth = 400; 14. _simplest_graph= $.jqplot(“simplest_graph“, 15. [[123, 34, 51, 22, 3]], _simplest_graph_plot_properties); 16. 17. }, 200 ); 18. }); 19. 正如你可能也会注意到的，“simplest_graph”被用作JavaScript变量的一部分，如 _simplest_graph_plot_properties表示jqplot对象。这就是前面我所说的命名必须唯一的原因。 此外，该PHP数据组被自动转换为JavaScript数组，所以以下PHP数组： 1. array(array(123, 34, 51, 22, 3)) 成为JavaScript数组： 1. [[123,34,51,22,3]] 改变渲染器类型 PhpChart支持实现柱形图、折线图和堆栈图；带状线图；块图；气泡图；蜡烛图；gecko图；meter图；以及其他几种类型的图表。渲染器支持： · BarRenderer · BezierCurveRenderer · BlockRenderer · BubbleRenderer · CanvasAxisLabelRenderer · CanvasAxisTickRenderer · CategoryAxisRenderer · DateAxisRenderer ·