Blame | Letzte Änderung | Log anzeigen | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"><HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-iso-8859-1"><LINK REL="Start" HREF="index.html"><LINK REL="Contents" HREF="toc.html"><LINK REL="Prev" HREF="815Addingplotmarksiradargraphs.html"><LINK REL="Next" HREF="821AddingguidelinestoPiePlots.html"><STYLE TYPE="text/css"><!--BODY { font-family: serif }H1 { font-family: sans-serif }H2 { font-family: sans-serif }H3 { font-family: sans-serif }H4 { font-family: sans-serif }H5 { font-family: sans-serif }H6 { font-family: sans-serif }SUB { font-size: smaller }SUP { font-size: smaller }PRE { font-family: monospace }A { text-decoration: none }--></STYLE></HEAD><BODY><A HREF="toc.html">Contents</A><A HREF="815Addingplotmarksiradargraphs.html">Previous</A><A HREF="821AddingguidelinestoPiePlots.html">Next</A><HR NOSHADE><H2><A NAME="8_2">8.2 Pie plots</A></H2><P> So far we have just show plots based on an X-Y coordinate system.This is not the only types of graphs you can create with JpGraph.Another common type is Pie plots. JpGraph supports both 2D and 3D pieplots. For 2D pie plots there are also 2 versions, but more on thatlater.</P><P> The main difference as compared to the X-Y plots is that to all pieplots are added to the <A href="../ref/PieGraph.html#_C_PIEGRAPH">PieGraph()</A> instead of the Graph() object we used for the X-Y graphswe have drawn so far. For this you must first include the"jpgraph_pie.php" in your script (or "jpgraph_pie3d.php" if you want touse 3-dimensional pies).</P><P> Below you cane see the code needed to create the simplest possiblepie graph just using the default settings.</P><P><DIV class="phpscript"><CODE><FONT color="#000000"> <FONT color="#0000BB"> </FONT><FONT color="#007700">include (</FONT><FONT color="#DD0000">"../jpgraph.php"</FONT><FONT color="#007700">);<BR>include (</FONT><FONT color="#DD0000">"../jpgraph_pie.php"</FONT><FONTcolor="#007700">);<BR><BR></FONT><FONT color="#0000BB">$data </FONT><FONT color="#007700">= array(</FONT><FONT color="#0000BB">40</FONT><FONT color="#007700">,</FONT><FONTcolor="#0000BB">60</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">21</FONT><FONT color="#007700">,</FONT><FONT color="#0000BB">33</FONT><FONTcolor="#007700">);<BR><BR></FONT><FONT color="#0000BB">$graph </FONT><FONT color="#007700">= new </FONT><FONT color="#0000BB">PieGraph</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">300</FONT><FONT color="#007700">,</FONT><FONTcolor="#0000BB">200</FONT><FONT color="#007700">);<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONTcolor="#0000BB">SetShadow</FONT><FONT color="#007700">();<BR><BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONTcolor="#0000BB">title</FONT><FONT color="#007700">-></FONT><FONT color="#0000BB">Set</FONT><FONT color="#007700">(</FONT><FONT color="#DD0000">"A simple Pie plot"</FONT><FONT color="#007700">);<BR><BR></FONT><FONT color="#0000BB">$p1 </FONT><FONT color="#007700">= new </FONT><FONTcolor="#0000BB">PiePlot</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$data</FONT><FONT color="#007700">);<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONTcolor="#0000BB">Add</FONT><FONT color="#007700">(</FONT><FONT color="#0000BB">$p1</FONT><FONT color="#007700">);<BR></FONT><FONT color="#0000BB">$graph</FONT><FONT color="#007700">-></FONT><FONTcolor="#0000BB">Stroke</FONT><FONT color="#007700">();<BR></FONT><FONT color="#0000BB"></FONT></FONT></CODE></DIV></P><P> The above code would give the following pie graph<DIV class="example"><BR> <A href="exframes/frame_example26.html" target="blank"><IMG border="0"HEIGHT="200" src="img/img/img/img/img/img/example26.png" WIDTH="300"></A><BR><B>Figure 121:</B> The simplest possible pie graph <A href="exframes/frame_example26.html"target="blank">[src]</A> <P></P></DIV></P><P> There is a few things worth noting here</P><UL><LI> By default all pie slices have the percentage shown just outsidethe slice.</LI><LI> The colors are automatically assigned to the slices.</LI><LI> The pie have the edges marked by default</LI><LI> The first slice start at 0 degrees (3 o'clock)</LI></UL><P> You can change almost all aspects of appearance of the pie graphs.For example you could change :</P><UL><LI> Change the angle for the first slice, (<A href="../ref/PiePlot.html#_PIEPLOT_SETSTARTANGLE">PiePlot::SetStartAngle()</A>)</LI><LI>Remove the border lines around the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SHOWBORDER">PiePlot::ShowBorder()</A>)</LI><LI>Change the color of the border (<A href="../ref/PiePlot.html#_PIEPLOT_SETCOLOR">PiePlot::SetColor()</A>,</LI><LI>Change the colors of the slices (<A href="../ref/PiePlot.html#_PIEPLOT_SETSLICECOLORS">PiePlot::SetSliceCOlors()</A>)</LI><LI> Change the size and position of the pie (<A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">PiePlot::SetSize()</A>, <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER">PiePlot::SetCenter()</A>)</LI><LI> Adjust the labels for the slice (color, font, format, position ) byaccessing the <A href="../ref/DisplayValue.html#_C_DISPLAYVALUE">valueproperty</A> of pie plots, for example (<A href="../ref/DisplayValue.html#_DISPLAYVALUE_SETFONT">PiePlot::value::SetFont()</A>, You can read more about label formattingand how to change what is displayed as a value further down in thischapter.</LI></UL><P></P><P> The next simplest addition we can do is to add a legend to the piegraph. We do this by using the <A href="../ref/PiePlot.html#_PIEPLOT_SETLEGENDS">SetLegends();</A> method. By adding the legends to the previous examplewe get the following image<DIV class="example"><BR> <A href="exframes/frame_example26.1.html" target="blank"><IMG border="0"HEIGHT="200" src="img/img/img/img/img/img/example26.1.png" WIDTH="300"></A><BR><B>Figure 122:</B> Adding a legend to the pie graph <A href="exframes/frame_example26.1.html"target="blank">[src]</A> <P></P></DIV></P><P></P><P> (In the figure above we also moved the center of the pie slightly tothe left to make more room for the legend box.)</P><P> The text for the legends can also contain printf() style formatstrings to format a number. This number passed on into this string iseither the absolute value of the slice or the percentage value. How toswitch between the is describe further down in this chapter.</P><P> The next change you might want to change is the size and position ofthe Pie plot. You can change the size with a call to <A href="../ref/PiePlot.html#_PIEPLOT_SETSIZE">SetSize();</A> and the position of the center of the pie plot with acall to <A href="../ref/PiePlot.html#_PIEPLOT_SETCENTER"> SetCenter();</A>The size can be specified as either an absolute size in pixels or as afraction of width/height (whatever is the smallest). The position ofthe pie plot is specified as a fraction of the width and height.</P><P> To put the size and positioning API to use we will show how to putseveral pie plots on the same pie graph. In the following example wehave also adjusted the legends of the slice values to use a smallerfont.</P><P> What we do in this example is quite simple, create 4 pie plots, makethem smaller and put them in the four corner of the graph. This willgive the result as shown in the following example.<DIV class="example"><BR> <A href="exframes/frame_pieex3.html" target="blank"><IMG border="0" HEIGHT="300"src="img/img/img/img/img/img/pieex3.png" WIDTH="350"></A><BR><B>Figure 123:</B> Multiple pie plots in the same pie graph <A href="exframes/frame_pieex3.html"target="blank">[src]</A> <P></P></DIV></P><P></P><HR NOSHADE><A HREF="toc.html">Contents</A><A HREF="815Addingplotmarksiradargraphs.html">Previous</A><A HREF="821AddingguidelinestoPiePlots.html">Next</A></BODY></HTML>