使用php jpgraph类库创建折线图和柱状图实例教程

16-01-07 来源：[db:作者]

收藏我要投稿

在介绍完php jpgraph安装教程之后，下面介绍下如何使用php jpgraph类库来创建折线图(line graph)和柱状图(bar graph)，通过学习本jpgraph教程，可以使你了解使用jpgraph创建图形的基本原理和流程，对php jpgraph类库的入门使用者帮助还是蛮大的，也算是php jpgraph中文使用手册的第一个jpgraph实例教程。

使用jpgraph创建的基本折线图

使用jpgraph创建的柱状图

为了尽快显示第一个jpgraph类库实例，我们将创建一个基本折线图和一个基本柱状图的图形，其基于19实际的sun spots。这个jpgraph实例的目的不是为了显示所有可能的jpgraph类库支持的配置和参数，而是为了显示如何使用jpgraph类库简单创建一个基本图形。

特别说明

在以后将详细介绍有关动态图形的生成和jpgraph类库的特点。所以即使你不完全明白也没关系，jpgraph中文使用手册的目标是你看完后将充分了解每一个jpgraph的细节。(呵呵，我尽量做到吧)

Sun Spots图形

历史数据

众所周知，Sun Spots有一定的模式和规律。在这个jpgraph实例中太阳风暴的数据是现成的，可以从(http://sidc.oma.be/sunspot- data/SIDCpub.php)获取。在这个jpgraph实例中，我们使用简易的Sun Spots历史数据，其显示每年Sun Spots总数从1700开始。

准备数据

第一步将数据放入相关PHP程序中，这是因为所有的图形都需要数据源。jpgraph类库本身是不知道从哪里收集数据的，其只需要数据存放在在一组(整数或浮点数)的PHP数组中。

原则上要在图中绘制的数据可以来自：

1、在PHP程序中固定的数据，这是最灵活的。推荐针对静态数据。

2、存储在文本文件中的数据。在本实例中就是使用这种方式。

3、存储在二进制格式的文件中

4、存储在数据库中

5、通过脚本URL参数传递的数据(GET或POST方式都可以)

这些方法的共同点是脚本的编写者需要将数据放入一个或几个jpgraph类库可使用的数据阵列中，也就是数组中。

在这个jpgraph实例中你可以访问http://sidc.oma.be/sunspot-data/选择yearly sunspot number下载数据。在下载文件中其包含了自1700年至2010年的所有数据。你只要截取1700年开始的十组数据分两列保存即可。即

1700.5 5.0

1701.5 11.0

1702.5 16.0

1703.5 23.0

1704.5 36.0

1705.5 58.0

1706.5 29.0

1707.5 20.0

1708.5 10.0

1709.5 8.0

这十个数据，需要创建两个数组，一个对应Sun Spots数据一个对应相应的年份。假设数据存储在yearssn.txt文本文件中。我们需要读取文本文件中这些数据以存放在数据中。代码如下　　　

以下是代码片段：
function readsunspotdata($aFile, &$aYears, &$aSunspots) {
　　$lines = @file($aFile,FILE_IGNORE_NEW_LINES|FILE_SKIP_EMPTY_LINES);
　　if( $lines === false ) {
　　throw new JpGraphException('Can not read sunspot data file.');
　　}
　　foreach( $lines as $line => $datarow ) {
　　$split = preg_split('/[\s]+/',$datarow);
　　$aYears[] = substr(trim($split[0]),0,4);
　　$aSunspots[] = trim($split[1]);
　　}
　　}
　　$year = array();
　　$ydata = array();
　　readsunspotdata('yearssn.txt',$year,$ydata);
　　?>

在这个函数中如果文件无法读取则会抛出异常。这是为了保证当创建图的脚本出现异常时能够及时处理。jpgraph类库对错误的处理细节以后会详细介绍。

jpgraph类库使用小贴士

jpgraph类库有一个辅助的工具类ReadFileData，其可以帮助从文本文件中读取数据。这个类可以读取以下几种格式

CSV(逗号分隔)格式：ReadFileData::FromCSV()

两列格式：ReadFileData::From2Col()

一列格式：ReadFileData::From1Col()

现在我们已读取了两列数据分别存放于$year和$ydata数组中，现在开始我们需要创建一些有变化的折线图和柱状图。

最基本的折线图

现在我们开始创建一个显示Sun Spots的折线图。你首先需要包含必要的jpgraph类库文件才能创建。

所有使用jpgraph创建的图形都至少需要包含两个文件，即jpgraph.php和对应图形模型文件。因为我们需要创建折线图，所以需要包含jpgraph_line.php。根据服务器的安装配置不同，你可以配置include_path，此配置我已在jpgraph安装配置教程中详细介绍过。同时为了防止重复包含多次jpgraph类库，建议使用require_once()。基本折线图的jpgraph源码如下　　　

以下是代码片段：
//设定图形宽度和高度
　　$width = 600; $height = 200;
　　// 创建Graph实例
　　$graph = new Graph($width,$height);
　　// 设定尺度类型
　　// int = X坐标为整数型
　　// int = Y坐标为整数型
　　$graph->SetScale('intint');
　　// 设定图片标题
　　$graph->title->Set('Sunspot example');
　　// 设定X坐标标题
　　$graph->xaxis->title->Set('(year from 1701)');
　　$graph->xaxis->SetTickLabels($year);
　　//设定Y坐标标题
　　$graph->yaxis->title->Set('(# sunspots)');
　　// 创建折线图实例
　　$lineplot=new LinePlot($ydata);
　　// 将折线图添加到图片上
　　$graph->Add($lineplot);
　　// 显示图片
　　$graph->Stroke();
　　?>

Line1-12

创建一个图形对象的第一件事是制定图形的大小，需要设置图形的宽度和高度。所有图形程序都需要至少创建一个jpgraph实例，其通过Graph()类库创建。

第二件事是所有图形程序都需要指定使用的尺度种类(也就是X坐标和Y坐标的单位类型)，jpgraph类库支持支持线性、整数、对数、文本和日期尺度。由于在本实例中数据都是由整数组成，所以我们设定X和Y坐标的尺度类型为整数。由于指定尺度的字符串中一半是针对X坐标，一般是针对Y坐标的，所以在实例中我们指定为‘intint’。知道了这个解释，你可以尝试下intlog或linlog会出现什么情况。

Line13-21

主要设置不同的文本标签。比如设定图形的标题、X和Y坐标标题。在本实例中我们使用默认字体、大小和默认颜色的文本字符串。

Line22-25

每个图形都必须至少有一个图形模型。在本实例中由于需要创建折线图，所以必须创建一个LinePlot类实例。

Line27

将折线图添加到图片上。并显示图形。

现在我们在折线图上做些小变化。比如填充折线图，只需要添加如下代码

以下是代码片段：
　<?php
　　$lineplot->SetFillColor('orange@0.5');
　　?>

这段代码主要做两件事，第一，设定基本原色为桔色(orange)，第二，修改填充颜色的透明度，50%透明(值越大越透明)，如图

使用jpgraph创建填充了颜色的折线图

在X坐标上添加刻度标记

在本实例中我们还没有使用年份数组，现在我们需要将年份在X坐标上显示出来，可以在X坐标上使用SetTickLabels()函数，此方法以数组为参数，使用数组值来在主要刻度标记上填充这些值。为了保证尺度有足够的空间，jpgraph类库会自动选择刻度标记之间的合适距离。使用如下代码

以下是代码片段：
<?php　　
　　$graph->xaxis->SetTickLabels($year);
　　?>

这里有一个问题，即X坐标刻度之间的间隔是自动调整的，同时最后一个刻度也必须标注，如果图片长度够长而数据不多，则可能出现X坐标最后一个刻度与其他刻度不同的问题，容易产生歧义。为了解决这种方法，可以使用SetScale方法，进行手工定义X坐标的最大值。SetScale方法的原型如下

以下是代码片段：
Graph::SetScale($aAxisType, $aYMin, $aYMax, $aXMin, $aXMax)

或者可以使用SetLabelFormatCallback函数进行手工定义刻度，即

以下是代码片段：
<?php
function year_callback($aLabel) {
　　return 1700+(int)$aLabel;
　　}
　　//在X坐标处调用
　　$graph->xaxis->SetLabelFormatCallback('year_callback');
　　?>

此方法最后一个刻度会将10变成1710，这样就不会产生歧义。

使用jpgraph创建基本的柱状图

使用jpgraph创建柱状图其实很简单，只要参照折线图，首先include jpgraph_bar.php，然后创建BarPlot实例即可，仍然沿用原的数据，柱状图即如开头所示。

默认jpgraph类库的柱状图是蓝色的，你也可以使用　

以下是代码片段：
　<?
$barplot->SetFillColor('orange@0.5');
　　?>

修改颜色，我试了下颜色没改变。

其他注意事项

当你将上述代码放入PHP文件中时切勿忘记在开头调用　　

以下是代码片段：
　require_once ('src/jpgraph.php');
　　require_once ('src/jpgraph_line.php');
　　require_once ('src/jpgraph_bar.php');

至此，使用php jpgraph类库创建折线图和柱状图的实例就介绍完了，其实和使用GD库创建图形的流程是一致的，首先要创建画布(Graph实例)，然后再创建你希望展现的图形实例，比如折线图(line graph)或柱状图(bar graph)，期间你可以调整刻度、标题、颜色等，最后合成后输出即完成了，只要了解了这些原理，使用jpgraph还是蛮简单的。

点击复制链接与好友分享!回本站首页