Android 进阶自定义View（5）图表统计PieChartView圆饼图的实现

最新推荐文章于 2024-05-19 11:39:42 发布
最新推荐文章于 2024-05-19 11:39:42 发布
阅读量702 收藏
点赞数
文章标签： 移动开发 java
原文链接：https://yq.aliyun.com/articles/638335
版权

今天讲图表统计中比较常用的一个，像支付宝的月账单啥的，都是用圆饼图来做数据统计的，先看一下我最终实现的效果图：


img_8f754f5a153c8522f1cd39807ed2507d.png
image.png

该效果实际上是两个实心圆叠加后的效果。


img_7dee33498c6a5e201b5ea1826bbc88e2.png
image.png
img_c681ec9c84b2ba4e491f3ee3c8fdce1c.png
image.png
《一》View实现思路分析：

（1）根据占比集合数据，计算所需绘制的角度，动态设置画笔颜色，drawArc()绘制外圆弧
（2）drawCircle()绘制内圆
（3）确定每块圆饼的小白点的位置
（4）绘制白点的沿线和占比文字

《二》具体实现：

（1）绘制不同颜色的圆饼

   for (int i = 0; i < mRateList.size(); i++) {
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mColorList.get(i));
//            Log.e("TAG", "startAngle=" + startAngle + "--sweepAngle=" + ((int) (mRateList.get(i) * (360)) - offset));
            canvas.drawArc(rectF, startAngle, (int) (mRateList.get(i) * (360)) , true, mPaint);
            startAngle = startAngle + (int) (mRateList.get(i) * 360);
   }

(2)绘制内圆

  mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_081638));
  canvas.drawCircle(radius + centerPointRadius + (xOffset + yOffset + textRect.width()), radius + centerPointRadius + (xOffset + yOffset + textRect.height()), radius / 1.5f, mPaint);

(3)确定每块圆饼的小白点的位置，通过每段圆饼的起始角度确定该段圆弧的中心点位置。

 private void dealPoint(RectF rectF, float startAngle, float endAngle, List<Point> pointList) {
        Path path = new Path();
        //通过Path类画一个90度（180—270）的内切圆弧路径
        path.addArc(rectF, startAngle, endAngle);

        PathMeasure measure = new PathMeasure(path, false);
//        Log.e("路径的测量长度:", "" + measure.getLength());

        float[] coords = new float[]{0f, 0f};
        //利用PathMeasure分别测量出各个点的坐标值coords
        int divisor = 1;
        measure.getPosTan(measure.getLength() / divisor, coords, null);
//        Log.e("coords:", "x轴:" + coords[0] + " -- y轴:" + coords[1]);
        float x = coords[0];
        float y = coords[1];
        Point point = new Point(Math.round(x), Math.round(y));
        pointList.add(point);
    }

（4）绘制以白点为起点的折线和占比文字。有个细节需要注意一下，绘制折线和比例文字时，每部分沿线和文字的绘制规则不一样，我是按下面的规则处理的：将圆分为四部分，每块区分显示。


img_8c7ddb8ca078f1b3dc40e73d1e839ed9.png
image.png 
  //折线横向长度
    private int xOffset;
    //折线偏Y方向长度
    private int yOffset;
    private void dealRateText(Canvas canvas, Point point, int position, List<Point> pointList) {
        if (position == 0) {
            lastPoint = pointList.get(0);
        } else {
            lastPoint = pointList.get(position - 1);
        }
        float[] floats = new float[8];
        floats[0] = point.x;
        floats[1] = point.y;
        //右半圆
        if (point.x >= radius + centerPointRadius + (xOffset + yOffset + textRect.width())) {
            mPaint.setTextAlign(Paint.Align.LEFT);
            floats[6] = point.x + xOffset;      
            if (point.y <= radius + centerPointRadius + (xOffset + yOffset + textRect.height())) {
                //右上角
                floats[2] = point.x + yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //右下角
                floats[2] = point.x + yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
            //左半圆
        } else {
            mPaint.setTextAlign(Paint.Align.RIGHT);
            floats[6] = point.x - xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
            if (point.y <= radius + centerPointRadius) {
                //左上角
                floats[2] = point.x - yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //左下角
                floats[2] = point.x - yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
        }
        //根据每块的颜色，绘制对应颜色的折线
//        mPaint.setColor(mRes.getColor(colorList.get(position)));
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_b69b4f));
        //画圆饼图每块边上的折线
        canvas.drawLines(floats, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        //绘制显示的文字,需要根据类型显示不同的文字
        if (mRateList.size() > 0) {
            //Y轴：+ textRect.height() / 2 ,相对沿线居中显示
            canvas.drawText(getFormatPercentRate(mRateList.get(position) * 100) + "%", floats[6], floats[7] + textRect.height() / 2, mPaint);
        }
    }

完整代码：

package com.example.jojo.learn.customview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.View;

import com.example.jojo.learn.R;
import com.example.jojo.learn.utils.DP2PX;

import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;

/**
 * Created by JoJo on 2018/8/6.
 * wechat:18510829974
 * description: 饼状图
 */

public class PieView extends View {
    private Context mContext;
    private Paint mPaint;
    //每块占比的绘制的颜色
    private List<Integer> mColorList = new ArrayList<>();
    //圆弧占比的集合
    private List<Float> mRateList = new ArrayList<>();
    //是否展示文字
    private boolean isShowRateText;
    //圆弧半径
    private float radius;
    private int startAngle = 0;
    //不同色块之间是否需要空隙offset
    private int offset = 0;
    //圆弧中心点小圆点的圆心半径
    private int centerPointRadius;
    private float showRateSize;
    private Rect textRect;
    //折线横向长度
    private int xOffset;
    //折线偏Y方向长度
    private int yOffset;
    private float mChangeAngle;
    private boolean isAnimation;
    private int sign = 0;

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

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

    public PieView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;

        init();

        initData();
    }

    private void initData() {

        float[] rate = {30f, 40f, 15f, 15f};
        int[] colors = {Color.RED, Color.BLUE, Color.YELLOW, Color.GRAY};
        for (int i = 0; i < rate.length; i++) {
            mRateList.add(rate[i] / 100);
            mColorList.add(colors[i]);
        }

        textRect = new Rect();
        if (mRateList.size() > 0) {
            mPaint.getTextBounds((mRateList.get(0) + "%"), 0, (mRateList.get(0) + "%").length(), textRect);
        }
    }

    private void init() {
        radius = DP2PX.dip2px(mContext, 80);
        centerPointRadius = DP2PX.dip2px(mContext, 2);
        xOffset = DP2PX.dip2px(mContext, 20);
        yOffset = DP2PX.dip2px(mContext, 5);
        showRateSize = DP2PX.dip2px(mContext, 10);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.RED);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(showRateSize);

        if (mRateList.size() > 0) {
            textRect = new Rect();
            mPaint.getTextBounds((mRateList.get(0) + "%"), 0, (mRateList.get(0) + "%").length(), textRect);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.AT_MOST) {
            //边沿线和文字所占的长度：(xOffset + yOffset + textRect.width())
            heightSize = (int) (radius * 2) + 2 * centerPointRadius + getPaddingLeft() + getPaddingRight() + (xOffset + yOffset + textRect.height()) * 2;
        }
        if (widthMode == MeasureSpec.AT_MOST) {

            widthSize = (int) (radius * 2) + 2 * centerPointRadius + getPaddingLeft() + getPaddingRight() + (xOffset + yOffset + textRect.width()) * 2;
        }
        //保存测量结果
        setMeasuredDimension(widthSize, heightSize);
    }

    private int paintPosition;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //(1)绘制圆饼
        RectF rectF = new RectF(0 + centerPointRadius + (xOffset + yOffset + textRect.width()), 0 + centerPointRadius + (xOffset + yOffset + textRect.height()), 2 * radius + centerPointRadius + (xOffset + yOffset + textRect.width()), 2 * radius + centerPointRadius + (xOffset + yOffset + textRect.height()));
        List<Point> mPointList = new ArrayList<>();

        for (int i = 0; i < mRateList.size(); i++) {
            mPaint.setStyle(Paint.Style.FILL);
            mPaint.setColor(mColorList.get(i));
//            Log.e("TAG", "startAngle=" + startAngle + "--sweepAngle=" + ((int) (mRateList.get(i) * (360)) - offset));
            canvas.drawArc(rectF, startAngle, (int) (mRateList.get(i) * (360)) - offset, true, mPaint);

            //(2)处理每块圆饼弧的中心点，绘制折线，显示对应的文字
            if (isShowRateText) {
                dealPoint(rectF, startAngle, (mRateList.get(i) * 360 - offset) / 2, mPointList);
                Point point = mPointList.get(i);
                mPaint.setColor(Color.WHITE);//点的绘制的颜色
                canvas.drawCircle(point.x, point.y, centerPointRadius, mPaint);
                dealRateText(canvas, point, i, mPointList);
            }
            startAngle = startAngle + (int) (mRateList.get(i) * 360);
        }
        //(3)绘制内部中空的圆
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_081638));
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(radius + centerPointRadius + (xOffset + yOffset + textRect.width()), radius + centerPointRadius + (xOffset + yOffset + textRect.height()), radius / 1.5f, mPaint);

    }

    private Point lastPoint;

    private void dealRateText(Canvas canvas, Point point, int position, List<Point> pointList) {
        if (position == 0) {
            lastPoint = pointList.get(0);
        } else {
            lastPoint = pointList.get(position - 1);
        }
        float[] floats = new float[8];
        floats[0] = point.x;
        floats[1] = point.y;
        //右半圆
        if (point.x >= radius + centerPointRadius + (xOffset + yOffset + textRect.width())) {
            mPaint.setTextAlign(Paint.Align.LEFT);
            floats[6] = point.x + xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
//            if (lastPoint != null) {
//                int absX = Math.abs(point.x - lastPoint.x);
//                int absY = Math.abs(point.y - lastPoint.y);
//                if (absX > 0 && absX < 20 && absY > 0 && absY < 20) {
//                    floats[6] = point.x + xOffset - textRect.width() / 2;
//                    Log.e("TAG", "右半圆");
//                } else {
//                    floats[6] = point.x + xOffset;
//                }
//            } else {
//                floats[6] = point.x + xOffset;
//            }
            if (point.y <= radius + centerPointRadius + (xOffset + yOffset + textRect.height())) {
                //右上角
                floats[2] = point.x + yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //右下角
                floats[2] = point.x + yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x + yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
            //左半圆
        } else {
            mPaint.setTextAlign(Paint.Align.RIGHT);
            floats[6] = point.x - xOffset;
            //防止相邻的圆饼绘制的文字重叠显示
//            if (lastPoint != null) {
//                int absX = Math.abs(point.x - lastPoint.x);
//                int absY = Math.abs(point.y - lastPoint.y);
//                if (absX > 0 && absX < 20 && absY > 0 && absY < 20) {
//                    floats[6] = point.x - xOffset - textRect.width() / 2;
//                    Log.e("TAG", "左半圆");
//                } else {
//                    floats[6] = point.x - xOffset;
//                }
//            } else {
//                floats[6] = point.x - xOffset;
//            }
            if (point.y <= radius + centerPointRadius) {
                //左上角
                floats[2] = point.x - yOffset;
                floats[3] = point.y - yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y - yOffset;
                floats[7] = point.y - yOffset;
            } else {
                //左下角
                floats[2] = point.x - yOffset;
                floats[3] = point.y + yOffset;
                floats[4] = point.x - yOffset;
                floats[5] = point.y + yOffset;
                floats[7] = point.y + yOffset;
            }
        }
        //根据每块的颜色，绘制对应颜色的折线
//        mPaint.setColor(mRes.getColor(colorList.get(position)));
        mPaint.setColor(ContextCompat.getColor(mContext, R.color.color_b69b4f));
        //画圆饼图每块边上的折线
        canvas.drawLines(floats, mPaint);
        mPaint.setStyle(Paint.Style.STROKE);
        //绘制显示的文字,需要根据类型显示不同的文字
        if (mRateList.size() > 0) {
            //Y轴：+ textRect.height() / 2 ,相对沿线居中显示
            canvas.drawText(getFormatPercentRate(mRateList.get(position) * 100) + "%", floats[6], floats[7] + textRect.height() / 2, mPaint);
        }
    }

    private void dealPoint(RectF rectF, float startAngle, float endAngle, List<Point> pointList) {
        Path path = new Path();
        //通过Path类画一个90度（180—270）的内切圆弧路径
        path.addArc(rectF, startAngle, endAngle);

        PathMeasure measure = new PathMeasure(path, false);
//        Log.e("路径的测量长度:", "" + measure.getLength());

        float[] coords = new float[]{0f, 0f};
        //利用PathMeasure分别测量出各个点的坐标值coords
        int divisor = 1;
        measure.getPosTan(measure.getLength() / divisor, coords, null);
//        Log.e("coords:", "x轴:" + coords[0] + " -- y轴:" + coords[1]);
        float x = coords[0];
        float y = coords[1];
        Point point = new Point(Math.round(x), Math.round(y));
        pointList.add(point);
    }

    public void updateDate(List<Float> rateList, List<Integer> colorList, boolean isShowRateText) {
        this.isShowRateText = isShowRateText;
        this.mRateList = rateList;
        this.mColorList = colorList;
        init();
        invalidate();
    }

    /**
     * 获取格式化的保留两位数的数
     */
    public String getFormatPercentRate(float dataValue) {
        DecimalFormat decimalFormat = new DecimalFormat(".00");//构造方法的字符格式这里如果小数不足2位,会以0补足.
        return decimalFormat.format(dataValue);
    }


}
weixin_33736048
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android自定义睡眠下表统计图,Android 进阶自定义View（5）图表统计PieChartView圆饼图的实现...
weixin_29585753的博客
05-25 635
今天讲图表统计中比较常用的一个，像支付宝的月账单啥的，都是用圆饼图来做数据统计的，先看一下我最终实现的效果图：image.png该效果实际上是两个实心圆叠加后的效果。image.pngimage.png《一》View实现思路分析：(1)根据占比集合数据，计算所需绘制的角度，动态设置画笔颜色，drawArc()绘制外圆弧(2)drawCircle()绘制内圆(3)确定每块圆饼的小白点的位置(4)绘制...
饼状图piechart（仿支付宝对账单）
04-22
仿支付宝对账单页面，虽然页面没有做到完全一样，但是部分功能实现了，比如时间上的增减，饼状图的实现，在这里讲一下需要注意的地方。
android 自定义饼图半径不定,【Android】仿支付宝账单统计饼状图的自定义view
weixin_39690963的博客
05-25 198
仿支付宝统计饼状图的自定义view，如下图：项目地址：https://github.com/bigeyechou/CustomViewCollection目录：customviewcollection/app/src/main/java/com/bigeye/customviewcollection/customview/PieChartView.java效果图：源代码：/*** 饼状图*/pub...
实例：支付宝月账单报告（添加标题、图例）
最新发布
2303_81026952的博客
05-19 86
【代码】实例：支付宝月账单报告（添加标题、图例）
Android 圆圈统计图(支付宝饼图)
RelinRan
08-15 2978
圆圈统计图 1.类支付宝统计 2.动画显示calendar_view.aar1.build.grade | setting.grade 2./app/build.grade
echarts formatter_echarts仿支付宝饼图
weixin_39766910的博客
11-29 242
最新的活动一个需求仿支付宝饼图，作为一个前端画了一天是不是太过分了，哈哈哈支付宝的的账单统计中的饼图(请忽略我和这个月过分的花费)我们设计的饼图使用的echarts插件，因为之前没用canvas，画个饼还行，那个标示线标注自己画的画觉得更难，所以选择了echarts。(1)标注线脱离饼：看尽了官网的饼图参数配置，并没有参数设置可以使标示线脱离饼图，于是画了两个数据源相同的饼，外层的饼设置...
仿支付宝账单统计图(饼图)
the_path的专栏
08-26 7744
最近项目里用到的一个统计图，是照着支付宝账单的饼图zuo
Android图表折线-柱状-圆饼图示例
05-08
本示例着重于如何在Android平台上实现折线图、柱状图和圆饼图，这些都是数据可视化中常见的图表类型。下面我们将深入探讨这些图表的实现方式。 **折线图** 折线图是一种用于显示随时间变化的趋势或关系的图形，适用...
html5统计图表特效
11-08
在统计图表中，开发者可以利用Canvas API创建线图、柱状图、饼图、散点图等各种复杂的数据表示。通过定义路径、颜色、填充和描边样式，可以实现丰富的图形效果，并结合事件监听来实现交互功能。 2. SVG：SVG是一种...
CSS3/HTML5图表实例：圆饼的三角统计图表应用演示.rar
07-10
CSS3/HTML5图表实例：圆饼的三角统计图表应用演示，一共有6种图表运用效果，都是带有动画效果的统计图表，用HTML5做出的东西，广泛应用于后台管理和WEB在线OA系统中，学好HTML5/CSS3是今后的一个方向哦。
一款网站流量统计中的HTML5圆饼图表效果.rar
07-10
一款网站流量统计中的圆饼图表效果，本效果基于HTML5 canvas技术实现，带动画效果，鼠标放在饼图上，可显示对应的提示信息，饼形图在实际应用中，可结合数据库来生成的动态的数据统计图表，本例中的数据是静态的，...
Android自定义控件实现支付宝记账饼图
08-27
主要为大家详细介绍了Android自定义控件实现支付宝记账饼图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义圆饼图
11-16
为了在Android中实现这样的效果，我们需要创建一个自定义View，并在其中绘制圆饼图。 1. **自定义View**：创建一个新的Java类继承自`View`，并在其中重写`onDraw()`方法。这是绘制图形的核心，我们将在这里计算并...
Android 小工具--饼状图
Rose J 的博客
10-05 314
1.导入依赖 第一步，先添加配置代码 maven { url "https://jitpack.io" } 第二步，添加依赖（记得点击同步） implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3' 2.Fragment代码 1.布局代码 <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xm
android 支付宝月账单 统计图_支付宝的年度账单也来了，看看你花了多少
weixin_36255837的博客
12-24 2077
在前几天刚说完微信的年度账单之后(详情点击蓝字直达)，最近，支付宝的年度账单也可以查询了。查询方法打开支付宝 APP，点击进入「我的」页面中的「账单」。然后，我们点击「月账单」按钮。点击月账单进入统计页面后，此时显示的是 2020 年 12 月份的账单内容。我们需要点击月份按钮中的倒三角按钮，将选择条件切换到按年。选择 2020 年，点击确认后，就可以看到 2020 年账单了。页面上汇总...
android绘制简单饼状图,Android 绘制饼状图
weixin_34329874的博客
06-04 304
/*** 饼状图百分比控件*/public class PercentCircle extends View {private final String tag = "PercentCircle";/*** 绘制百分比的圆，一共有两部分，分别是内圆、外圆；* 思路：首先需要两支画笔, 设置画笔对应的属性等；*//*** 内部圆画笔*/private Paint mBackgroundInPaint...
Android PieChart 饼图控件
热门推荐
宇光的博客
07-01 1万+
一个Android自定义圆形饼图，可显示标题和值，饼上显示百分比。
Echarts 实现环状半圆形饼图
程序猿小白的博客
09-04 7521
*可以用整个圆，也可以用半圆，自由发挥即可。有问题可留言 1、效果如下 2、代码实现 // 环状半圆形饼图 var option = { grid: { left: "3%", right: "3%", bottom: "3%", containLabel: true }, series: [ { name: "一般",
python绘制圆饼图、柱状图
05-30
好的，以下是Python绘制圆饼图和柱状图的示例代码： 圆饼图： ```python import matplotlib.pyplot as plt # 设置数据和标签 labels = ['A', 'B', 'C', 'D'] sizes = [15, 30, 45, 10] # 绘制圆饼图 plt.pie...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值