用pChart生成雷达图图片

需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存。所以说我必须生成一张带有雷达图的图片
第一反应是用百度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库 要不调试起来会很痛苦。

原文地址:https://www.cnblogs.com/haizizhu/p/8442524.html

时间: 2024-10-10 05:10:54

用pChart生成雷达图图片的相关文章

echar生成雷达图

function createRadarChart(indicatorData, personData) { var myChart = echarts.init(document.getElementById('fl2Grid')); var option = { legend: {//图例设置 data: [{ name: personData[0].name, icon: 'rect' }, { name: personData[1].name, icon: 'rect' }],//名字和

在Unity中使用uGUI绘制自定义图形(饼状图 雷达图)

饼状图或者是雷达图是根据属性自动生成的自定义图形.这里展示了如何使用uGUI完成这一功能. 先附上我制作雷达图的控件的代码  UIPropWidget.cs using UnityEngine; using System.Collections.Generic; using UnityEngine.UI; /* * * 2 6 * * 3 7 * * 0 1 5 4 * * * 2 6位为属性0 3为属性1 0为属性2 4为属性3 7为属性4 */ public class UIPropWidg

用Enterprise Architect从源码自动生成类图

http://blog.csdn.net/zhouyong0/article/details/8281192 /*references:感谢资源分享者.info:简单记录如何通过工具从源码生成类图,便于分析代码结构,对源码阅读挺有用.*/ 看点开源代码学习下,本想找个代码查看方便点的工具,便于理清代码层次,结果发现了Enterprise Architect这一好工具,试用下来还挺方便的.功能上和Rational Rose大致是一类,用处很广,很多我都不懂,知道能画各种UML图,支持的源码语言类型

Nginx+PHP实时生成不同尺寸图片

原来图片服务器采用Windows .net架构,鉴于需求需要生成各种尺寸图片. 流程说明: 用户从Nginx请求对应的图片,判断是否存在_200x300的对应参数,如果没有就直接请求到对应目录的原图,否则继续判断是否在本地已经生成了对应的缓存图片,如果存在返回已经生成过的定制尺寸图片,否则请求PHP动态生成. Nginx部分配置:     server {         listen       80;         server_name  pics.abc.com;         lo

Asp.net mvc 实时生成缩率图到硬盘

之前对于缩率图的处理是在图片上传到服务器之后,同步生成两张不同尺寸的缩率供前端调用,刚开始还能满足需求,慢慢的随着前端展示的多样化,缩率图已不能前端展示的需求,所以考虑做一个实时生成图片缩率图服务. 每次调用实时生成缩率图,不缓存着实有点浪费,所以在生成缩率的同时缓存到硬盘一份,效率提高很多. 之前从网上看了一下有人用nginx + lua实现的,效率那是没什么可说的,但是时间紧迫,自己也没时间去研究,所以暂时先用aps.net mvc4来实现 一个,以后有时间了,再慢慢修改. 用自己熟悉的.n

雷达图

该雷达图是依赖于Echarts框架的. 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></scr

WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表

原文:WPF自定义控件与样式(12)-缩略图ThumbnailImage /gif动画图/图片列表 一.前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要针对WPF项目开发中图片的各种使用问题,经过总结,把一些经验分享一下.内容包括: WPF常用图像数据源ImageSource的创建: 自定义缩略图控件ThumbnailImage,支持网络图片.大图片.图片异步加载

Android自定义控件 芝麻信用分雷达图

本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 1.介绍 首先看下支付宝上芝麻信用分的效果图: 2.思路 确定雷达图中心点坐标 绘制多边形及连接线 根据维度值绘制覆盖区域 绘制分数 绘制每个维度的标题文字和图标 3.实现 获取布局的中心坐标 在onSizeChanged(int w, int h, int oldw, int oldh)方法里面,根据View的长宽,计算出雷达图的半径(这里取布局宽高最小值的四分之一,可以自定义),获取整个布局的中心坐标.

python批量制作雷达图

老板要画雷达图,但是数据好多组怎么办?不能一个一个点excel去画吧,那么可以利用python进行批量制作,得到样式如下: 首先制作一个演示的excel,评分为excel随机数生成: 1 =INT((RAND()+4)*10)/10 加入标签等得到的excel样式如下(部分,共计32行): 那么接下来就是打开python写码了,本文是基于python3.4进行编写 1 wb = load_workbook(filename=r'C:\Users\Administrator\Desktop\数据指