Android自定义View实现雷达统计图

已于 2023-03-21 11:25:15 修改
阅读量356 收藏
点赞数
分类专栏： Android代码块总结 文章标签： android
于 2022-12-30 00:07:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41008818/article/details/128489608
版权
效果展示

在这里插入图片描述

代码实现
package com.soface.chartdemo.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.Nullable;

import java.util.List;

public class RadarChartView2 extends View {

    public RadarChartView2(Context context) {
        this(context,null);
    }

    public RadarChartView2(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public RadarChartView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    private int widthMode;
    private int heightMode;
    private int widthSize;
    private int heightSize;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        widthMode = MeasureSpec.getMode(widthMeasureSpec);
        heightMode = MeasureSpec.getMode(heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec);
        heightSize = MeasureSpec.getSize(heightMeasureSpec);

        intiConstant();

        initPaint();
    }

    private float RADIUS =0;
    private float cX=0;
    private float cY=0;
    private float LADDER=5;//阶梯数
    private float DATA_MAX=100;//数据最大值
    private void intiConstant() {
        if (widthSize>heightSize){
            RADIUS =heightSize/2f-20;
        }else {
            RADIUS =widthSize/2f-20;
        }
        cX=widthSize/2f;
        cY=heightSize/2f;
    }

    private Paint linePaint1;
    private Paint textPaint;
    private Paint dataPaint;
    private void initPaint() {
        linePaint1 =new Paint();
        linePaint1 .setAntiAlias(true);//消除锯齿
        linePaint1.setColor(Color.parseColor("#8F8F8F"));
        linePaint1.setStyle(Paint.Style.STROKE);//不加这个不显示
        linePaint1.setStrokeWidth(2);
        linePaint1.setAntiAlias(true);//抗锯齿功能
        PathEffect effects = new DashPathEffect(new float[]{5, 10}, 0);//设置绘制虚线
        linePaint1.setPathEffect(effects);

        textPaint =new Paint();
        textPaint .setAntiAlias(true);//消除锯齿
        textPaint.setColor(Color.parseColor("#393939"));
        textPaint.setTextSize(30);
        linePaint1.setStrokeWidth(2);

        dataPaint =new Paint();
        dataPaint .setAntiAlias(true);//消除锯齿
        dataPaint.setColor(Color.parseColor("#03A9F4"));
        dataPaint.setStyle(Paint.Style.STROKE);//不加这个不显示
        dataPaint.setStrokeWidth(4);
        dataPaint.setAntiAlias(true);//抗锯齿功能
        dataPaint.setStyle(Paint.Style.FILL_AND_STROKE); //设置绘图模式 扫描 FILL_AND_STROKE
        dataPaint.setStrokeJoin(Paint.Join.ROUND); //设置线条闭合模式 MITER
    }

    private List<Integer> dataList;
    public void setData(List<Integer> list){
        dataList=list;
        postInvalidate();
    }

    private List<String> functionsList;
    private String unit="";//单位
    public void setFunction(List<String> list,String unit){
        functionsList=list;
        this.unit=unit;
        postInvalidate();
    }

    private float onceAngle=0;
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (functionsList==null || functionsList.size()==0)return;
        if (dataList==null || dataList.size()==0)return;
        if (dataList.size() != functionsList.size())return;

        float functionsSize=functionsList.size();
        onceAngle=360/functionsSize;

        for (int k=0;k<functionsList.size();k++){
            //绘制角度分割线
            float lineEndX = cX + RADIUS * (float) Math.cos((k*onceAngle) / 180 * Math.PI);
            float lineEndY = cY + RADIUS * (float) Math.sin((k*onceAngle) / 180 * Math.PI);
            canvas.drawLine(cX,cY,lineEndX,lineEndY,linePaint1);

            //绘制功能项名称
            if (lineEndX>cX){
                //在圆心右侧
                textPaint.setColor(Color.parseColor("#393939"));
                canvas.drawText(functionsList.get(k),lineEndX+40,lineEndY,textPaint);
            }else {
                //在圆心左侧
                textPaint.setColor(Color.parseColor("#393939"));
                canvas.drawText(functionsList.get(k),lineEndX-80,lineEndY,textPaint);
            }

        }

        float onceLadderRadius=RADIUS/LADDER;
        int ladderData= (int) (DATA_MAX/LADDER);
        for (int k=0;k<LADDER;k++){

            //绘制刻度
            float textX = cX + (onceLadderRadius*k) * (float) Math.cos((0) / 180 * Math.PI);
            float textY = cY + (onceLadderRadius*k) * (float) Math.sin((0) / 180 * Math.PI);
            if (k==LADDER-1){
                textPaint.setColor(Color.parseColor("#FF5722"));
                canvas.drawText(ladderData*k+"("+unit+")",textX,textY,textPaint);
            }else {
                textPaint.setColor(Color.parseColor("#FF5722"));
                canvas.drawText(ladderData*k+"",textX,textY,textPaint);
            }
        }

        for (int k=0;k<LADDER;k++){

            if (k==0)linePaint1.setColor(Color.parseColor("#FF5722"));
            if (k==1)linePaint1.setColor(Color.parseColor("#FF9800"));
            if (k==2)linePaint1.setColor(Color.parseColor("#CDDC39"));
            if (k==3)linePaint1.setColor(Color.parseColor("#4CAF50"));
            if (k==4)linePaint1.setColor(Color.parseColor("#03A9F4"));
            if (k>=5)linePaint1.setColor(Color.parseColor("#8F8F8F"));

            for (int a=0;a<functionsList.size();a++){

                float startX=cX + (onceLadderRadius*k) * (float) Math.cos((a*onceAngle) / 180 * Math.PI);
                float startY=cY + (onceLadderRadius*k) * (float) Math.sin((a*onceAngle) / 180 * Math.PI);

                float endX=cX + (onceLadderRadius*k) * (float) Math.cos(((a+1)*onceAngle) / 180 * Math.PI);
                float endY=cY + (onceLadderRadius*k) * (float) Math.sin(((a+1)*onceAngle) / 180 * Math.PI);

                Path path=new Path();
                path.moveTo(startX,startY);
                path.lineTo(endX,endY);
                //画线连接下一个点
                canvas.drawPath(path,linePaint1);

            }

        }

        //======================绘制数据=============================================================
        float dataStep=RADIUS/DATA_MAX;
        for (int k=0;k<dataList.size();k++){

            if (k!=dataList.size()-1){
                float startX = cX + (dataStep*dataList.get(k)) * (float) Math.cos((k*onceAngle) / 180 * Math.PI);
                float startY = cY + (dataStep*dataList.get(k)) * (float) Math.sin((k*onceAngle) / 180 * Math.PI);

                float endX = cX + (dataStep*dataList.get(k+1)) * (float) Math.cos(((k+1)*onceAngle) / 180 * Math.PI);
                float endY = cY + (dataStep*dataList.get(k+1)) * (float) Math.sin(((k+1)*onceAngle) / 180 * Math.PI);

                Path path=new Path();
                path.moveTo(startX,startY);
                path.lineTo(endX,endY);
                //画线连接下一个点
                canvas.drawPath(path,dataPaint);

                //画一个点
                canvas.drawCircle(startX,startY,6,dataPaint);
            }else {
                //最后一次画回原点
                float startX = cX + (dataStep*dataList.get(k)) * (float) Math.cos((k*onceAngle) / 180 * Math.PI);
                float startY = cY + (dataStep*dataList.get(k)) * (float) Math.sin((k*onceAngle) / 180 * Math.PI);

                float endX = cX + (dataStep*dataList.get(0)) * (float) Math.cos((0*onceAngle) / 180 * Math.PI);
                float endY = cY + (dataStep*dataList.get(0)) * (float) Math.sin((0*onceAngle) / 180 * Math.PI);

                Path path=new Path();
                path.moveTo(startX,startY);
                path.lineTo(endX,endY);
                //画线连接下一个点
                canvas.drawPath(path,dataPaint);

                //画一个点
                canvas.drawCircle(startX,startY,6,dataPaint);
            }


        }

    }
}
使用方法
  1. 在xml中引用
<com.soface.chartdemo.view.RadarChartView2
                android:id="@+id/radar2"
                android:layout_margin="20px"
                android:layout_width="match_parent"
                android:layout_height="600px"/>
  1. 注入数据
private List<Integer> radarDatas2;
    private RadarChartView2 radar2;
    private void initRadarChart2() {
        radarDatas2=new ArrayList<>();
        radarDatas2.add(60);
        radarDatas2.add(40);
        radarDatas2.add(85);
        radarDatas2.add(50);
        radarDatas2.add(70);
        radarDatas2.add(30);
        radarDatas2.add(40);

        List<String> radarFunctions=new ArrayList<>();
        radarFunctions.add("齐国");
        radarFunctions.add("楚国");
        radarFunctions.add("秦国");
        radarFunctions.add("燕国");
        radarFunctions.add("赵国");
        radarFunctions.add("魏国");
        radarFunctions.add("韩国");

        radar2=(RadarChartView2) findViewById(R.id.radar2);
        radar2.setData(radarDatas2);
        radar2.setFunction(radarFunctions,"万");

        doRadarChart2();
    }
    private void doRadarChart2() {

        for (int a=0;a<radarDatas2.size();a++){
            new BarHeartbeat().start(30, a, radarDatas2.get(a), new ActionCallback() {
                @Override
                public void toDo(Object o) {
                    List<Integer> list= (List<Integer>) o;
                    radarDatas2.set(list.get(0),list.get(1));
                    radar2.setData(radarDatas2);
                }
            });
        }

    }

辅助类

package com.soface.chartdemo.util;

import android.os.Looper;
import android.os.Message;

import com.soface.chartdemo.Interface.ActionCallback;

import java.util.ArrayList;
import java.util.List;

/**
 * 心跳计时器
 */
public class BarHeartbeat {

    //事件标签
    public final int ACTION_TAG =0xFF;
    //要回调的接口
    private ActionCallback thisActionDo;

    //Handler事件监听器
    private android.os.Handler mHandler = new android.os.Handler(Looper.getMainLooper()){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case ACTION_TAG:
                    List<Integer> list= (List<Integer>) msg.obj;
                    thisActionDo.toDo(list);
                    break;
            }

        }
    };

    //启动
    public void start(int countDownTime,int index,int maxNumber,ActionCallback actionDo){

        thisActionDo=actionDo;

        for (int a=0;a<=maxNumber;a++){
            Message msg = mHandler.obtainMessage();
            msg.what = ACTION_TAG;

            List<Integer> list=new ArrayList<>();
            list.add(index);
            list.add(a);

            msg.obj=list;

            mHandler.sendMessageDelayed(msg,countDownTime*a);
        }
    };

}
绝命三郎
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
MPAndroidChart让（折线图、柱形图、饼状图、散列图、雷达图）优雅的舞动
11-30
Android之玩转MPAndroidChart让（折线图、柱形图、饼状图、散列图、雷达图）优雅的舞动
Android 一步步实现曲线图、折线图、柱状图、雷达图，动态心跳图
资深全栈开发工程师
09-07 1万+
本文介绍基于安卓开源图表MPandroidChart实现后台自动绘制二维曲线MPandroidChart效果图，其他开源图表项目，支持高度定制化的图表，例如柱状图的颜色，线条、高低、宽窄、背景颜色、X轴、Y轴的自定义开发，还包括实现点击任意位置显示标签，标签内容可定制数据单位
Android-MPAndroidChart：RadarChart（雷达蜘蛛图）绘制圆点
最新发布
2401_84903885的博客
05-11 648
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Android自定义View实现雷达图（圆）
qq_41008818的博客
12-29 756
Android自定义View实现雷达图（圆）
android 自定义view: 蛛网/雷达图(三)
高级开发者进阶ing... QaQ
09-27 1170
本系列自定义View全部采用ktmac4.1.31.5.0本篇效果:蛛网图其实就是由多个多边形来组成蛛网的,那么先来画1个多边形来练练手。
安卓开发雷达图
m0_72495985的博客
10-13 601
String[] mActivities = new String[]{"商业模式", "核心壁垒", "团队结构", "运营管理", "盈利能力","成长能力"};
Android自定义View实现多边形统计图示例代码
08-28
本文将深入探讨如何使用Android自定义View来实现一个多边形统计图，这种图形通常用于数据可视化，展示不同数据点的相对大小或比例。 首先，自定义View的实现通常涉及到重写`onDraw()`方法，这是Android系统绘制View...
Android自定义View实现公交成轨迹图
08-25
Android自定义View实现公交成轨迹图 Android自定义View实现公交成轨迹图是Android开发中的一种常见需求，特别是在交通类应用程序中。通过自定义View，可以实现复杂的轨迹图，提高应用程序的用户体验。 一、Android...
Android 使用Kotlin来实现自定义View之雷达图
07-28
本篇文章将深入探讨如何使用Kotlin语言在Android平台上实现一个自定义的雷达图（Radar Chart）。雷达图是一种多轴图表，通常用于展示多个变量之间的相对表现，或者在多个维度上比较数据。 首先，我们需要了解Kotlin...
Android自定义View——扇形统计图的实现代码
08-31
通过以上步骤，我们就可以在Android应用中创建一个自定义的扇形统计图View，动态展示数据分布情况。这种自定义组件在数据可视化的场景中非常实用，可以灵活地适应各种需求，提供直观的用户界面。
MPAndroidChart的详细使用——RadarChart雷达图（一）
chuyouyinghe的专栏
03-02 1090
今天来记录一下RadarChart（雷达图）的简单使用！ 注：本人使用的版本是MPAndroidChart-v3.0.3（如若版本不同有某些方法更新，可在评论区留言，尽我所能帮你解决！） MPAndroidChart的详细使用——LineChart折线图（一）（简单使用）MPAndroidChart的详细使用——LineChart折线图（二）（详细美化）MPAndroidChart的详细使用——BarChart条形图（一）（简单使用）MPAndroidChart的详细使用——BarChart条形图（二）
android图表雷达图控件使用实例
12-10
android图标库下雷达图控件的使用实例，github上的大神写的
Android代码-一款可以自由定制外观、手势旋转的android雷达图表lib
08-08
RadarView 一个可以自由定制、旋转交互的Android雷达图Lib 一些特性 支持手势旋转（可关闭） 支持动画的方式添加展现数据 支持对各层雷达网添加背景 支持自定义雷达网层数 支持使用圆形作为雷达网 扇区（顶点）个数无限制 顶点描述支持图文混排 支持添加多组数据 数据区支持设置值的描述文字 所有的文字、雷达网、线、数据区颜色和大小均可定制 how to use: 1. gradle     compile 'q.rorbin:RadarView:1.0.4' VERSION_CODE : here 2. xml     3. 属性说明 xml code 说明 app:radar_layer setLayer 雷达网层数 app:rotation_enable setRotationEnable 是否打开手势旋转 app:web_mode setWebMode 雷达网模式(多边形、圆形...) app:max_value setMaxValue 最外圈的值 app:vertex_line_
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项目源码芝麻信用分快递综合评价雷达图.zip
07-10
安卓雷达图，类似支付宝芝麻分解读，淘宝快递的综合对比图，王者荣耀对战资料图，各种信用评分图示等多边形图表效果。
Android自定义View 多边形能力分析控件，雷达图（蛛网）动态实现
tg_0804的博客
03-13 1800
自定义View实现雷达图还是挺简单的，它能让使用让使用者能一目了然的了解各项指标的变动情形以及好坏趋势。使用得最多的便是Path路径，很适合初学者用来练习。 效果图如下： 下面是实体类的属性： public class RadarMapData { private int count;//数值项数 private String [] titles;//...
android 自定义雷达图,Android自定义蛛网图（雷达图）
weixin_39939661的博客
05-25 223
前言纸上得来终觉浅，绝知此事要躬行。直接上代码import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.ann...
Android雷达图(蜘蛛网图)绘制
热门推荐
crazychen的专栏
12-03 3万+
简介最近因为项目需求，要实现一款雷达图来表示用户的各种成就值 雷达图的绘制很简单，只要思路清晰按部就班的绘制就可以了，其中使用得最多，是路径path类的使用，使用这个类可以让我们更加方便地绘制出正多边形等效果。 效果图如下： 使用方式使用方式很简单，只要在布局文件里面，直接使用这个控件就好了，记得给它设置一个合适的具体的大小。 另外可以控制绘制的是多少边形，通过提供的一些public方法，可
Android使用canvas绘制动效雷达图和柱状图
qq_41145352的博客
06-13 982
1.雷达图思路：定义半径来确定各个点的坐标，先绘制虚线背景再绘制两个覆盖区域。通过改变半径值刷新canvas形成动画，也可以加入其它插值。import android.animation.ValueAnimator; import android.content.Context; import android.graphics.Canvas; import android.graphics.Col...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

绝命三郎

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值