当前位置: 首页 > 科技观察

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

时间:2023-03-14 20:54:33 科技观察

无需深入的HTML5和JavaScript知识的PHP专业级基于Web的图表。简介最近,我需要根据一组PHP数据集快速创建图表。需求图表必须是交互式的、用户友好的,并且还可以下载。在评估了一些PHP图表解决方案(包括phpChart、pChart和Highcharts)之后,我决定使用phpChart作为我的首选工具。背景作为初级后端程序员,我没有太多时间慢慢学习如何使用JavaScript(客户希望24小时内在线查看图表),也没有前端编码的高级知识。从根本上说,我希望一个几乎没有前端编程经验的PHP开发者能够快速开发出漂亮的图表。我尝试了pChart,一个流行的PHP图表库。生成的图表看起来很不错,虽然可以下载,但图表是静态图像。Highcharts似乎是最好的选择。这些图表看起来很漂亮,是动画的,并且有很多自定义选项,但同时,它非常复杂,需要大量的JavaScript知识。Highcharts既不是为PHP设计的,也不是免费供商业使用的。phpChart的基础我最喜欢phpChart的一点是它的入门代码非常简单和最少。phpChartLite可以从http://phpchart.org/downloads/下载。下载文件并解压到网站根目录。设置conf.php我们要做的第一件事是在conf.php文件中将变量SCRIPTPATH设置为PhpChart类库。此变量表示您的Web服务器上phpChart库的相对或绝对URL。define('SCRIPTPATH','/phpChart/');创建包含PHP头文件conf.php的最简单图表:require_once("../conf.php");调用构造函数C_PhpChartX,***调用draw()函数。$pc=newC_PhpChartX(array(array(123,34,51,22,3)),'simplest_graph');$pc->draw();这是您需要开始的代码。下面是渲染输出。这就是我所说的最少编码量。当你有一群程序员开始工作时,用艰苦的方式学习基础知识是没有意义的。任何程序员都想尽快做的事情之一就是从一组新的库或工具中挖掘复杂的文档。顺便说一下,构造函数中第二个参数的命名对于您的图表应该是唯一的。我输入了“simplest_graph”或任何非空格字符串。它必须是唯一值,以便您可以在一页上有多个图表。添加标题您应该为图表添加标题,以便用户知道他们在看什么。$pc->set_title(array('text'=>'MySimplestGraph'));添加动画pChart不能做的事情之一就是动画。在phpChart中,只需调用set_animate并传递true值即可获得动画支持。$pc->set_animate(true);就是这样。此时您的图表应该有一个标题和动画。完整代码如下:$pc=newC_PhpChartX(array(array(123,34,51,22,3)),'simplest_graph');$pc->set_animate(true);$pc->set_title(array('文本'=>'MySimplestGraph'));$pc->绘图();代码精髓如果你在浏览器中查看源码,你会发现phpChart自动包含了很多JavaScript和CSS文件,包括jquery.js、jquery-ui和jqplot.js、jquery-ui.css等。而图表通过客户端JavaScript在浏览器中呈现,前端代码完全是PHP。它流行的原因是,这样对于我这个PHP开发人员来说,我不必再担心JavaScript,因为phpChart会自动为我处理它。下面是查看源代码时生成的完整JavaScript代码——我之前四行PHP代码的结果。正如您可能还注意到的,“simplest_graph”被用作部分JavaScript变量,例如jqplot对象的_simplest_graph_plot_properties。这就是为什么我前面说命名必须是唯一的。此外,PHP数据集会自动转换为JavaScript数组,因此以下PHP数组:array(array(123,34,51,22,3))成为JavaScript数组:[[123,34,51,22,3]]更改渲染器类型PhpChart支持柱状图、折线图和堆栈图的实现;带状折线图;方块图;气泡图;烛台图;壁虎图;仪表图;和其他几种类型的图表。渲染器支持:BarRendererBezierCurveRendererBlockRendererBubbleRendererCanvasAxisLabelRendererCanvasAxisTickRendererCategoryAxisRendererDateAxisRendererDonutRendererEnhancedLegendRendererFunnelRendererLogAxisRendererMekkoAxisRendererMekkoRendererMeterGaugeRendererOHLCRendererPyramidAxisRendererPieRenderer如果你不指定类型的话,默认图表类型是折线图。Tochangethecharttype,theset_series_defaultfunctionneedstobecalled.Forexample,changetheaboveexampletoapiechart$pc->set_series_default(array('renderer'=>'plugin::PieRenderer'));NotethatIamusingphpChartEnterpriseEdition.phpChartLiteonlysupportslinecharts.ArraysandNamingConventionsThereareafewmorethingsworthnotinghere.Firstofall,almostallparametersusedinphpChartfunctionsareanarray,notallofthem,butalmostallofthemare.Justbykeepingthisinmind,youcanavoidalotofdebuggingheadaches(I'llcoverdebuggingfeaturesbrieflylater).Second,renderersarecalled"plugins"inphpChart,soyouhavetopass"plugin::PieRenderer"likethis,withdoublecolonsinbetween.ForcustomJavaScript,use"js::yourJavascriptFunctioName".高级phpChart:自定义JavaScript到目前为止,我展示的都是PHP。对于简单的PHP函数调用,phpChart在大多数情况下都做得非常好。为了充分利用phpChart,您可能希望使用自定义JavaScript。例如,您可以使用phpChart从JavaScript函数和外部源加载数据。下面的sineRenderer是一个自定义JavaScript函数,定义为显示一组随机数中的正弦。然后传递给set_data_renderer函数。PHP:$data1=array();$pc=newC_PhpChartX(array($data1),'basic_chart_4');$pc->set_title(array('text'=>'BasicChartwithCustomJS'));$pc->set_data_renderer("js::sineRenderer");$pc->add_plugins(array('pointLabels'));$pc->set_animate(true);$pc->draw();JavaScript:sineRenderer=function(){vardata=[[]];for(vari=0;i<13;i+=0.5){data[0].push([i,Math.sin(i)]);}returndata;};想了解set_data_renderer函数更多内容可以点击这里:http://phpchart.org/phpChart/docs/output/C_PhpChartX_set_data_renderer@.htmlExportchartstopictures一开始我很苦恼这个,因为我没有'不知道如何导出图表。事实证明,phpChart图表可以导出为可下载的图像,但这个过程没有很好的记录。我发现将以下代码添加到所有页面的底部会有所不同:下载showjs.js:http://phpchart.org/phpChart/js/showjs.js调试phpChart***在结束之前,我想提一下phpChart的一个非常有价值的特性。这是它内置的调试功能。在其网站上,所有在线示例(http://phpchart.org/examples/)都有一个调试器来启用现场演示和两个清晰的选项卡,以便轻松移植底层代码——分别是JavaScript和PHP。要启用调试,只需将以下行添加到conf.php文件:define('DEBUG',true);***ThinkingPhpChart的一个主要好处是,通过使用这个工具,PHP程序员可以实现专业级的基于Web的图表——无需深入了解HTML5和JavaScript。如果你和我一样,是前端编程的门外汉,但又需要生成交互式网页图表,那么你可能会喜欢phpChart。phpChart上的HTML5图表示例已在下一页中完整列出。运气好的话,您可能不需要文档——您只需要理解代码即可。