顯示具有 pChart 標籤的文章。 顯示所有文章
顯示具有 pChart 標籤的文章。 顯示所有文章

2015年5月24日 星期日

pChart 的使用方法整理(五)進階長條圖(Bar Chart)

進階的長條圖 與基礎長條圖有以下不同

1、數據由 1 組變為 2 組
2、設定橫座標名稱
3、加入背景色，讓預設為白色的格線顯示
4、加上標題
5、加上圖例說明
6、指定刻度的最大及最小值



程式碼如下：
// 引用相關類別檔
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pData.class.php");

// 建立資料集物件
$myData = new pData();

// 在資料集中新增資料
// 設定第1個縱座標(Y軸)的資列數列
$myData->addPoints(array(150,220,300,250,420), "台北");
// 設定第2個縱座標(Y軸)的資列數列 -- New-1
$myData->addPoints(array(250,210,500,150,320), "高雄");
// 設定縱座標(Y軸)的名稱
$myData->setAxisName(0,"雨量");
// 新增一筆資料數列，並命名為 Months
$myData->addPoints(array("一月","二月","三月","四月","五月"),"Months");
// 將 Months 設定為橫座標
$myData->setAbscissa("Months");
// 設定橫座標名稱 -- New-2
$myData->setAbscissaName("月份");

// 建立一個圖形物件，設立它的尺寸及相關的資料集
$myPicture = new pImage(600,400,$myData);

// 指定圖形中使用的字型和字體大小
$myPicture->setFontProperties(array("FontName"=>"fonts/NotoSansCJKtc-Regular.otf","FontSize"=>12));

// 加上背景色，讓預設的白色格線顯示 -- New-3
$backgroundSettings = array("R"=>120, "G"=>133, "B"=>63);
$myPicture->drawFilledRectangle(0,0,600,400,$backgroundSettings);

// 畫出圖表的外框
$myPicture->drawRectangle(0,0,599,399,array("R"=>0,"G"=>0,"B"=>0));

// 設定圖表在圖形中的位置
$myPicture->setGraphArea(60,80,550,330);

// 加上標題 -- New-4
$myPicture->drawText(280,55,"累計雨量統計圖",array("FontSize"=>20,"Align"=>TEXT_ALIGN_BOTTOMMIDDLE));

// 加上圖例說明 -- New-5
$myPicture->drawLegend(400,60,array("Style"=>LEGEND_NOBORDER,"Mode"=>LEGEND_HORIZONTAL));

// 畫出刻度，並設定刻度的最大及最小值 -- New-6
$axisBoundaries = array(0=>array("Min"=>0,"Max"=>550));
$scaleSettings  = array("Mode"=>SCALE_MODE_MANUAL,"ManualScale"=>$axisBoundaries);
$myPicture->drawScale($scaleSettings);

// 設定長條圖的相關設定，在這個例子中，是顯示數值
$settings = array("DisplayValues"=>TRUE);

// 畫出長條圖
$myPicture->drawBarChart($settings);

// 如果我們要將生成的 png 存檔，可以用以下的方式；如果只想單純顯示，此行可省略
$myPicture->render('example_05.png');

// 將圖形輸出到瀏覽器
$myPicture->autoOutput();



相關連結：

張貼者： 於 沒有留言:
標籤： ,

2015年5月22日 星期五

pChart 的使用方法整理(四)簡單圓餅圖(Pie Chart)

在這裏以一個簡單的例子說明如何用 pChart 產生圓餅圖，並且在圖片的上面列出這張圖的標題。


程式碼如下：

// 引用相關類別檔
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pData.class.php");

// 使用圓餅圖需要引入這個類別檔
include("class/pPie.class.php");

// 建立資料集物件
$myData = new pData();

// 在資料集中新增資料
// 設定資列數列
$myData->addPoints(array(550,320,300,150,120));
// 新增一筆資料數列，並命名為 Area
$myData->addPoints(array("北部","中部", "南部", "東部", "離島"), "Area");
// 將 Area 設定為橫座標
$myData->setAbscissa("Area");

// 建立一個圖形物件，設立它的尺寸及相關的資料集
$myPicture = new pImage(400,400,$myData);

// 指定圖形中使用的字型和字體大小
$myPicture->setFontProperties(array("FontName"=>"fonts/NotoSansCJKtc-Regular.otf","FontSize"=>12));

// 畫出圖表的外框
$myPicture->drawRectangle(0,0,399,399);

// 畫出圖表的標題區域
$RectangleSettings = array("R"=>0,"G"=>0,"B"=>0);
$myPicture->drawFilledRectangle(0,0,400,25,$RectangleSettings);

// 寫出圖表的標題
$myPicture->drawText(150,22,"區域分布圖",array("R"=>255,"G"=>255,"B"=>255));

$PieChart = new pPie($myPicture,$myData);

// 設定圓餅圖在圖形中的位置及設定
$settings = array(
    "Radius"=>120, // 圓餅圖半徑
    "Border" => TRUE, // 區塊的框線
    "DrawLabels"=>TRUE, // 畫出標籤
    "WriteValues" => true, // 標示數值
    "ValuePosition" => PIE_VALUE_INSIDE, // 數值的位置
    );
$PieChart->draw2DPie(200,200, $settings);


// 如果我們要將生成的 png 存檔，可以用以下的方式；如果只想單純顯示，此行可省略
$myPicture->render('example_04.png');

// 將圖形輸出到瀏覽器
$myPicture->autoOutput();



相關連結：

張貼者： 於 沒有留言:
標籤： ,

pChart 的使用方法整理(三)使用中文字型

我們所下載下來的 pChart 函式庫，並沒有包含中文字型；所以當我們要在圖表中顯示中文字，就會出現空白或是方塊。

預設的英文字型有下列9種，字型檔位於 fonts/ 目錄下：



解決的方法自然是下載中文字型，但是一般的中文字型通常是要付費購買的，如果你有購買中文字型，可以直接把想要使用的字型檔複製到 pChart 函式庫裏的 fonts/ 目錄下，跟預設的其他字型放在一起。

如果沒有購買中文字型，可以考慮 Open Source 的中文字型，詳情請參考此連結。

我是到 Google 下載中文字型(Google的下載連結)

下載後解壓縮，裏面有8個檔案，1個是授權說明，7個是字型檔，字型檔如下：
NotoSansCJKtc-Thin.otf
NotoSansCJKtc-Light.otf
NotoSansCJKtc-DemiLight.otf
NotoSansCJKtc-Medium.otf
NotoSansCJKtc-Regular.otf
NotoSansCJKtc-Bold.otf
NotoSansCJKtc-Black.otf
將這7個檔案複製到 fonts/ 目錄下，就可以在程式裏使用中文字型。

程式碼如下： 
// 指定圖形中使用的中文字型和字體大小(24)
$myPicture->setFontProperties(array("FontName"=>"fonts/NotoSansCJKtc-Regular.otf","FontSize"=>24));

字型範例：


相關連結：

張貼者： 於 2 則留言:
標籤： ,

pChart 的使用方法整理(二)簡單長條圖(Bar Chart)

另一種比較常用的圖是長條圖(Bar Chart)，下面以一個最簡單的長條圖為例



程式碼如下：

// 引用相關類別檔
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pData.class.php");

// 建立資料集物件
$myData = new pData();

// 在資料集中新增資料
// 設定縱座標(Y軸)的資列數列
$myData->addPoints(array(150,220,300,250,420));
// 設定縱座標(Y軸)的名稱
$myData->setAxisName(0,"Hits");
// 新增一筆資料數列，並命名為 Months
$myData->addPoints(array("January","February","March","April","May"),"Months");
// 將 Months 設定為橫座標
$myData->setAbscissa("Months");


// 建立一個圖形物件，設立它的尺寸及相關的資料集
$myPicture = new pImage(600,400,$myData);

// 指定圖形中使用的字型和字體大小
$myPicture->setFontProperties(array("FontName"=>"fonts/Forgotte.ttf","FontSize"=>12));

// 畫出圖表的外框
$myPicture->drawRectangle(0,0,599,399,array("R"=>0,"G"=>0,"B"=>0));

// 設定圖表在圖形中的位置
$myPicture->setGraphArea(60,40,550,360);

// 畫出刻度，刻度會由資料的大小自動決定
$myPicture->drawScale();

// 設定長條圖的相關設定，在這個例子中，是顯示數值
$settings = array("DisplayValues"=>TRUE);

// 畫出長條圖
$myPicture->drawBarChart($settings);

// 如果我們要將生成的 png 存檔，可以用以下的方式；如果只想單純顯示，此行可省略
$myPicture->render('example_02.png');

// 將圖形輸出到瀏覽器
$myPicture->autoOutput();

使用到這裏，你可能會發現沒辦法在圖表中使用中文字型，在下一篇文章中，我會整理如何在圖表中使用中文字型的方法。

相關連結：

張貼者： 於 沒有留言:
標籤： ,

2015年5月16日 星期六

pChart 的使用方法整理(一)簡單曲線圖


下載 pChart 函式庫

官方下載點

pChart 在 2014-01-19 發行了新的版本 pChart2.1.4，使用方式和之前的版本略有不同

我們以一張簡單的曲線圖為例



圖檔的尺寸為 800 x 300
折線圖的大小為 700 x 240，在圖形裏的位置： x1=60, y1=40, x2=760, y2=280

程式碼如下
// 引用相關類別檔
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pData.class.php");

// 建立資料集物件
$myData = new pData();

// 在資料集中新增資料
$myData->addPoints(array(1, 2, 1,3,4,3,5));

// 建立一個圖形物件，設立它的尺寸及相關的資料集
$myPicture = new pImage(800,300,$myData);

// 指定圖形中使用的字型和字體大小
$myPicture->setFontProperties(array("FontName"=>"fonts/Forgotte.ttf","FontSize"=>12));

// 設定圖表在圖形中的位置
$myPicture->setGraphArea(60,40,760,280);

// 畫出刻度，刻度會由資料的大小自動決定
$myPicture->drawScale();

// 畫出曲線圖
$myPicture->drawSplineChart();

// 如果我們要將生成的 png 存檔，可以用以下的方式；如果只想單純顯示，此行可省略
$myPicture->render('example_01.png');

// 將圖形輸出到瀏覽器
$myPicture->autoOutput();

這樣就可以產生一個簡單的曲線圖

參考資料：

1、pChart 官方網站
http://www.pchart.net/


相關連結：

張貼者： 於 沒有留言:
標籤： ,
訂閱： 意見 (Atom)