需求 :由於工作需要,需要在一張背景圖上添加這一張雷達圖,之后圖片可以在微信中長按保存。所以說我必須生成一張帶有雷達圖的圖片
第一反應是用百度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庫 要不調試起來會很痛苦。