新蒲京200.c软件下载-app官网网址 > 文章 >

付费投稿计划

本文由码农网 – 小峰原创翻译,转发请看清文末的转载必要,款待参加我们的付费投稿安排!

用PHP实现专门的学业级的基于Web的图形,而没有必要深切的HTML5和JavaScript知识。

介绍

新近,作者急需从一组PHP数据组快速制造图表。供给图表必得是人机联作式的,顾客自个儿的,也可下载的。在评估了有的PHP图表的缓和方案,蕴含phpChart、pChart和Highcharts之后,小编调节使用phpChart作为自个儿的首荐工具。

背景

作为二个入眼的后端程序员,笔者既未有过多日子去渐渐商讨利用JavaScript(客商想要在24小时内就能够在网络看看图片),也不具备先进的前端编码知识。从根本上说,作者盼望差不多平昔不别的前端编制程序经历的PHP开拓人士也能够快捷支付出了不起的图样。

本人试过pChart,一个流行的PHP图表库。生成的图样看起来挺不错,即便是可下载的,但图表都以静态图像。Highcharts仿佛是最棒的精选。图表看上去让人惊艳,又是动漫片的,而且有数不完自定义选项,但同一时间,它也是极其复杂的,何况亟需多量的JavaScript知识。 Highcharts既不是专为PHP设计的,用于商务亦非无需付费的。

phpChart的基本要素

自己最心爱phpChart的地点正是它能令人从轻松和最小量的代码动手。

phpChart简洁明了版能够从今现在间下载。下载文件并解压到网址根目录。

设置conf.php

作者们要做的首先件事是设置变量SCRIPTPATH到conf.php文件的PhpChart类库。该变量代表了在您的Web服务器上的phpChart库的相持或相对U凯雷德L。

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();

那正是始于你要求的代码。下边是透过渲染的输出。

图片 1

那就是自己所谓的最少许的编码。当您有贰个团伙的程序猿来工作的时候,费力地去学习底蕴就不曾意思了。任何技术员尽快想要做的一件事正是从一组新的库或工具埋头斟酌复杂的文书档案。

顺手说一句,结构函数中的第壹个参数的命名对你的图样来说应该是有一无二的。小编键入的是“simplest_graph”,也得以是别的非空格字符串。它必得是四个独一的值,那样您才方可在一个页面中兼有多个图表。

加上标题

你应为您的图样增添标题,以便顾客理解他们在看怎样。

$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会为笔者自动管理。上边是在查看源代码时生成的方方面面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]]

更动渲染器类型

PhpChart扶助促成柱形图、折线图和货仓图;带状线图;块图;气泡图;蜡烛图;gecko图;meter图;以至其余几体系型的图片。渲染器扶植:

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

倘若您不钦定项指标话,私下认可图表类型是折线图。要改革图表类型,要求调用set_series_default函数。比方,将地点的例证更正为饼图

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

图片 2

请小心,我用的是phpChart公司版。 phpChart简洁明了版只扶助折线图。

数组和命名约定

这边还应该有一部分值得注意的地点。首先,phpChart函数中利用的大约全部参数是一个数组,不是全体,但大致具有的都以。只需记住那或多或少,就会幸免调节和测验时的恢宏讨厌难点(后边笔者将简要地覆盖调节和测验效用)。其次,渲染器在phpChart中被称为“插件”,故而你不得不像这么传递“plugin::PieRenderer”,中间双冒号。对于自定义JavaScript中,用“js::yourJavascriptFunctioName”。

高级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

图片 3

导出图表到图片

刚领头的时候,对此作者很麻烦,因为我不知晓怎么着导出图表。事实注明,phpChart图表能够导出为可下载的图形,但那些进度并从未很好的记录下来。笔者意识增添以下代码到具备页面包车型地铁最底层,就足以转败为胜:

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

下载showjs.js:

调试phpChart

最后,在终止从前,作者要提一提phpChart的二个相当难得的特色。那正是它的松手调节和测验成效。在其网址上,全数的在线例子()都有调解可以启用生动的上行下效和四个显然的可方便移植下边代码的选项卡——分别是JavaScript和PHP。

要启用调节和测量试验,只需增多以下代码行到conf.php文件:

define('DEBUG', true);

最终的考虑

PhpChart的一个重大受益是,通过应用那些工具,PHP技术员能够完成专门的学问级的依靠Web的图纸——而不供给深刻摸底HTML5和JavaScript知识。

一旦您像自家同一,也是前面三个编制程序的门外汉,但相通供给生成人机联作式的Web图表,那么您只怕会心仪phpChart。关于phpChart的HTML5图片例子已经全部地罗列到以下那些页面中。运气好的话,你恐怕并无需文书档案——就足以一向明白代码。

下一篇:没有了