betway必威-betway必威官方网站
做最好的网站

必威官方网站Highcharts使用指南,基于PHP的超炫酷

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

[javascript]   
 Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍Highcharts图表控件。通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表。

Highchart简介:

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

一、前言(Preface)
Highcharts是一个非常流行,界面美观的纯Javascript图表库。它主要包括两个部分:Highcharts和Highstock。
Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。
 二、安装(Installation)
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。因此,在使用Highcharts之前,需要在页面头部引用这些脚本文件。如果你使用jQuery作为基本框架,那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。如下:
[javascript]
<script src="" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
Highcharts(Highstock)已经内置了jQuery适配器(adapter)(注:可能是jQuery框架最流行的缘故),但是并没有内置MooTool等其他javascript框架的适配器(adapter)。因此,当我们使用MooTool等其他JS框架时,需要单独引用适配器(adapter)脚本文件。如下:
[javascript] 
<script src="" type="text/javascript"></script> 
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script> 
<script src="/js/highcharts.js" type="text/javascript"></script> 
2.在您的网页头部的脚本标签,或在一个单独的js文件,添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置,一般来说是一个具有ID的DIV元素(参考第3步)。
[css]
var chart1; // 全局变量 
$(document).ready(function() { 
      chart1 = new Highcharts.Chart({ 
         chart: { 
            renderTo: 'container', 
            type: 'bar' 
         }, 
         title: { 
            text: 'Fruit Consumption' 
         }, 
         xAxis: { 
            categories: ['Apples', 'Bananas', 'Oranges'] 
         }, 
         yAxis: { 
            title: { 
               text: 'Fruit eaten' 
            } 
         }, 
         series: [{ 
            name: 'Jane', 
            data: [1, 0, 4] 
         }, { 
            name: 'John', 
            data: [5, 7, 3] 
         }] 
      }); 
   }); 
上述代码适用于使用jQuery作为基本框架的情况,$(document).ready()函数,表示在文档加载完成后进行相应处理。如果你使用MooTool等其他JS框架,需要使用相对应的代码来替代$(document).ready()函数。
如果你想生成HighStock图表,有一个单独的构造方法调用Highcharts.StockChart。在这些图表中,数据源是一个典型的JavaScript数组数据。其来源可以是一个单独的JavaScript文件,或者是通过Ajax调用远程服务器提供的数据。
[javascript] 
var chart1; // 全局变量 
$(document).ready(function() { 
      chart1 = new Highcharts.StockChart({ 
         chart: { 
            renderTo: 'container' 
         }, 
         rangeSelector: { 
            selected: 1 
         }, 
         series: [{ 
            name: 'USD to EUR', 
            data: usdtoeur // 数组变量 
         }] 
      }); 
   }); 
3.在页面中添加一个DIV元素,作为放置Highcharts图表的容器。需要为其设置ID值,与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。
[html] view plaincopyprint?
<div id="container" style="width: 100%; height: 400px"></div> 
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题(可选的)。下载包含有四个预定义的主题,如果你需要使用从这些主题,只需在 highcharts.js 后引用这些文件。比如:
[html] view plaincopyprint?
<script type="text/javascript" src="/js/themes/gray.js"></script> 
三、如何设置参数(How to set up the options)
Highcharts使用一个JavaScript对象结构来定义参数。选项的值可以是字符串和数字,数组,其他对象,甚至是函数。当您初始化使用新Highcharts.Chart的图表,options对象将作为第一个参数传递。

 

介绍

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

如果你想在同一个页面上使用一组参数,可以定义一个选项对象(options object)来设置选项。更多内容参考#4预处理选项(Preprocessing the options)。
四、预处理参数(Preprocess the options)
了解配置对象(configuration object)的工作原理,以及如何用程序来实现,对于实现高效的Highcharts图表显得十分重要。下面将介绍JavaScript对象的基本知识点:
在上面的例子中,Highcharts options被定义为对象字面值(object literals)。通过这种方法来标记配置,我们可以的到一个清晰的,可读性强的,占用空间低的配置对象。下面这种复杂的代码对于C程序员来说可能比较熟悉:
[javascript] 
// 不良的风格 
var options = new Object(); 
 
options.chart = new Object(); 
options.chart.renderTo = 'container'; 
options.chart.type = 'bar'; 
 
options.series = new Array(); 
options.series[0] = new Object(); 
options.series[0].name = 'Jane'; 
options.series[0].data = new Array(1, 0, 4); 
对于JavaScript程序员来说,我们更喜欢使用下面的风格。需要注意的是,两种实现方式的结果是完全相同的。
[javascript] view plaincopyprint?
// 良好的风格 
var options = { 
    chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'bar' 
    }, 
    series: [{ 
        name: 'Jane', 
        data: [1, 0, 4] 
    }] 
}; 
在创建命名的对象后,我们可以通过.操作符来扩展其成员。假设我们已经定义一个对象(见良好的风格代码)。下面代码代码将添加另一个series。请记住options.series是一个数组,因此我们可以使用push方法。
[javascript] 
options.series.push({ 
    name: 'John', 
    data: [3, 4, 2] 
}) 

 Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表,

背景

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

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

另外一个可以排上用场的事实是,对于JavsScript对象来说,点符号(.)和方括号[]是等价的。所以,你可以通过名称来访问成员。这意味着:

 Highcharts目前支持直线图、曲线图、面积图、柱状图、饼图、散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 !

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

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

必威官方网站 1

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

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

options.renderTo

Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好。具体参考:

添加标题

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

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

options['renderTo']

使用准备:

代码实质

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

4.1 案例学习: preprocessing the data from CSV
通过这个简单的例子,我们将学会如何配置基本的参数(options),然后通过一个Ajax调用远程数据以及解析数据,最后通过合适的格式展现出来。在这个例子中,我们使用jQuery来处理Ajax请求。当然,你也可以使用MooTool或者Prototype来实现类似的功能。所有的代码在$(document).ready()函数中处理。你可以在data-from-csv.htm看到这个例子的效果。
(1)创建一个外部的仅包含数据的CSV文件(数据源)。从下面数据文件中,我们可以看到第一行列出了类别的名称(类似于字段名)。后继的行的第一个位置列出了series name(比如:第二行的'John'),随后的位置列出相关的值(value)。在实际开发过程中,我们经常使用PHP或者其他服务器端编程语言(C#,java等)来创建这个文件的内容。或者你会选择其他的标记格式,比较的常见的如XML或者JSON(JSON相对XML更加轻巧)。在这些情况下,jQuery可以解析出数据对象本身。
[css] 
Categories,Apples,Pears,Oranges,Bananas 
John,8,4,6,5 
Jane,3,4,2,3 
Joe,86,76,79,77 
Janet,3,16,13,15 
(2)定义基本的初始的参数。注意到,我们为categorys和series对象创建了空数组(empty arrays),稍后我们可以为其添加数据。
[javascript] 
var options = { 
    chart: { 
        renderTo: 'container', 
        defaultSeriesType: 'column' 
    }, 
    title: { 
        text: 'Fruit Consumption' 
    }, 
    xAxis: { 
        categories: [] 
    }, 
    yAxis: { 
        title: { 
            text: 'Units' 
        } 
    }, 
    series: [] 
}; 
(3)加载数据。我们通过jQuery的.get方法来获取数据文件.csv的内容。在success回调函数中,我们解析请求返回的字符串,并将结果添加到参数对象(options object)的categories和series成员对象中,最后创建图表。请注意,我们不能在Ajax callback外创建图表,因为我们要等待服务器返回的数据(当请求成功后,返回数据,该过程是异步的)。
[javascript] 
$.get('data.csv', function(data) { 
    // Split the lines 
    var lines = data.split('n'); 
     
    // Iterate over the lines and add categories or series 
    $.each(lines, function(lineNo, line) { 
        var items = line.split(','); 
         
        // header line containes categories 
        if (lineNo == 0) { 
            $.each(items, function(itemNo, item) { 
                if (itemNo > 0) options.xAxis.categories.push(item); 
            }); 
        } 
         
        // the rest of the lines contain data with their name in the first position 
        else { 
            var series = { 
                data: [] 
            }; 
            $.each(items, function(itemNo, item) { 
                if (itemNo == 0) { 
                    series.name = item; 
                } else { 
                    series.data.push(parseFloat(item)); 
                } 
            }); 
             
            options.series.push(series); 
     
        } 
         
    }); 
     
    // Create the chart 
    var chart = new Highcharts.Chart(options); 
}); 
4.2 加载XML数据
从XML文件加载数据与加载CSV文件类似。Highcharts不能处理预定义的XML数据(只能处理数组)。因此,整个过程由你来编写XML数据,并为它定义一个解析函数。相对于CSV文件来说,XML的最大缺点是,它增加了一些标记数据(这也是选择JSON的缘故)。使用XML的好处在于,至少对于小量的数据来说,你不必要手动解析返回的数据。你可以使用jQuery现有的DOM解析能力来访问XML数。你可以在data-from-xml.htm看到实例,数据包含在data.xml。
五、活动图(Live Charts)
尽管我们已经通过配置对象(configuration object)定义图表,然后选择性地预处理(optionally preprocessed),最后通过new Highcharts.Chart()初始化和渲染图表,我们仍然有机会通过API来改变图表。chart,axis,series以及point对象有许多方法,比如update,remove,addSeries,addPoints等等。完整的列表可以查看API参考(the API Reference)下方法和属性。
5.1 案例学习:a live connection to the server
下面的例子将展示怎样构建一个活动的图表(live chart)通过每一秒种从服务器检索的数据。首先,我们要建立自定义函数requestData,它开始在图表加载事件(load event)中调用,随后在Ajax回调函数success中调用。你可以在live-server.htm中看到结果。
1.建立服务器。在这个例子中,我们选择PHP作为服务器脚本语言返回包含时间(time)以及y值(y value)的javascript数组。下列为live-server-data.php文件的代码:
[php]
<?php 
 // Set the JSON header 
 header("Content-type: text/json"); 
  
 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000. 
 $x = time() * 1000; 
 // The y value is a random number 
 $y = rand(0, 100); 
  
 // Create a PHP array and echo it as JSON 
 $ret = array($x, $y); 
 echo json_encode($ret); 
 ?> 
2.定义全局变量。需要强调的是,这里必须定义chart全局变量,因为在document ready函数以及requestData函数均要访问。

1.在官网上找到下载链接即可,其中有3个下载项,highchart为主要的,后面两个,highmaps是主题为地图的一些图表。highstock是主题为股票的一些折线图,是一些行业定制化的工具

改变渲染器类型

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精简版只支持折线图。

1 var chart; // global

2.使用highchart需要两个文件一个是基础的jquery(jquery建议1.8.2版本)或者prototype等js框架,以及highcharts.js。可以在线引用,但是可能不太稳定,建议本地引用。

本文由betway必威发布于网页设计,转载请注明出处:必威官方网站Highcharts使用指南,基于PHP的超炫酷

Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。