Android 雷达图（网状图）

最新推荐文章于 2024-08-18 10:23:32 发布
最新推荐文章于 2024-08-18 10:23:32 发布
阅读量4k 收藏 5
点赞数 3
分类专栏： android 文章标签： android 网状图 雷达图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014452224/article/details/50927056
版权

有的称为雷达图，也有的说是网状图具体什么图就是这图吧，先看效果
这里写图片描述
要想实现此图其实也不是很难，由于当时刚见到图的时候有点不知所措，因为不是简单的画圆，而是需要根据数据的大小进行在交叉的地方画点，而且所要画的点是有区域范围的，不同的区域显示的点的颜色是不同的，而且还要把这些点连接起来，当时就感觉有点蒙，不过还好还是做出来了
不扯了上代码

public class RadarView extends View {
    private int count = 8; // 数据个数
    private float angle = (float) (Math.PI * 2 / count);
    private float radius; // 网格最大半径
    private int centerX; // 中心X
    private int centerY; // 中心Y
    private String[] titles = { "旅游", "吃饭", "购物", "娱乐", "会友", "转账",
            "红包", "看病" };
    private double[] data = { 100, 60, 60, 60, 100, 50, 30, 70 }; // 各维度分值
    private String[] data1 = { "100", "60", "60", "60", "100", "50", "30",
            "70" }; // 各维度分值
    private float maxValue = 100; // 数据最大值
    private Paint mainPaint; // 雷达区画笔
    private Paint valuePaint; // 数据区画笔
    private Paint textPaint; // 文本画笔
    private float x1;
    private float y1;
    private float curR1;
    private float curR2;
    private float curR3;
    private float x2;
    private float y2;
    private float x3;
    private float y3;
    private int screenWidth;
    private int ten;
    private int twenty;
    private int thirty;
    private int forty;
    private int fifty;
    private int sixty;
    private int hun_2;
    public RadarView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public RadarView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RadarView(Context context) {
        super(context);
        init();
    }

    // 初始化
    private void init() {
        screenWidth = ScreenUtils.getScreenWidth(getContext());


        ten = (int) (0.0094*screenWidth);
        twenty = (int) (0.018*screenWidth);
        thirty = (int) (0.027*screenWidth);
        forty = (int) (0.036*screenWidth);
        fifty = (int) (0.045*screenWidth);
        sixty = (int) (0.054*screenWidth);
        hun_2 = (int) (0.18*screenWidth);
        count = Math.min(data.length, titles.length);

        mainPaint = new Paint();
        mainPaint.setAntiAlias(true);
        mainPaint.setColor(Color.parseColor("#6BD18E"));
        mainPaint.setStyle(Paint.Style.STROKE);

        valuePaint = new Paint();
        valuePaint.setAntiAlias(true);
        valuePaint.setColor(Color.parseColor("#00BF33"));
        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);

        textPaint = new Paint();
        textPaint.setTextSize(forty);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setColor(Color.BLACK);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        radius = Math.min(h, w) / 2 * 0.7f;
        centerX = w / 2;
        centerY = h / 2;
        postInvalidate();
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
        drawLines(canvas);
        drawText(canvas);
        drawRegion(canvas);
    }

    /**
     * 绘制圆
     */
    private void drawCircle(Canvas canvas) {
        Path path = new Path();
        float r = radius / (count - 1);
        for (int i = 3; i < count; i += 2) {
            float curR = r * i;
            curR1 = r * 3;
            curR2 = r * 5;
            curR3 = r * 7;
            for (int j = 1; j < count; j += 2) {
                if (j == 0) {
                    path.moveTo(centerX + curR, centerY);
                } 
            }
            canvas.drawCircle(centerX, centerX, curR, mainPaint);
        }
    }

    /**
     * 绘制直线
     */
    private void drawLines(Canvas canvas) {
        Path path = new Path();
        for (int i = 0; i < count; i++) {
            path.reset();
            path.moveTo(centerX, centerY);
            float x = (float) (centerX + radius * Math.cos(angle * i));
            float y = (float) (centerY + radius * Math.sin(angle * i));
            path.lineTo(x, y);
            canvas.drawPath(path, mainPaint);
        }
    }

    /**
     * 绘制文字
     * 
     * @param canvas
     */
    private void drawText(Canvas canvas) {

        Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
        float fontHeight = fontMetrics.descent - fontMetrics.ascent;
        for (int i = 0; i < count; i++) {
            float x = (float) (centerX + (radius + fontHeight / 2)
                    * Math.cos(angle * i));
            float y = (float) (centerY + (radius + fontHeight / 2)
                    * Math.sin(angle * i));
            x2 = (float) (centerX + (curR1 + fontHeight / 2)
                    * Math.cos(angle * i));
            y2 = (float) (centerY + (curR1 + fontHeight / 2)
                    * Math.sin(angle * i));
            x3 = (float) (centerX + (curR2 + fontHeight / 2)
                    * Math.cos(angle * i));
            y3 = (float) (centerY + (curR2 + fontHeight / 2)
                    * Math.sin(angle * i));
            x1 = (float) (centerX + (radius + fontHeight / 2)
                    * Math.cos(angle * i));
            y1 = (float) (centerY + (radius + fontHeight / 2)
                    * Math.sin(angle * i));
            float dis = textPaint.measureText(titles[i]);// 文本长度
            float datadis = valuePaint.measureText(data1[i]);// 文本长度
            if (angle * i >= 0 && angle * i <= Math.PI / 4) {
                canvas.drawText(data1[i], x1 - fifty, y1 + ten, textPaint);
                canvas.drawText(data1[i], x2 - forty, y2 + twenty, textPaint);
                canvas.drawText(data1[i], x3 - forty, y3 + twenty, textPaint);
                canvas.drawText(titles[i], x + thirty, y + ten, textPaint);
            } else if (angle * i >= Math.PI / 4 && angle * i <= Math.PI / 2) {
                canvas.drawText(data1[i], x2 - ten, y2 + ten, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + ten, textPaint);
                canvas.drawText(data1[i], x1 - fifty, y1, textPaint);
                canvas.drawText(titles[i], x + thirty, y + fifty, textPaint);
            } else if (angle * i >= Math.PI / 2 && angle * i <= Math.PI * 3 / 4) {
                canvas.drawText(data1[i], x2 - ten, y2 + ten, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + ten, textPaint);
                canvas.drawText(data1[i], x - twenty, y1 - twenty, textPaint);
                canvas.drawText(titles[i], x - dis / 2, y + sixty, textPaint);
            } else if (angle * i >= Math.PI * 3 / 4 && angle * i <= Math.PI) {
                canvas.drawText(data1[i], x2 - ten, y2 + ten, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + ten, textPaint);
                canvas.drawText(data1[i], x + ten, y1, textPaint);
                canvas.drawText(titles[i], x - hun_2, y + fifty, textPaint);
            } else if (angle * i >= Math.PI && angle * i <= Math.PI * 5 / 4) {
                canvas.drawText(data1[i], x2 - ten, y2 + ten, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + ten, textPaint);
                canvas.drawText(data1[i], x - ten, y1 + ten, textPaint);
                canvas.drawText(titles[i], x - dis - forty, y + ten, textPaint);
            } else if (angle * i >= Math.PI * 5 / 4
                    && angle * i <= Math.PI * 3 / 2) {
                canvas.drawText(data1[i], x2 - ten, y2 + ten, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + ten, textPaint);
                canvas.drawText(data1[i], x - ten, y1 + ten, textPaint);
                canvas.drawText(titles[i], x - dis - forty, y - fifty, textPaint);
            } else if (angle * i >= Math.PI * 3 / 2
                    && angle * i <= Math.PI * 7 / 4) {
                canvas.drawText(data1[i], x2 - ten, y2 + twenty, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + twenty, textPaint);
                canvas.drawText(data1[i], x - ten, y1 + forty, textPaint);
                canvas.drawText(titles[i], x - dis / 2, y - fifty, textPaint);
            } else if (angle * i >= Math.PI * 7 / 4 && angle * i <= Math.PI * 2) {
                canvas.drawText(data1[i], x2 - ten, y2 + twenty, textPaint);
                canvas.drawText(data1[i], x3 - ten, y3 + twenty, textPaint);
                canvas.drawText(data1[i], x - twenty, y1 + twenty, textPaint);
                canvas.drawText(titles[i], x + sixty, y - fifty, textPaint);
            }
        }
    }

    /**
     * 绘制区域
     * 
     * @param canvas
     */
    private void drawRegion(Canvas canvas) {
        Path path = new Path();
        valuePaint.setAlpha(255);
        for (int i = 0; i < count; i++) {
            double percent = data[i] / maxValue;
            float x = (float) (centerX + radius * Math.cos(angle * i) * percent);
            float y = (float) (centerY + radius * Math.sin(angle * i) * percent);
            if (i == 0) {
                path.moveTo(x, centerY);
            } else {
                path.lineTo(x, y);
            }

            double sx = Math.PI
                    * ((x - centerX) * (x - centerX) + (y - centerY)
                            * (y - centerY));
            double s1 = Math.PI * curR1 * curR1;
            double s2 = Math.PI * curR2 * curR2;
            double s3 = Math.PI * curR3 * curR3;
            if (0 < sx && sx <= s1) {
                valuePaint.setColor(Color.parseColor("#FF2022"));
                canvas.drawCircle(x, y, ten, valuePaint);
            }
            if (s1 < sx && sx <= s2) {
                valuePaint.setColor(Color.parseColor("#FFA10C"));
                canvas.drawCircle(x, y, ten, valuePaint);
            }
            if (s2 < sx && sx <= s3) {
                valuePaint.setColor(Color.parseColor("#00BF33"));
                canvas.drawCircle(x, y, ten, valuePaint);
            }
        }
        valuePaint.setColor(Color.parseColor("#00BF33"));
        valuePaint.setStyle(Paint.Style.STROKE);
        canvas.drawPath(path, valuePaint);
        valuePaint.setAlpha(127);
        // 绘制填充区域
        valuePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        canvas.drawPath(path, valuePaint);
    }

    // 设置标题
    public void setTitles(String[] titles) {
        this.titles = titles;
    }

    // 设置数值
    public void setData(double[] data) {
        this.data = data;
    }

    public float getMaxValue() {
        return maxValue;
    }

    // 设置最大数值
    public void setMaxValue(float maxValue) {
        this.maxValue = maxValue;
    }

    // 设置蜘蛛网颜色
    public void setMainPaintColor(int color) {
        mainPaint.setColor(color);
    }

    // 设置标题颜色
    public void setTextPaintColor(int color) {
        textPaint.setColor(color);
    }

    // 设置覆盖局域颜色
    public void setValuePaintColor(int color) {
        valuePaint.setColor(color);
    }
}

就是这么一个类花费我大半天时间，粘出来供大家参考，为大家节约一点时间。
如有疑问请加Android技术交流群 50208422或Android交流群 470707794进行技术交流探讨

Android开源经典项目
Tamic （大白）
09-13 5789
Android开源项目大全，包括经典个人博客，组织和开源项目
整理的Android资源代码 源码 整理 Github开源项目下载地址
源码分享的博客
11-02 9268
主要介绍那些不错个性化的View，捡代码论坛整理提供。包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。手机游戏源码,网站源码,棋牌游戏源码,IT视频教程,应用程序源码。整理的Android资源代码 源码 整理 Github开源项目下载地址
自定义view之网状图
villa_mou的博客
01-05 428
小牛试刀，花了一个小时写了个网状图，如下 绘制的思路分成三部 1，首先绘制三条连接的长的直线，代码如下 //画第一条竖线 canvas.drawLine(0f, -r, 0f, r, mPaintLineBg) val averageAngle = 360f / PART val y = (Math.sin(averageAngl
Android雷达图（蜘蛛网图）源码
09-22
需要在res/values/attrs.xml中添加以下 <declare-styleable name="MyNetPic"> <attr name="lineColor" format="color"/><!-- 线的颜色 --> <attr name="cotentColor" format="color"/><!-- 图形的颜色 --> <attr name="side" format="dimension"/> <!-- 三角形边长 --> <attr name="distance" format="dimens
探索RadarView：一款强大的Android雷达图库
最新发布
gitblog_00142的博客
08-18 413
探索RadarView：一款强大的Android雷达图库 项目地址:https://gitcode.com/gh_mirrors/ra/RadarChart 在移动应用开发的世界中，数据可视化是提升用户体验的关键。今天，我们将介绍一款名为RadarView的Android雷达图库，它以其高度的定制性和交互性，为开发者提供了一个强大的工具，以直观地展示复杂的数据关系。 项目介绍 RadarView是...
Android 雷达图
fengzhiqi1993的博客
06-10 679
类似个人属性的雷达图
安卓开发雷达图
m0_72495985的博客
10-13 627
String[] mActivities = new String[]{"商业模式", "核心壁垒", "团队结构", "运营管理", "盈利能力","成长能力"};
android 雷达图 蜘蛛图
罗小辉的专栏
05-13 8031
项目需要画一个蜘蛛图，补了下蛋疼的三角函数，效果图如图所示： 本文主要是提供画基础自定义view的思路，通过这种思路，从而实现复杂的自定义view，分为以下几个步骤：绘制正多边形/** * 绘制正多边形 */ private void drawPolygon(Canvas canvas) { Path path = new Path(); float r = r
自定义网状图
09-07
在IT领域，自定义图形控件是开发过程中的一项重要技能，尤其在数据分析和可视化中，网状图（也称为雷达图或蜘蛛网图）是一种非常有用的工具。它能有效地展示多维数据，使得用户可以一目了然地理解各项指标之间的相对...
Android资源代码 源码 整理 Github开源项目下载地址
wengsheng147的专栏
03-26 5719
第一部分 个性化控件(View) 主要介绍那些不错个性化的View，包括ListView、ActionBar、Menu、ViewPager、Gallery、GridView、ImageView、ProgressBar、TextView、ScrollView、TimeView、TipView、FlipView、ColorPickView、GraphView、UI Style等等。 一、L
android 雷达图
06-30
比较简易雷达图，练手作
XRadarView:高度可定制的Android雷达视图
05-08
XRadarView :bus: XRadarView is a "A highly customizable radar view for Android". XRadarView 是一个可高度自定义的雷达图控件。 Lastest Version: 更新日志 1.0.5 版本 更新内容 修复Issues 与material design冲突问题。 请注意此版本之后，边界线宽度使用boundaryWidth指定。 1.0.4版本 更新内容 支持圆形轮廓 支持区域颜色渐变 以上更新感谢 、 提出的 . 属性含义 XRadarView 支持高度自定义，其可调整属性及含义如下表所示。 属性 含义 count 几边形雷达 layerCount 几层蜘蛛网 drawableSize 图标的大小 drawablePadding 图标和文字间距 descPadding 标题描述与节点间距 titleSize 标
android图表雷达图控件使用实例
12-10
android图标库下雷达图控件的使用实例，github上的大神写的
2017 github 上android 源码（适合工作中开发）
snake_son的博客
12-30 1万+
转载： http://blog.csdn.NET/a774057695/article/details/49889437 https://github.com/XinRan5312/Android-open-project 目前包括：Android 开源项目第一篇——个性化控件(View)篇 包括ListView、ActionBar、Menu、ViewPager、Gallery、GridV
android自定义雷达图
oneblue123的博客
06-20 388
/** * 雷达view * @version 1.0 * @author DEV-81 */ public class RadarView extends View{ private int centerX; //中心X private int centerY; //中心Y private fl...
Android雷达图(蜘蛛网图)绘制
热门推荐
crazychen的专栏
12-03 3万+
简介最近因为项目需求，要实现一款雷达图来表示用户的各种成就值 雷达图的绘制很简单，只要思路清晰按部就班的绘制就可以了，其中使用得最多，是路径path类的使用，使用这个类可以让我们更加方便地绘制出正多边形等效果。 效果图如下： 使用方式使用方式很简单，只要在布局文件里面，直接使用这个控件就好了，记得给它设置一个合适的具体的大小。 另外可以控制绘制的是多少边形，通过提供的一些public方法，可
Android 自定义雷达图（蜘蛛网图）
LHavoc的博客
09-22 4839
这次自定义实现雷达图，它可以用在分析某些内容所占的比例，比较直观地突出某些数据，比如可以用在游戏玩家的各项能力的分析上，那么它的各项指标就比较明显地看出来了。效果图如下： 看完这幅图大家就清楚要实现的内容吧。下面来实现它。一、思路1、先画背景的正六边形。（1）可以看到每一部分三角形都是相同的，那么我们可以先画其中一部分的三角形，剩下的就重复操作就行了。 就是上面红色的三角形部分（画的有的
Android蜘蛛网图/雷达图
程序猿的玻璃心的专栏
10-27 889
直接上图 上一篇博客里本来想记录些基础知识，后来图画出来了，想想就算了，直接把东西贴出来，各位自己去看。 东西很简单的。 先定义继承View的类，以及实现类public class SpiderView extends View { public SpiderView(Context context) { super(context); init()
Android 自定义RadarView：雷达图实现详解
"Android雷达图（蜘蛛网图）的实现代码" 在Android开发中，有时候我们需要展示多维数据，这时雷达图（又称蜘蛛网图）是一个很好的选择。本篇文章将介绍如何在Android平台上实现自定义的RadarView，用于绘制雷达图。...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值