用pChart生成雷達圖圖片
阿新 • • 發佈：2019-02-07
需求 ：由於工作需要，需要在一張背景圖上新增這一張雷達圖，之後圖片可以在微信中長按儲存。所以說我必須生成一張帶有雷達圖的圖片
第一反應是用百度echars雷達圖做動態顯示，之後截圖。考慮到工作量和效率，放棄。
改為pchart 直接生成雷達圖圖片 然後用imagick拓展貼到背景圖上面。由於imagick攻略比較詳細，這裡不做贅述，而pchart中文文件則比較匱乏，所以簡略介紹下。
第一步 在pchart官網下載類庫 http://www.pchart.net/download 建議在本地環境除錯,因為你需要大量的操作去除錯點線的顏色外形。
下一個zip的包就可以了 一般的解壓工具就可以解壓縮 重點關注三個資料夾 class example fonts
1 . class目錄為生成雷達圖類庫 包含資料處理類 畫圖類等 因為需求對顏色樣式要求很高 所以大概做了一些瞭解。如果只是簡單要一張雷達圖可不做了解。
pData.class.php=>處理資料 轉化為點線圖形 色值需要設定(必須)
pDraw.class.php=>畫圖類(必須)
pImage.class.php=>圖片處理類(必須)
pRadar.class.php=>雷達圖類(必須)
其他為非必須引入 當然如果嫌麻煩可以不用管他們是幹什麼用的 全扔專案裡就好
2. fonts目錄為字型資源目錄
3. example 示例目錄
工具包內有index檔案，在php環境下開啟資料夾，會自動生成圖形介面這還是比較人性化的一個設計。
如果只是要一個二維座標軸 name直接用sandbox直接除錯想要的圖形就好了 這是一個除錯工具。二維的圖基本都可以出來
回來說我們的 雷達圖 在目錄下找到一個跟需求類似的雷達圖
然後根據名稱找到對應去 example目錄下找到對應的檔案 複製一份到上層目錄下新建一個自己的目錄 myexample下 根據直接本地訪問除錯就好了 大部分需要用到的註釋在指令碼中註釋了
效果：基本每個部分都可除錯
<?php /** * Created by PhpStorm. * User: zhangxd * Date: 2018/2/9 * Time: 15:20 */ include ("../class/pData.class.php"); include ("../class/pDraw.class.php"); include ("../class/pImage.class.php"); include ("../class/pRadar.class.php"); $one_data = array(1,5,10,20,30); drow_love_radar($one_data); function drow_love_radar($one_data, $file_name='radar.png', $type='auto'){ /* 設定顏色 */ $MyData = new pData(); $MyData->addPoints($one_data, "score"); //設定字型描述 //$MyData->setSerieDescription("ScoreB", "Coverage B"); //設定資料線顏色（此處為紅綠藍三元素調色 alpha為透明度） $data = array("R"=>30,"G"=>220,"B"=>245,"Alpha"=>100); $MyData->setPalette('score',$data); /* 設立資料名稱 此處設定為空 不做顯示名稱 但是佔位*/ $MyData->addPoints(array("", "", "", "", ""), "score_name"); $MyData->setAbscissa("score_name"); /* 建立畫布設定大小 */ $myPicture = new pImage(800, 800, $MyData); //$myPicture = new pImage(212, 213, $MyData); /* 畫一個背景蒙版 */ $Settings = array("R" => 255, "G" => 151, "B" => 178,"Alpha" => 100); //$myPicture->drawFilledRectangle(0, 0, 700, 230, $Settings); //根據起點和重點設定背景圖大小 $myPicture->drawFilledRectangle(100, 100, 600, 600, $Settings); /* 設定預設的字型屬性 */ $myPicture->setFontProperties(array("FontName" => "../fonts/Forgotte.ttf", "FontSize" => 10, "R" => 80, "G" => 80, "B" => 80)); /*在資料區域 新增填充顏色(為圖新增陰影)*/ // $myPicture->setShadow(TRUE, array("X" => 1, "Y" => 1, "R" => 250, "G" => 255, "B" => 250, "Alpha" => 50)); //$myPicture->setShadow(TRUE, array("X" => 1, "Y" => 1, "R" => 49, "G" => 221, "B" => 243, "Alpha" => 100)); /* Create the pRadar object */ $SplitChart = new pRadar(); //根據起點和重點設定雷達圖大小 $myPicture->setGraphArea(200, 200, 500, 500); $Options = array( //座標軸顏色 'AxisR'=>255, 'AxisG'=>0, 'AxisB'=>0, 'AxisAlpha'=>100, "AxisRotation" => -17, //圖形旋轉角度 "DrawPoly" => TRUE, //區域陰影 需要呼叫setShadow方法設定陰影顏色 // "PolyAlpha" => 100, //區域陰影 透明度 'DrawAxisValues' => false, //畫座標軸的值 奇醜 'WriteValues'=>false, //在座標軸頂點標註數值 'WriteValuesInBubble'=>true, //在頂點氣泡中標註 'ValuePadding'=>1, //在頂點氣泡中標註 大小 'OuterBubbleRadius'=>0, //頂點氣泡顏色 //設定漸變顏色 從裡圈到外圈 "BackgroundGradient" => array("StartR" => 255, "StartG" => 151, "StartB" => 178, "StartAlpha" => 100, "EndR" => 255, "EndG" => 255, "EndB" => 255, "EndAlpha" => 100), 'Layout'=>690011,//690011=>尖角雷達圖 690012=>圓角雷達圖 'SegmentHeight'=> 5,//設定每個座標格大小 'Segments'=> 3, //設定雷達圖顯示幾個座標格 'LabelMiddle'=>true, //標籤的一些東西 死醜死醜的 反正我沒用 'LabelsBackground'=>true, 'LabelsBGR'=>255, 'LabelsBGG'=>255, 'LabelsBGB'=>255, 'LabelsBGAlpha'=>100, "LabelPos" => RADAR_LABELS_HORIZONTAL, 'LabelPadding'=>10,//標籤距離 'DrawPoints'=>TRUE,//畫座標頂點的小圓點 'PointRadius'=>5,//座標頂點的小圓點大小 'PointSurrounding'=>500, 'DrawLines'=>true,//畫座標點連線線(首尾點不連線 適用於xy座標軸) 'LineLoopStart'=>true,//連結首尾的點 "FontName" => "../fonts/pf_arma_five.ttf",//字型檔案 "FontSize" => 6,//字型大小 /*下面的除錯無結果*/ //設定外 氣泡顏色 'OuterBubbleR'=>1, 'OuterBubbleG'=>1, 'OuterBubbleB'=>1, 'OuterBubbleAlpha'=>100, //設定內 氣泡顏色 'InnerBubbleR'=>1, 'InnerBubbleG'=>1, 'InnerBubbleB'=>1, 'InnerBubbleAlpha'=>100, //設定背景色 'DrawBackground'=>true, 'BackgroundR'=>255, 'BackgroundG'=>255, 'BackgroundB'=>255, 'BackgroundAlpha'=>100, ); $SplitChart->drawRadar($myPicture, $MyData, $Options); switch ($type){ case 'auto': //根據輸出環境操作 在命令模式下儲存 $myPicture->autoOutput($file_name); break; case 'out': $myPicture->stroke(); break; case 'save': $myPicture->Render($file_name); break; } }
友情提示：最好熟悉一下dg庫 要不除錯起來會很痛苦。
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
pChart是一個開源的圖表生成庫，主要涉及3個Class：pChart.class, pData.class, pCache.class，可生成20多種簡單或複雜的圖表，支援PNG，JPG，GIF通用圖片格式。資料來源可以來自於Database，CSV，當然也可以手寫。使用該程式PHP需要開啟GD服務，先來看看pChart的工作流程：
主要分為三步：
- * 讀取用於生成圖表資料（資料庫、檔案）
- * 設計圖表樣式（圓角、底色等）
- * 製作標籤、題目、圖例並生成圖表
下面看一個簡單的柱狀圖表：
程式碼如下：
<?php
// Standard inclusions
include("pChart/pData.class");
include("pChart/pChart.class");
// Dataset definition
$DataSet = new pData;
//圖表資料
$DataSet->AddPoint(array(1,4,-3,2,-3,3,2,1,0,7,4),"Serie1");
$DataSet->AddPoint(array(3,3,-4,1,-2,2,1,0,-1,6,3),"Serie2");
$DataSet->AddPoint(array(4,1,2,-1,-4,-2,3,2,1,2,2),"Serie3");
$DataSet->AddAllSeries();
$DataSet->SetAbsciseLabelSerie();
//資料圖例
$DataSet->SetSerieName("Microsoft","Serie1");
$DataSet->SetSerieName("IBM","Serie2");
$DataSet->SetSerieName("Google","Serie3");
// Initialise the graph
$Test = new pChart(700,230);
//設定圖表尺寸、樣式
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->setGraphArea(50,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,223,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,225,5,230,230,230);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);
// Draw the 0 line
$Test->setFontProperties("Fonts/MankSans.ttf",6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);
// Draw the bar graph
//柱狀圖要使用drawBarGraph()
$Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription(),TRUE,80);
// Finish the graph
//製作圖例、標題、字型等屬性
$Test->setFontProperties("Fonts/MankSans.ttf",10);
$Test->drawLegend(596,150,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties("Fonts/MankSans.ttf",10);
$Test->drawTitle(50,22,"Example",50,50,50,585);
//生成圖表
$imageFile = "example12.png";
$Test->Render($imageFile);
echo '<img src="'.$imageFile.'">';
?>
這個是雷達效果的：
程式碼：
<?php
// Standard inclusions
include("pChart/pData.class");
include("pChart/pChart.class");
// Dataset definition
$DataSet = new pData;
$DataSet->AddPoint(array("Memory","Disk","Network","Slots","CPU"),"Label");
$DataSet->AddPoint(array(6,4,7,4,5),"Serie1");
$DataSet->AddPoint(array(2,3,5,2,4),"Serie2");
$DataSet->AddSerie("Serie1");
$DataSet->AddSerie("Serie2");
$DataSet->SetAbsciseLabelSerie("Label");
$DataSet->SetSerieName("Reference","Serie1");
$DataSet->SetSerieName("Tested computer","Serie2");
// Initialise the graph
$Test = new pChart(400,400);
$Test->setFontProperties("Fonts/tahoma.ttf",8);
$Test->drawFilledRoundedRectangle(7,7,393,393,5,240,240,240);
$Test->drawRoundedRectangle(5,5,395,395,5,230,230,230);
$Test->setGraphArea(30,30,370,370);
$Test->drawFilledRoundedRectangle(30,30,370,370,5,255,255,255);
$Test->drawRoundedRectangle(30,30,370,370,5,220,220,220);
// Draw the radar graph
//要使用drawRadarAxis()生成雷達效果
$Test->drawRadarAxis($DataSet->GetData(),$DataSet->GetDataDescription(),TRUE,20,120,120,120,230,230,230);
$Test->drawFilledRadar($DataSet->GetData(),$DataSet->GetDataDescription(),50,20);
// Finish the graph
$Test->drawLegend(15,15,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties("Fonts/tahoma.ttf",10);
$Test->drawTitle(0,22,"Example",50,50,50,400);
$imageFile = "example8.png";
$Test->Render($imageFile);
echo '<img src="'.$imageFile.'">';
?>
再看幾個其他的效果
1，餅圖：
2, 雙座標曲線圖：
3, 層疊柱狀圖：
4, 多圖表：
