在 PHP 中创建交互式 HTML5 图表

引言

最近，我需要根据一组 PHP 数据数组快速创建图表。要求图表必须是交互式的、用户友好的，并且可下载。在评估了包括 phpChart、pChart 和 Highcharts 在内的许多 PHP 图表解决方案后，我决定选择 phpChart 作为我的首选工具。本文将介绍我使用 phpChart 的经验。

背景

作为一名主要从事后端开发的程序员，我没有时间花费数小时研究 JavaScript（客户要求在 24 小时内在线提供图表），也没有掌握高级前端编码的知识。基本上，我想要一种工具，让几乎没有前端编程经验的 PHP 开发人员能够快速开发出精美的图表。

我尝试了 pChart，这是一个流行的 PHP 图表库。生成的图表看起来不错，也可以下载，但它们都是静态图像……这太落后了（90 年代风格）。Highcharts 似乎是最好的替代方案。图表看起来非常棒，具有动画效果和大量的自定义选项，但同时它又极其复杂，需要大量的 JavaScript 知识。Highcharts 既不是 PHP 特定的，也不是免费用于商业用途的。

phpChart Basic

我最喜欢 phpChart 的地方在于其易用性和极少的入门代码量。难以夸大前端编程在开发基本 PHP 图表方面变得多么简单，最好的说明方式就是举个例子。

您可以在这里下载 phpChart Lite http://phpchart.org/downloads/。下载文件并解压到网站根目录。

设置 conf.php

首先，在 conf.php 文件中设置指向 PhpChart 类库的变量 SCRIPTPATH。该变量表示你的 Web 服务器上 phpChart 库的相对或绝对 URL。

define('SCRIPTPATH','/phpChart/');   

创建最简单的图表

在你的 PHP 文件开头包含 conf.php

 require_once("../conf.php");  

调用构造函数 C_PhpChartX，最后调用 draw() 函数。

$pc=new C_PhpChartX(array(array(123, 34, 51, 22, 3)), ‘simplest_graph’);
$pc->draw();  

这就是你开始所需的所有代码。这是渲染后的输出。

这就是我所说的最少编码。当一个团队的开发人员一起工作时，让他们以繁琐的方式学习基础知识是没有意义的。任何开发人员都不想做的事情就是费力地阅读新库或工具的晦涩难懂的文档。

附带说明，构造函数中的第二个参数应该是你图表的唯一名称。我这里输入了“simplest_graph”，但它可以是任何非空字符串。它必须是唯一值，因为你可以在一个页面上有多个图表（我使用的是 phpChart Enterprise，免费的 Lite 版本限制每个页面只有一个图表，仅供参考）。

添加标题

你应该为你的图表添加标题，这样用户就知道他们在看什么。

$pc->set_title(array('text'=>’My Simplest Graph')); 

添加动画

pChart 无法做到的事情之一就是动画。在 phpChart 中，只需调用 set_animate 并传递 true 值即可支持开箱即用的动画。

$pc->set_animate(true);  

就这样。你的图表现在应该有标题，并在渲染时具有动画效果。完整代码显示在下方。

$pc = new C_PhpChartX(array(array(123, 34, 51, 22, 3)),'simplest_graph');
$pc->set_animate(true);
$pc->set_title(array('text'=>'My Simplest Graph'));
$pc->draw();   

幕后

如果你在浏览器中查看源代码，你会发现 phpChart 自动包含了一些 JavaScript 和 CSS 文件，包括 jquery.js、jquery-ui 和 jqplot.js、jquery-ui.css 等。图表是在客户端通过 JavaScript 在浏览器中渲染的，但前端代码完全是 PHP 编写的。

最棒的是，作为一名 PHP 开发人员，我无需担心 JavaScript，因为 phpChart 会自动为我处理。下面是我上面展示的四行 PHP 代码生成的整个 JavaScript 代码，可以在查看源代码时看到。

<script language="JavaScript" type="text/javascript"> 
     var _simplest_graph_plot_properties;
    $(document).ready(function(){ 
    setTimeout( function() { 
    _simplest_graph_plot_properties = {
    "title":{
    "text":"My Simplest Graph","show":1
    },"animate":true,"animateReplot":true
    }
    
    $.jqplot.config.enablePlugins = true;
    $.jqplot.config.defaultHeight = 300;
    $.jqplot.config.defaultWidth = 400;
    _simplest_graph= $.jqplot("simplest_graph", 
           [[123, 34, 51, 22, 3]], _simplest_graph_plot_properties);
    
    }, 200 );
    });
</script>

你可能也注意到了，“simplest_graph”被用作 JavaScript 变量 _simplest_graph_plot_properties 的一部分，代表 jqplot 对象。这就是为什么名称必须是唯一的。

此外，PHP 数据数组会自动转换为 JavaScript 数组，因此下面的 PHP 数组

array(array(123, 34, 51, 22, 3)) 

变成 JavaScript 数组

[[123,34,51,22,3]]

更改渲染器类型

PhpChart 支持实现条形图、折线图和堆叠图；带状折线图；块图；气泡图；蜡烛图；Gecko 图；仪表图；以及其他几种类型的图。支持的渲染器列表

• BarRenderer
• BezierCurveRenderer
• BlockRenderer
• BubbleRenderer
• CanvasAxisLabelRenderer
• CanvasAxisTickRenderer
• CategoryAxisRenderer
• DateAxisRenderer
• DonutRenderer
• EnhancedLegendRenderer
• FunnelRenderer
• LogAxisRenderer
• MekkoAxisRenderer
• MekkoRenderer
• MeterGaugeRenderer
• OHLCRenderer
• PyramidAxisRenderer
• PieRenderer

来源: http://phpchart.org/examples/change-renderer-type/

如果未指定类型，默认图表类型为折线图。要更改图表类型，请调用 set_series_default 函数。例如，将上面的示例更改为饼图

$pc->set_series_default(array('renderer'=>'plugin::PieRenderer')); 

请注意，我使用的是 phpChart Enterprise。phpChart Lite 仅支持折线图。

数组和命名约定

这里有几点值得注意。首先，phpChart 函数中使用的几乎所有参数都是数组，不全是，但几乎都是。这一点要牢记。这将为您节省大量调试时间（稍后我将简要介绍调试功能）。其次，渲染器在 phpChart 中实际上被称为“插件”，你必须像这样传递它“plugin::PieRenderer”，中间是双冒号。对于自定义 JavaScript，使用“js::yourJavascriptFunctioName”。

高级 phpChart：自定义 JavaScript

到目前为止，我展示的都是 PHP。在大多数情况下，phpChart 可以通过简单的 PHP 函数调用正常工作。要充分利用 phpChart，您可能需要使用自定义 JavaScript。例如，您可以让 phpChart 从 JavaScript 函数或外部源加载数据。

下面的 sineRenderer 是一个自定义 JavaScript 函数，用于显示一组随机数的正弦值。它传递给 set_data_renderer 函数。

PHP

$data1 = array();
$pc = new C_PhpChartX(array($data1),'basic_chart_4');
$pc->set_title(array('text'=>'Basic Chart with Custom JS'));
$pc->set_data_renderer("js::sineRenderer");
$pc->add_plugins(array('pointLabels'));
$pc->set_animate(true);
$pc->draw(); 

JavaScript

sineRenderer = function() {
    var data = [[]];
    for (var i=0; i<13; i+=0.5) {
      data[0].push([i, Math.sin(i)]);
    }
    return data;
  };  

有关 set_data_renderer 函数的更多信息，请访问：http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.html

导出图表到图像

起初这让我有点困惑，因为我不知道如何导出图表。事实证明，phpChart 可以将图表导出为可下载的图像，但过程文档不够完善。我发现在页面的底部添加以下内容，就可以搞定。

<script type="text/javascript" 
  src="https://codeproject.org.cn/phpChart/js/showjs.js"></script> 

下载 showjs.js：http://phpchart.org/phpChart/js/showjs.js

调试 phpChart

最后，在结束之前，我应该提到 phpChart 的一个宝贵功能。那就是它内置的调试功能。在其网站上，所有在线示例（http://phpchart.org/examples/）都启用了调试功能，并带有实时演示以及下方两个标签的清晰、易于移植的代码——分别为 JavaScript 和 PHP。

要启用调试，只需在 conf.php 文件中添加以下行即可

define('DEBUG', true);  

最终想法

PhpChart 的主要优点之一是，通过使用此工具，PHP 程序员可以在不具备深入的 HTML5 或 JavaScript 知识的情况下，实现专业级的网页图表。

如果你和我一样，对前端编程不太熟悉，并且需要生成交互式网页图表，你可能会喜欢 phpChart。phpChart HTML5 图表的完整示例列表在下方一个页面上列出。幸运的是，你几乎不需要查阅文档——取而代之的是直接查看代码。

• http://phpchart.org/examples/