奥门新浦京官方网站基于PHP的超炫酷HTML5交互式图表

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

Highcharts是什么?

问题描述:

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

Highcharts 是一个用纯JavaScript编写的一个图表库,
能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

    使用highcharts 绘制Web图表

介绍

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

奥门新浦京官方网站 1

Highcharts说明:

背景

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

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

HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。现在官方的最新版本为HighCharts2.3.5。

奥门新浦京官方网站 2

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

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

奥门新浦京官方网站 3

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

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

特点

问题解决:

添加标题

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

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

具有良好的兼容性:它可以在所有现代浏览器中很好地工作,包括iPhone,iPad甚至Internet
Explorer 6。标准的浏览器使用SVG进行图形绘制,而在传统的Internet
Explorer则使用VML进行绘制。

    (1)安装Highcharts

添加动画

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

对非商业用户完全免费:无论你想要在个人网站,学校网站或是任何一个非营利组织中使用Highcharts,你都不需要经过授权。

奥门新浦京官方网站 4

代码实质

如果你在浏览器中查看来源,你会发现,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]]

开源:无论你使用的是Highcharts的免费版本还是商业授权版本,你都可以下载它的源代码并作出自己的修改,这给予了用户极大的自由度。

奥门新浦京官方网站 5

改变渲染器类型

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

奥门新浦京官方网站 6

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

纯粹的JavaScript:Highcharts是完全基于本地浏览器技术的,不需要像Flash或Java那样依赖于客户端插件。此外,你不需要在服务器上安装任何东西,包括PHP或ASP.NET。Highcharts只需要两个核心文件:highcharts.js核心文件和jQuery,MooTools或Prototype框架的其中之一,而这个框架可能已经早就在你的网页中使用了。

   
在这些图表中,数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件,或者是通过Ajax调用远程服务器提供的数据。

数组和命名约定

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

众多的图表类型:Highcharts支持直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图等常见的图表类型,并且能够将他们结合在一个图表里。

奥门新浦京官方网站 7

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

奥门新浦京官方网站 8

简单的配置语法:配置Highcharts不需要任何的编程技术,它的配置变量只需要一个简单的JavaScript对象。

总结:

导出图表到图片

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

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

下载showjs.js:

动态:在创建图表后的任何时候,你都可以通过一个完整的API对系列和数据点进行添加,删除和修改,也对坐标轴进行修改。许多事件都提供了为图表进行编程的钩子,结合jQuery,MooTools或Prototype框架的AJAX
API,它甚至提供了能够实时动态地显示服务器数据的解决方案。

       
使用highcharts需要在项目中添加三个文件,highchart.js/exporting.js/jquery.js

调试phpChart

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

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

define('DEBUG', true);

多轴:有时候你需要比较不同度量的数据,比如温度,降雨量和空气压力,Highcharts可以让你为每个数据集设置不同的Y轴,而如果你想要比较不同类别的数据,也可以设置不同的X轴。每个轴都可以放置在图表上下左右的任何位置,所有选项都可以单独设置,包括翻转,风格和位置。

同时,需要在JSP文件中定义图表的div填充位置。

最后的思考

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

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

提示标签:当鼠标停在图表的任何一个点或一个系列,都可以显示一个包含相关信息的工具条提示,而当鼠标在图表上移动时,它会自动选择离鼠标最近的点来进行显示,这对查看图表数据提供了极大的便利。

具体的使用实例如下:

时间轴:75%的图表都带有一个时间轴作为X轴,Highcharts非常智能,甚至可以精确到毫秒,它也可以标志出一个月的开始或一周的开始,乃至午夜和正午等等。

奥门新浦京官方网站 9

导出和打印:如果启用了导出模块,您的用户可以通过点击导出按钮将图表导出为PNG,
JPG, PDF或SVG格式,也可以直接将其打印出来。

注:

缩放:你可以通过缩放来更仔细地查看你对图表中感兴趣的部分,缩放可以作用在X轴或Y轴上,也可以同时作用在两个轴上。

   
以上为使用的头文件,使用highcharts需要添加如上的三个JS文件,其中第一个是jquery的基本文件,第2个是highcharts的js文件,最后一个是绘制图表需要添加的文件。

外部数据加载:Highcharts的数据来自于一个JavaScript数组,因此数据可以定义在一个本地配置对象中,也可以定义在一个单独的文件中,甚至可以来自不同的网站。此外,数据可以以任何形式传递给Highcharts,只需一个将数据解析为数组的回调函数。

奥门新浦京官方网站 10

角度计:针对仪表盘和角度计等,Highcharts提供了一种类似速度计的图表,让你可以一目了然地查看数据。

注:

极坐标图表:笛卡尔坐标系的图表可以很简单的选项来转换成极坐标系图表或径向图。

    其中引用绘制图表的方法是<select onchange=”JQueryLine()”>

倒转或翻转图表:有时候你需要将图表翻转,使X轴垂直,这也是支持的。

奥门新浦京官方网站 11

旋转标签:所有的文本标签,包括轴标签,数据点标签和坐标轴标题标签,都可以进行任意角度的旋转。

注:

调用方式

    其中<div id=”chart”></div>是显示图表的容器。

var chart = new Highcharts.Chart({

奥门新浦京官方网站 12

        chart: {…}

奥门新浦京官方网站 13

        colors: [{…}]

注:

        credits: {…}

    以上是使用highcharts绘制图表的JS代码

        exporting: {…}

highcharts的使用手册与实例如下:

        global: {…}

奥门新浦京官方网站 14

        labels: {…}

        lang: {…}

        legend: {…}

        loading: {…}

        navigation: {…}

        pane: {…}

        plotOptions: {…}

        series: [{…}]

        subtitle: {…}

        title: {…}

        tooltip: {…}

        xAxis: {…}

        yAxis: {…}

});

Highcharts
是一个用纯JavaScript编写的一个图表库,
能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费…

发表评论

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