基于PHP的超炫酷HTML5交互式图表

澳门新葡亰赌995577 3

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

入门基础

用PHP实现专业级的基于Web的图表,而无需深入的HTML5和JavaScript知识。

Chart.js是一个基于HTML5的开源图表库,可以方便简洁的绘制美观的图表。

介绍

最近,我需要从一组PHP数据组快速创建图表。要求图表必须是交互式的,用户友好的,也可下载的。在评估了一些PHP图表的解决方案,包括phpChart、pChart和Highcharts之后,我决定采用phpChart作为我的首选工具。

1、支持6种不同的表格类型:曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。2、基于HTML5开发,支持所有浏览器.3、不依赖于其他任何库,仅有4.5k大小,并且可以进行定制。

背景

作为一个主要的后端程序员,我既没有很多时间去慢慢研究使用JavaScript(客户想要在24小时内就能在网上看到图表),也不具备先进的前端编码知识。从根本上说,我希望几乎没有任何前端编程经验的PHP开发人员也能够快速开发出精美的图表。

我试过pChart,一个流行的PHP图表库。生成的图表看起来挺不错,虽然是可下载的,但图表都是静态图像。Highcharts似乎是最好的选择。图表看上去令人惊艳,又是动画的,并且有很多自定义选项,但同时,它也是非常复杂的,而且需要大量的JavaScript知识。
Highcharts既不是专为PHP设计的,用于商务也不是免费的。

Chart.js 是一个基于 HTML5 canvas
的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型,每种类型都带有一系列的自定义选项。如果这些还不够,你还可以创造自己的图表类型。

phpChart的基本要素

我最喜欢phpChart的地方就是它能让人从简单和最少量的代码入手。

phpChart精简版可以从这里下载。下载文件并解压到网站根目录。

设置conf.php

我们要做的第一件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在你的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();

这就是开始你需要的代码。下面是经过渲染的输出。

澳门新葡亰赌995577 1

这就是我所谓的最少量的编码。当你有一个团队的程序员来工作的时候,艰辛地去学习基础就没有意义了。任何程序员尽快想要做的一件事就是从一组新的库或工具埋头研究复杂的文档。

顺便说一句,构造函数中的第二个参数的命名对你的图表而言应该是唯一的。我键入的是“simplest_graph”,也可以是任何非空格字符串。它必须是一个唯一的值,这样你才可以在一个页面中拥有多个图表。

Chart.js 的六种图表类型代码一共只有 11 kb 大,并做了 gzip
压缩处理,另外该库是模块化的,你可以仅仅使用自己需要的图表类型,从而进一步节省了空间。下面是包含该库的
cdnjs 链接。

添加标题

你应该为你的图表添加标题,以便用户知道他们在看什么。

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

JavaScript

添加动画

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会为我自动处理。下面是在查看源代码时生成的全部JavaScript代码——是我前面四行PHP代码的结果。

<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]]

从提示信息到动画效果(校稿者注:tool
tip是指鼠标移动到某个元素上弹出的提示信息),Chart.js
允许你改变图表的几乎所有特征。在本节,我将会修改一些设置,以展示
Chart.js 是如何被创建出来的。我们将从下面的 HTML 代码开始:

改变渲染器类型

PhpChart支持实现柱形图、折线图和堆栈图;带状线图;块图;气泡图;蜡烛图;gecko图;meter图;以及其他几种类型的图表。渲染器支持:

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

澳门新葡亰赌995577,如果你不指定类型的话,默认图表类型是折线图。要更改图表类型,需要调用set_series_default函数。例如,将上面的例子更改为饼图

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

澳门新葡亰赌995577 2

请注意,我用的是phpChart企业版。 phpChart精简版只支持折线图。

XHTML

数组和命名约定

这里还有一些值得注意的地方。首先,phpChart函数中使用的几乎所有参数是一个数组,不是全部,但几乎所有的都是。只需记住这一点,就能避免调试时的大量头痛问题(后面我将简要地覆盖调试功能)。其次,渲染器在phpChart中被称为“插件”,故而你必须像这样传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

对于首次展示,我会创建一个折线图。为了使图表有意义,这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在
X
轴。我已经为折线图模拟了一些数据,这些数据被分开放到一个数组里面去,每个数据有自己的填充颜色、折线和点集。

高级phpChart:自定义JavaScript

到目前为止,所有我展示的都是PHP。在大多数情况下,对于简单的PHP函数调用,phpChart完全能做得很好。为了充分利用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

澳门新葡亰赌995577 3

在这个例子中,我将 fillColor设置为透明。如果你不设置 fillColor
的值,将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用
RGBA、RGB、hex 或 HSL 格式定义,与 CSS 是一样的。

导出图表到图片

刚开始的时候,对此我很困扰,因为我不知道如何导出图表。事实证明,phpChart图表可以导出为可下载的图片,但这个过程并没有很好的记录下来。我发现添加以下代码到所有页面的底部,就可以扭转乾坤:

<script type="text/javascript" 
  src="http://www.codeproject.com/phpChart/js/showjs.js"></script>

下载showjs.js:

JavaScript

调试phpChart

最后,在结束之前,我要提一提phpChart的一个非常宝贵的特点。那就是它的内置调试功能。在其网站上,所有的在线例子()都有调试可以启用生动的演示和两个清晰的可方便移植下面代码的选项卡——分别是JavaScript和PHP。

要启用调试,只需添加以下代码行到conf.php文件:

define('DEBUG', true);
var lineData = { labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7'], datasets: [{ fillColor: 'rgba', strokeColor: 'rgba', pointColor: 'rgba', data: [20, 30, 80, 20, 40, 10, 60] }, { fillColor: 'rgba', strokeColor: 'rgba', pointColor: 'rgba', data: [60, 10, 40, 30, 80, 30, 20] }]}

最后的思考

PhpChart的一个主要好处是,通过使用这个工具,PHP程序员可以实现专业级的基于Web的图表——而无需深入了解HTML5和JavaScript知识。

如果你像我一样,也是前端编程的门外汉,但同样需要生成交互式的Web图表,那么你或许会喜欢phpChart。关于phpChart的HTML5图表例子已经完整地罗列到以下这个页面中。运气好的话,你也许并不需要文档——就可以直接理解代码。

设置全局选项

在代码中我已经设置了一些全局值。animationSteps
决定了动画的持续时间。根据需要,你可以修改更多的选项,比如
scaleLineColor 和 scaleIntegersOnly。我建议浏览 Chart.js
文档查看库中提供的其他选项。

JavaScript

Chart.defaults.global = { animationSteps : 50, tooltipYPadding : 16, tooltipCornerRadius : 0, tooltipTitleFontStyle : 'normal', tooltipFillColor : 'rgba', animationEasing : 'easeOutBounce', scaleLineColor : 'black', scaleFontSize : 16}

设置专有的图表选项

除了全局选项,还有一些针对特定图表类型的配置选项。在这个折线图中,我将会设置这类选项,希望对你有所启发:

JavaScript

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图