來源:
http://listdo.bokee.com/viewdiary.12328652.html
以前用PHP作圖時必須要掌握復雜抽象的畫圖函數(shù),或者借助一些網(wǎng)上下載的花柱形圖、餅形圖的類來實現(xiàn)。沒有一個統(tǒng)一的chart類來實現(xiàn)圖表的快速開發(fā)。
現(xiàn)在我們有了一個新的選擇:JpGraph。專門提供圖表的類庫。它使得作圖變成了一件非常簡單的事情,你只需從 數(shù)據(jù)庫 中取出相關數(shù)據(jù),定義標題,圖表類型,然后的事情就交給JpGraph,只需掌握為數(shù)不多的JpGraph內置函數(shù)(可以參照JpGraph附帶例子學習),就可以畫出非常炫目的圖表!
一、JpGraph安裝方法:
1、先到 http://www.aditus.nu/jpgraph/ 下載最新的版本。
2、確保你的PHP版本最低為4.04(最好是4.1.1),并且支持GD庫。必須確保GD庫可以正常運行,可以通過運行phpinfo()來查看GD庫的信息是否存在的方法來判斷。同時要有要求GD庫的版本應為2.0,而不是1.0。
3、將下載的JpGraph壓縮包解壓到任意文件夾。
4、設置jpgraph.php(jpgraph的主配置文件)。設置jpgraph的cache(緩存)文件夾,和TTF(字體)文件夾。
分別在35行和38行
35//DEFINE("CACHE_DIR","/tmp/jpgraph_cache/");
38//DEFINE("TTF_DIR","/usr/X11R6/lib/X11/fonts/truetype/");
Linux系統(tǒng)改為:
DEFINE("CACHE_DIR","/tmp/jpgraph_cache/");'
DEFINE("TTF_DIR","/usr/X11R6/lib/X11/fonts/truetype/");
Windows系統(tǒng)改為:
DEFINE("CACHE_DIR","c:/apache/htdocs/jpgraph_cache/");'
DEFINE("TTF_DIR","c:/windows/fonts");
注意事項:
(1)cache(緩存)文件夾路徑可以自己定義,而TTF(字體)文件夾必須是%system%/Fonts。
(2)確保PHP對cache(緩存)文件夾有寫的權限。
5、完成上述設置后就可以使用JpGraph了,可以先將JpGraph的例子copy到htdocs文件夾中,運行一下看看。呵呵,200多個例子,包含各類圖表,夠學一陣子的。
在實際使用中,筆者還遇到了一些問題,比如字體錯誤等等,還在研究中……
從數(shù)據(jù)庫中讀取數(shù)據(jù)到jpgraph圖表中
1、將./src/Examples目錄中的文件example16.2.php以及./src目錄中的文件jpgraph_bar.php、jpgraph_gradient.php、jpgraph_line.php、jpgraph_plotmark.inc、jpgraph.php拷貝到同一目錄下。
2、建立數(shù)據(jù)庫jpg,數(shù)據(jù)庫表test
建立2個字段:
id(主鍵):int
number:int
并添加一些數(shù)據(jù)
3、修改example16.2.php
修改后的代碼
<?php <br />include("jpgraph.php");
include("jpgraph_line.php");
include("jpgraph_bar.php");
$connect=mysql_connect("localhost","root","");
mysql_select_db("jpg",$connect);
$query=mysql_query("select*fromtest",$connect);
$i=0;
while($array=mysql_fetch_array($query)){
$l2datay[$i]=$array["number"];
$i++;
}
mysql_close($connect);
//Createthegraph.
$graph=newGraph(400,200,"auto");
$graph->SetScale("textlin");
$graph->img->SetMargin(40,130,20,40);
$graph->SetShadow();
//Createthebarplot
$bplot=newBarPlot($l2datay);
$bplot->SetFillColor("orange");
$bplot->SetLegend("Result");
//Addtheplotstot'hegraph
$graph->Add($bplot);
$graph->title->Set("Addingalineplottoabargraphv1");
$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");
$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
//$graph->xaxis->SetTickLabels($datax);
//$graph->xaxis->SetTextTickInterval(2);
//Displaythegraph
$graph->Stroke();
?>
4、刷新頁面即可看到結果
【附加信息】
官方網(wǎng)站: http://www.aditus.nu/jpgraph/
看看jpGraph能夠達到的效果:
來源:
http://www.aditus.nu/jpgraph/features_gallery.php
Line Plots
<!-- <img src="img/gallery/funcex1.png"> -->
Filled Line Plots
Step Line Plots
Line Plots With Markers
Line Plots With Inverted Y-axis
As an example of usage of the scale formatting callback routines it is possible to further adjust the scaling in (almost) any way that is desired. In the example below we have used a small "trick" to invert the Y-axis to show a dive profile curve. |
Line Plots With Values
It is of course possible to show the value of each data point for both line, bar, pie plots etc. No matter what type of plot is used the interface to the formatting of the values are identical, Formatting can be done either automatically, by specifying a formatting string (in the style of "printf">, or by using the more advanced method of specifying a callback formatting function that will be called upon for each data point to create the desired display value. |
Standard Bar plots
Bar plots is also well catered for. Size of bars, fill colors, fill gradients, fill patterns etc are all configurable settings. It is also possible to use both accumulated, group or just plain bar graphs. For enhanced visual appearance it is also possible to use alpha blending and backgrounds. In the second image below a callback function for the formatting of the Y-axis values is used to format the label as a number with thousand separator. |
Horizontal Bar plots
Horizontal bar graphs has also all the same formatting as standard vertical bars. In the example below we have also illustrated how it is possible to adjust the position of the value that can be displayed for each bar. |
Adding backgrounds and patterns to bar plots
In the examples below we show two more formatting possibilities. The first example shows the addition of one of the pre-defined country flags as a background and the second example shows the addition of a background pattern between 2 Y-values. |
Combined Line and Bar plots
Pie Plots
For Pie plots all the ordinary formatting (colors, size etc) is of course available. In addition it is also possible to specify details such as, angle for first slice, the use of themes to automatically select a color set, position of pie, explode one or several slices. Pie plots also use Hare-Niemer integer compensation to make sure that all displayed values on slices always add up to 100%. |
3D Pie plots
Exploding Pie plots
Ring Plots
Scatter plots
Scatter plots is very similar to Line plots. They are used to display a number of data points that are defined by it's X- and Y-value. Each data point can be illustrated by one of the available plot-marks. |
Linked scatter plots
Combined Scatter and Line plots
By combining a scatter plot with a line plot it is possible to for example illustrate linear regression. |
Impulse Plots
Impulse plots is in a way similar to scatter and line plots. It is often used in signal processing to illustrate a sampled analogue signal which consists of a weighted pulse train. In the example below we show a typical damped impulse response. |
Field Plots
Field plots is a scatter plot with a twist. By associating a callback function to plot it is possible to easily create images of various fields (e.g. for example magnetic, motion of air or fluids). |
Spline Curves
The library also contains helper function to create smooth data from one or several control points, a.k.a spline plots. By default the library creates natural splines (2:nd derivate==0). |
Geographic Map Plots
By combining a background image (that displays a map) with a scatter plot using plot-marks it is possible to create dynamic maps to illustrate various information. In the images below we have used the built-in "pushpin" plot-marks for a scatter plot. |
Stock Plots
Polar Plots (180 degrees)
Polar plots is used to display a magnitude value in a specific direction. The polar plots have two variants; a full 360-degree plot and a half 180-degree plot. The magnitude can be displayed in either linear or logarithmic scale. Each polar graph can also have one or several plots.
|
Polar Plots (360 degrees)
Polar plots can also have plot-marks which are shown in the second example below. The formatting of the axis can also be adjusted for how the labels and tick marks are displayed. Some possible variants are also shown in the images below. |
Error plots
Balloon plots
Balloon plot is basically a variant of the scatter plot where a call back function is used to give the "third dimension" of the plot, i.e. the size and color of each balloon. |
Radar Plots
Gantt Charts
Canvas plots
This type is not really a standard plot. It gives a convenient way to create arbitrary shapes on a canvas. It will allow the usage of easily created scales and access to all the convenience methods and functions available in JpGraph. |
Spam challenge images
This is used to create images of what is very hard to read letters and digits that can be used to prohibit automatic signup to mail-lists and online communities. |
Additional plots available in the Pro-Version
更多文章、技術交流、商務合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
