PageRenderTime 32ms CodeModel.GetById 10ms RepoModel.GetById 1ms app.codeStats 0ms

/jpgraph/docs/chunkhtml/ch14s16.html

https://gitlab.com/GLORIA04/conception-site-web
HTML | 95 lines | 90 code | 5 blank | 0 comment | 0 complexity | 178bc16baf8ff2d9605a1e33d49a5bce MD5 | raw file
    

  1. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Using background gradients</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">Using background gradients</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="Using background gradients"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="id2552733"></a>Using background gradients</h2></div></div></div>
    2. 

  2.             
    3. 

  3.             <p>A color gradient background will change the color from a start color to a finish
    4. 

  4.                 color in even steps (the number of steps depends on the size of the graph). The
    5. 

  5.                 direction of the gradient is controlled by specifying a style parameter for the
    6. 

  6.                 gradient. The signature for the gradient background method is</p>
    7. 

  7.             <p>
    8. 

  8.                 </p><div class="orderedlist"><ol class="orderedlist" type="1"><li class="listitem">
    9. 

  9.                         <p><code class="code">Graph::SetBackgroundGradient($aFrom='navy',$aTo='silver',$aGradType=2,$aStyle=BGRAD_FRAME)</code></p>
    10. 

  10.                     </li></ol></div><p>
    11. 

  11.             </p>
    12. 

  12.             <p>The last style par mater specified where in the graph the gradient style should be
    13. 

  13.                 applied and the different options are</p>
    14. 

  14.             <p>
    15. 

  15.                 </p><div class="itemizedlist"><ul class="itemizedlist" type="disc"><li class="listitem">
    16. 

  16.                         <p><code class="code">BGRAD_FRAME</code>, The entire graph frame will be filled
    17. 

  17.                         </p>
    18. 

  18.                     </li><li class="listitem">
    19. 

  19.                         <p><code class="code">BGRAD_MARGIN</code>, Only the margin area (the graph area
    20. 

  20.                             outside the plot area) will be filled</p>
    21. 

  21.                     </li><li class="listitem">
    22. 

  22.                         <p><code class="code">GRAD_PLOT</code>, Only the plot area will be filled</p>
    23. 

  23.                     </li></ul></div><p>
    24. 

  24.             </p>
    25. 

  25.             <p>This is illustrated in <a class="xref" href="ch14s16.html#fig.different-gradient-fill-types" title="Figure 14.93. What area of the graph the gradient should affect">Figure 14.93. What area of the graph the gradient should affect</a></p>
    26. 

  26.             <p>
    27. 

  27.                 </p><div class="figure"><a name="fig.different-gradient-fill-types"></a><p class="title"><b>Figure 14.93. What area of the graph the gradient should affect</b></p><div class="figure-contents">
    28. 

  28.                     
    29. 

  29.                     <div class="informaltable">
    30. 

  30.                         <table border="0"><colgroup><col class="c1"><col class="c2"><col class="c3"></colgroup><tbody><tr><td align="center">
    31. 

  31.                                         <p><span class="inlinemediaobject"><img src="images/grad_bgrad_frame.png" alt="What area of the graph the gradient should affect"></span></p>
    32. 

  32.                                         <p><code class="code">BGRAD_FRAME</code></p>
    33. 

  33.                                     </td><td align="center">
    34. 

  34.                                         <p><span class="inlinemediaobject"><img src="images/grad_bgrad_margin.png" alt="What area of the graph the gradient should affect"></span></p>
    35. 

  35.                                         <p><code class="code">BGRAD_MARGIN</code></p>
    36. 

  36.                                     </td><td align="center">
    37. 

  37.                                         <p><span class="inlinemediaobject"><img src="images/grad_bgrad_plot.png" alt="What area of the graph the gradient should affect"></span></p>
    38. 

  38.                                         <p><code class="code">BGRAD_PLOT</code></p>
    39. 

  39.                                     </td></tr></tbody></table>
    40. 

  40.                     </div>
    41. 

  41.                 </div></div><p><br class="figure-break">
    42. 

  42.             </p>
    43. 

  43.             <p>The different types of gradient fills are shown in <a class="xref" href="ch14s16.html#fig.different-gradient-types" title="Figure 14.94. Different types of gradient fills">Figure 14.94. Different types of gradient fills</a> where the gradient from color is
    44. 

  44.                     "<code class="code">white</code>" and the to color is "<code class="code">orange</code>"</p>
    45. 

  45.             <p>
    46. 

  46.                 </p><div class="figure"><a name="fig.different-gradient-types"></a><p class="title"><b>Figure 14.94. Different types of gradient fills</b></p><div class="figure-contents">
    47. 

  47.                     
    48. 

  48.                     <div class="informaltable">
    49. 

  49.                         <table border="0"><colgroup><col class="c1"><col class="c2"></colgroup><tbody><tr><td>
    50. 

  50.                                         <p><span class="inlinemediaobject"><img src="images/grad_vert.png" alt="Different types of gradient fills"></span></p>
    51. 

  51.                                     </td><td>
    52. 

  52.                                         <p><span class="inlinemediaobject"><img src="images/grad_hor.png" alt="Different types of gradient fills"></span></p>
    53. 

  53.                                     </td></tr><tr><td>
    54. 

  54.                                         <p><span class="inlinemediaobject"><img src="images/grad_midhor.png" alt="Different types of gradient fills"></span></p>
    55. 

  55.                                     </td><td>
    56. 

  56.                                         <p><span class="inlinemediaobject"><img src="images/grad_midver.png" alt="Different types of gradient fills"></span></p>
    57. 

  57.                                     </td></tr><tr><td>
    58. 

  58.                                         <p><span class="inlinemediaobject"><img src="images/grad_wide_midhor.png" alt="Different types of gradient fills"></span></p>
    59. 

  59.                                     </td><td>
    60. 

  60.                                         <p><span class="inlinemediaobject"><img src="images/grad_wide_midver.png" alt="Different types of gradient fills"></span></p>
    61. 

  61.                                     </td></tr><tr><td>
    62. 

  62.                                         <p><span class="inlinemediaobject"><img src="images/grad_left_reflection.png" alt="Different types of gradient fills"></span></p>
    63. 

  63.                                     </td><td>
    64. 

  64.                                         <p><span class="inlinemediaobject"><img src="images/grad_right_reflection.png" alt="Different types of gradient fills"></span></p>
    65. 

  65.                                     </td></tr><tr><td>
    66. 

  66.                                         <p><span class="inlinemediaobject"><img src="images/grad_center.png" alt="Different types of gradient fills"></span></p>
    67. 

  67.                                     </td><td>
    68. 

  68.                                         <p><span class="inlinemediaobject"><img src="images/grad_raised_panel.png" alt="Different types of gradient fills"></span></p>
    69. 

  69.                                     </td></tr><tr><td>
    70. 

  70.                                         <p><span class="inlinemediaobject"><img src="images/grad_diagonal.png" alt="Different types of gradient fills"></span></p>
    71. 

  71.                                     </td><td> </td></tr></tbody></table>
    72. 

  72.                     </div>
    73. 

  73.                 </div></div><p><br class="figure-break">
    74. 

  74.             </p>
    75. 

  75.             <div class="sect2" title="Generating gradient background off-line"><div class="titlepage"><div><div><h3 class="title"><a name="id2553714"></a>Generating gradient background off-line</h3></div></div></div>
    76. 

  76.                 
    77. 

  77.                 <p>A drawback of using gradient backgrounds is that they are processing intensive
    78. 

  78.                     and since they are generated each time the graph is generated it can take
    79. 

  79.                     substantive amount of time for large graphs. To help with this the library
    80. 

  80.                     offers a small (very simple) utility that can be tun to create gradient images
    81. 

  81.                     off line. These images can later on be used as (static) background images. In
    82. 

  82.                     the distribution there is a small utility in the
    83. 

  83.                     "<code class="filename">Examples/</code>" directory called
    84. 

  84.                         "<code class="filename">mkgrad.php</code>". Pointing the browser to this script will
    85. 

  85.                     show a basic form as shown in <a class="xref" href="ch14s16.html#fig.mkgrad" title='Figure 14.95. The "mkgrad" utiliy to create gradient images'>Figure 14.95. The "mkgrad" utiliy to create gradient images</a>. The script will
    86. 

  86.                     allow the creation of a gradient images using any of the predefined colors and
    87. 

  87.                     gradient types.</p>
    88. 

  88.                 <p>
    89. 

  89.                     </p><div class="figure"><a name="fig.mkgrad"></a><p class="title"><b>Figure 14.95. The "mkgrad" utiliy to create gradient images</b></p><div class="figure-contents">
    90. 

  90.                         
    91. 

  91.                         <div class="mediaobject"><img src="images/mkgrad.png" alt='The "mkgrad" utiliy to create gradient images'></div>
    92. 

  92.                     </div></div><p><br class="figure-break">
    93. 

  93.                 </p>
    94. 

  94.             </div>
    95. 

  95.         </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>
    96. 

  96.