111 lines
12 KiB
HTML
111 lines
12 KiB
HTML
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Adjusting the position and layout of the legend</title><link rel="stylesheet" type="text/css" href="manual.css"><meta name="generator" content="DocBook XSL Stylesheets V1.76.0"><link rel="home" href="index.html" title="JpGraph Manual"><link rel="up" href="ch14.html" title="Chapter 14. Common features for all Cartesian (x,y) graph types"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><table width="100%" summary="Navigation header"><tr><th colspan="3" align="center">Adjusting the position and layout of the legend</th></tr><tr><td width="20%" align="left"> </td><th width="60%" align="center">Chapter 14. Common features for all Cartesian (x,y) graph types</th><td width="20%" align="right"> </td></tr></table><hr></div><div class="sect1" title="Adjusting the position and layout of the legend"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="sec1.adjusting-legend-position"></a>Adjusting the position and layout of the legend</h2></div></div></div>
|
||
|
||
<p>While it is not strictly necessary to use a legend in the graph ti describe the
|
||
various data series potted it is usually a good idea. With the library there are
|
||
three basic types of formatting you can do with the legend.</p>
|
||
<p>
|
||
</p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
|
||
<p>Adjusting basic parameters such as color and width of the edges
|
||
(frame) around the plot box as well as adding/removing a drop shadow on
|
||
the legend box.</p>
|
||
</li><li class="listitem">
|
||
<p>Adjusting the position of the legend in the graph</p>
|
||
</li><li class="listitem">
|
||
<p>Adjusting the number of columns that should be used for the internal
|
||
layout in the legend box. As default the legend uses one column.</p>
|
||
</li></ol></div><p>
|
||
</p>
|
||
<p>In <a class="xref" href="ch14s04.html#fig.legend-position-examples" title="Figure 14.15. Some example of ways to position the legend box in the graph">Figure 14.15. Some example of ways to position the legend box in the graph</a> we have shown some ides on
|
||
how the legend can be positioned in the graph to give some ideas on the options
|
||
available.</p>
|
||
<p>
|
||
</p><div class="figure"><a name="fig.legend-position-examples"></a><p class="title"><b>Figure 14.15. Some example of ways to position the legend box in the graph</b></p><div class="figure-contents">
|
||
|
||
<div class="informaltable">
|
||
<table border="1"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td><span class="inlinemediaobject"><img src="images/img_mmlegend1.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend2.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend3.png" alt="Some example of ways to position the legend box in the graph"></span></td></tr><tr><td><span class="inlinemediaobject"><img src="images/img_mmlegend4.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend5.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend6.png" alt="Some example of ways to position the legend box in the graph"></span></td></tr><tr><td><span class="inlinemediaobject"><img src="images/img_mmlegend7.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend8.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend9.png" alt="Some example of ways to position the legend box in the graph"></span></td></tr><tr><td><span class="inlinemediaobject"><img src="images/img_mmlegend10.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend15.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend35.png" alt="Some example of ways to position the legend box in the graph"></span></td></tr><tr><td><span class="inlinemediaobject"><img src="images/img_mmlegend55.png" alt="Some example of ways to position the legend box in the graph"></span></td><td><span class="inlinemediaobject"><img src="images/img_mmlegend75.png" alt="Some example of ways to position the legend box in the graph"></span></td><td>
|
||
</td></tr></tbody></table>
|
||
</div>
|
||
</div></div><p><br class="figure-break">
|
||
</p>
|
||
<p>The way the legend is positioned is by calling one of the two methods </p>
|
||
<div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Legend::SetPos($aX,$aY,$aHAlign='right',$aVAlign='top')</code></p>
|
||
</li><li class="listitem">
|
||
<p><code class="code">Legend::SetAbsPos($aX,$aY,$aHAlign='right',$aVAlign='top')</code></p>
|
||
</li></ul></div><p>The first method specifies the position in fraction of the width and
|
||
height and the second method specifies the position in absolute pixels where (0,0)
|
||
is the top left corner. The anchor point for the legend box, i.e. the point in the
|
||
legend box that should be aligned with the specified positoin, is given with the
|
||
following two parameters. The line below gives an example of specifying the legend
|
||
position </p>
|
||
<p>
|
||
</p><div class="hl-main"><table class="hl-table" width="100%"><tr><td class="hl-gutter" align="right" valign="top"><pre>1
|
||
</pre></td><td class="hl-main" valign="top"><pre><span class="hl-code">$graph->legend->SetPos(0.5,0.98,'center','bottom');</span></pre></td></tr></table></div><p>
|
||
</p>
|
||
<p>The line above will position the legend centered horizontally and the bottom of
|
||
the legend just above the the bottom edge of the graph.</p>
|
||
<p>
|
||
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
|
||
<p>The legend box can also have a drop shadow. By specifying the color to be
|
||
alpha-blended it is possible create a very nice drop shadow affect onto the
|
||
graph. See <a class="xref" href="ch14.html#fig.filledgridex1" title="Figure 14.2. Using alternating fill colors in the grid (filledgridex1.php)">Figure 14.2. Using alternating fill colors in the grid <code class="uri"><a class="uri" href="example_src/filledgridex1.html" target="_top">(<code class="filename">filledgridex1.php</code>)</a></code> </a> or <a class="xref" href="ch14s04.html#fig.legend-layouts" title="Figure 14.16. Some example of different legend layouts">Figure 14.16. Some example of different legend layouts</a> for some examples on how this
|
||
looks.</p>
|
||
</div><p>
|
||
</p>
|
||
<p>
|
||
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
|
||
<p>By default the ordering of the texts in te legend will be the same as the
|
||
order the plots are added to the graph. It is also possible to reverse this
|
||
order in the legend with a call to the method
|
||
<code class="code">Legend::Revers()</code></p>
|
||
</div><p>
|
||
</p>
|
||
<p>The layout of the legend box can also be adjusted by specifying how many columns
|
||
the legends should use. By default one column is used which means that all legend
|
||
texts will be on top of each other. The number of columns to be used in the legend
|
||
is specified with a call to the method</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Legend::SetColumns($aNbr)</code></p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p><a class="xref" href="ch14s04.html#fig.legend-layouts" title="Figure 14.16. Some example of different legend layouts">Figure 14.16. Some example of different legend layouts</a> shows four examples how setting different
|
||
values for the number of columns will change the layout of the legend.</p>
|
||
<div class="figure"><a name="fig.legend-layouts"></a><p class="title"><b>Figure 14.16. Some example of different legend layouts</b></p><div class="figure-contents">
|
||
|
||
<div class="mediaobject"><img src="images/legend-col-layouts.png" alt="Some example of different legend layouts"></div>
|
||
</div></div><br class="figure-break">
|
||
<p>As two special cases the one column layout (a.k.a. vertical layout) which is the
|
||
default, and the "unlimited number of columns" a.k.a. horizontal layout can also be
|
||
specified with the method</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Legend::SetLayout($aLayout)</code></p>
|
||
<p><code class="code">$aLayout</code> is either <code class="code">LEGEND_VERT</code> or
|
||
<code class="code">LEGEND_HOR</code></p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>
|
||
</p><div class="caution" title="Caution" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Caution</h3>
|
||
<p>Either <code class="code">SetLayout()</code> or <code class="code">SetColumns()</code> should be
|
||
used but not both since the method last called will be the one that is
|
||
used.</p>
|
||
</div><p>
|
||
</p>
|
||
<p>
|
||
</p><div class="tip" title="Tip" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Tip</h3>
|
||
<p>The vertical margin between two legend texts can be adjusted with a call
|
||
to the method</p>
|
||
<p>
|
||
</p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
|
||
<p><code class="code">Legend::SetVColMargin($aSpacing)</code></p>
|
||
</li></ul></div><p>
|
||
</p>
|
||
<p>by default the margin is quite small. <span class="bold"><strong>Note</strong></span>. Since the bounding box for TTF fonts and bitmapped
|
||
texts are slightly different the distance between legend texts when using a
|
||
bitmap font (the default) will be visually larger than for TTF fonts. The
|
||
default value is optimized for TTF fonts.</p>
|
||
</div><p>
|
||
</p>
|
||
</div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"> </td><td width="20%" align="center"><a accesskey="u" href="ch14.html">Up</a></td><td width="40%" align="right"> </td></tr><tr><td width="40%" align="left" valign="top"> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right" valign="top"> </td></tr></table></div></body></html>
|