ch13_04.htm

用perl编写CGI的好书。本书从解释CGI和底层HTTP协议如何工作开始

<tr>
<td>
<p>Evening</p></td>
<td>
<p>17</p></td>
<td>
<p>15</p></td>
<td>
<p>19</p></td>
<td>
<p>15</p></td>
<td>
<p>24</p></td>
</tr>


</table>


<p><a href="ch13_04.htm#ch13-84153">Example 13-3</a> contains the <a name="INDEX-2617" /> <a name="INDEX-2,618" /> <a name="INDEX-2,619" />code used to create
the <a name="INDEX-2620" /> <a name="INDEX-2,621" /> <a name="INDEX-2,622" />mixed graph that appears in <a href="ch13_04.htm#ch13-58821">Figure 13-8</a>.</p>


<a name="ch13-58821" /><div class="figure"><img width="323" src="figs/cgi2.1308.gif" height="242" alt="Figure 13-8" /></div><h4 class="objtitle">Figure 13-8. A mixed chart created with GD::Graph::mixed</h4>


<a name="ch13-84153" /><div class="example">
<h4 class="objtitle">Example 13-3. commute_mixed.cgi </h4>

<blockquote><pre class="code">#!/usr/bin/perl -wT

use strict;
use CGI;
use GD::Graph::mixed;

use constant TITLE =&gt; "Average Commute Time: Mixed Chart";

my $q     = new CGI;
my $graph = new GD::Graph::mixed( 400, 300 );
my @data  = (
    [ qw( Mon  Tue  Wed  Thu  Fri ) ],
    [      33,  24,  23,  19,  21   ],
    [      17,  15,  19,  15,  24   ],
);


$graph-&gt;set( 
    title           =&gt; TITLE,
    x_label         =&gt; "Day",
    y_label         =&gt; "Minutes",
    long_ticks      =&gt; 1,
    y_max_value     =&gt; 40,
    y_min_value     =&gt; 0,
    y_tick_number   =&gt; 8,
    y_label_skip    =&gt; 2,
    bar_spacing     =&gt; 4,
    types           =&gt; [ "bars", "linespoints" ],
);

$graph-&gt;set_legend( "Morning", "Evening" );
my $gd_image = $graph-&gt;plot( \@data );

print $q-&gt;header( -type =&gt; "image/png", -expires =&gt; "now" );

binmode STDOUT;
print $gd_image-&gt;png;</pre></blockquote>
</div>


<p>Note that for this script we do not need to use the GD module because
we are not creating images directly; we simply use the GD::Graph
module. We set one constant for the title of the graph. We could have
created many more constants for the different parameters we are
passing to GD::Graph, but this script is short, and not using
constants allows you to easily see the values each parameter takes.</p>


<p>We create a mixed graph object by passing the width and height in
pixels, and we set up our data. Then, we call the
<tt class="function">set</tt> method to set parameters for our graph. The
meaning of some of these parameters is obvious; we will just explain
those that may not be. <tt class="literal">long_ticks</tt> sets whether
ticks should extend through the area of the chart to form a grid.
<tt class="literal">y_tick_number</tt> specifies how many ticks the y axis
should be divided into. <tt class="literal">y_label_skip</tt> sets how
often the ticks on the y axis should be labelled; our setting,
<tt class="literal">2</tt>, means every other one.
<tt class="literal">bar_spacing</tt> is the number of pixels between the
bars (for the bars series). Finally, <tt class="literal">types</tt> sets
the graph type of each series.</p>


<p>We add a legend that describes our data series. Next, we call the
plot method with our data and receive a GD::Image object containing
our new graph. Then all we need to do is generate our header and
output the image as a PNG.</p>


<p>We won't look at code for each image type, because except for
pie charts, this same code can generate each of the other types of
images with very few modifications. You simply need to change
GD::Graph::mixed to the name of the module you wish to use. The only
property in the set method here that is particular to mixed graphs is
<tt class="literal">types</tt>. The only property particular to mixed
charts or bar charts is <tt class="literal">bar_spacing</tt>. The others
are common across all the <a name="INDEX-2623" /> <a name="INDEX-2,624" /> <a name="INDEX-2,625" />other types.</p>


<p>Pie <a name="INDEX-2626" /> <a name="INDEX-2,627" /> <a name="INDEX-2,628" />charts are somewhat different. They only
accept a single data series, they cannot have a legend, and because
they have no axes, most of the parameters we just discussed do not
apply to them. Furthermore, pie charts are three-dimensional by
default. <a href="ch13_04.htm#ch13-79259">Example 13-4</a> provides the code used to
create the pie chart that's shown in <a href="ch13_04.htm#ch13-21659">Figure 13-7</a>.</p>



<a name="ch13-79259" /><div class="example">
<h4 class="objtitle">Example 13-4. commute_pie.cgi </h4>

<blockquote><pre class="code">#!/usr/bin/perl -wT

use strict;
use CGI;
use GD::Graph::pie;

use constant TITLE =&gt; "Average Commute Time: Pie Chart";

my $q     = new CGI;
my $graph = new GD::Graph::pie( 300, 300 );
my @data  = (
    [ qw( Mon  Tue  Wed  Thu  Fri ) ],
    [      33,  24,  23,  19,  21   ]
);


$graph-&gt;set( 
    title           =&gt; TITLE,
    '3d'            =&gt; 0
);

my $gd_image = $graph-&gt;plot( \@data );

print $q-&gt;header( -type =&gt; "image/png", -expires =&gt; "-1d" );

binmode STDOUT;
print $gd_image-&gt;png;</pre></blockquote>
</div>


<p>This script is much shorter because we do not set nearly so many
parameters. Instead, we simply set the title and turn the
<tt class="literal">3d</tt> option off (we will return to this concept in
the next section). We also used 300 &times; 300 for the size of the
graph instead of 400 &times; 300. GD::Graph will scale a pie chart to
fit the edges of the graph, so pie charts will be elliptical if they
are plotted in a rectangular region. Finally, we submit only one
series of data and omit the call to add a legend, which is currently
unsupported for pie charts.</p>
</div>




<a name="ch13-16-fm2xml" /><div class="sect2">
<h3 class="sect2">13.4.3. GD::Graph3D</h3>


<p>
<a name="INDEX-2629" /> <a name="INDEX-2,630" /> <a name="INDEX-2,631" />GD::Graph3D
allows us to <a name="INDEX-2632" />generate
three-dimensional charts. It is an extension to GD::Graph that
provides three additional modules:</p>


<ul><li><p>GD::Graph::bars3d creates three-dimensional bar charts, as shown in
<a href="ch13_04.htm#ch13-73311">Figure 13-9</a>.</p></li></ul>
<a name="ch13-73311" /><div class="figure"><img width="323" src="figs/cgi2.1309.gif" height="242" alt="Figure 13-9" /></div><h4 class="objtitle">Figure 13-9. A 3D bar chart created with GD::Graph::bars3d</h4>

<ul><li><p>
<a name="INDEX-2633" />GD::Graph::lines3d creates
three-dimensional line charts, as shown in <a href="ch13_04.htm#ch13-99023">Figure 13-10</a>.</p></li></ul>
<a name="ch13-99023" /><div class="figure"><img width="323" src="figs/cgi2.1310.gif" height="242" alt="Figure 13-10" /></div><h4 class="objtitle">Figure 13-10. A 3D line chart created with GD::Graph::lines3d</h4>

<ul><li><p>
<a name="INDEX-2634" />GD::Graph::pie3d creates
three-dimensional pie charts, as shown in <a href="ch13_04.htm#ch13-82953">Figure 13-11</a>. This module actually just calls
GD::Graph::pie, which now generates three-dimensional pie charts by
default anyhow. It is included simply to provide a name consistent
with the other two modules. In order to make the usage clear and
consistent, perhaps GD::Graph::pie will ultimately default to
non-three-dimensional pie charts and GD::Graph::pie3d can become the
preferred way to generate a 3D version.</p></li></ul>
<a name="ch13-82953" /><div class="figure"><img width="242" src="figs/cgi2.1311.gif" height="242" alt="Figure 13-11" /></div><h4 class="objtitle">Figure 13-11. A 3D pie chart created with GD::Graph::pie or GD::Graph::pie3d</h4>

<p>In order to use these modules, simply replace the standard module
name with the 3D module name; all other properties and methods remain
the same. Additionally, the 3D <a name="INDEX-2635" />
<a name="INDEX-2636" />bar chart
and 3D line chart each offer methods to set the depth of the bars and
lines. Refer to the included documentation. Note that although the
module is distributed as
<a name="INDEX-2637" />GD::Graph3d, the documentation is
installed, along with the additional graph types, in the
<em class="filename">GD/Graph</em>
<a name="INDEX-2638" /> directory, so to view the
documentation for GD::Graph3d, you <a name="INDEX-2639" /> <a name="INDEX-2,640" /> <a name="INDEX-2,641" />must reference it this <a name="INDEX-2,642" />way:</p>


<blockquote><pre class="code">$ perldoc GD::Graph::Graph3d</pre></blockquote>
</div>


<hr align="left" width="515" />
<div class="navbar"><table border="0" width="515"><tr><td width="172" valign="top" align="left"><a href="ch13_03.htm"><img src="../gifs/txtpreva.gif" alt="Previous" border="0" /></a></td><td width="171" valign="top" align="center"><a href="index.htm"><img src="../gifs/txthome.gif" alt="Home" border="0" /></a></td><td width="172" valign="top" align="right"><a href="ch13_05.htm"><img src="../gifs/txtnexta.gif" alt="Next" border="0" /></a></td></tr><tr><td width="172" valign="top" align="left">13.3. Generating PNGs with GD</td><td width="171" valign="top" align="center"><a href="index/index.htm"><img src="../gifs/index.gif" alt="Book Index" border="0" /></a></td><td width="172" valign="top" align="right">13.5. PerlMagick</td></tr></table></div>
<hr align="left" width="515" />

<img src="../gifs/navbar.gif" alt="Library Navigation Links" usemap="#library-map" border="0" />
<p><font size="-1"><a href="copyrght.htm">Copyright &copy; 2001</a> O'Reilly &amp; Associates. All rights reserved.</font></p>

<map name="library-map"><area href="../index.htm" coords="1,1,83,102" shape="rect" /><area href="../lnut/index.htm" coords="81,0,152,95" shape="rect" /><area href="../run/index.htm" coords="172,2,252,105" shape="rect" /><area href="../apache/index.htm" coords="238,2,334,95" shape="rect" /><area href="../sql/index.htm" coords="336,0,412,104" shape="rect" /><area href="../dbi/index.htm" coords="415,0,507,101" shape="rect" /><area href="../cgi/index.htm" coords="511,0,601,99" shape="rect" /></map>

</body></html>