图表之环形图

最新推荐文章于 2022-08-25 12:23:29 发布
最新推荐文章于 2022-08-25 12:23:29 发布
阅读量2.5k 收藏
点赞数
分类专栏： android自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_lu_/article/details/85249142
版权

最近项目新增一个环形图表数据查看的。

效果图如下

在这里插入图片描述

在网上找了相关画环形的，都不符合需求，找到一个类似的代码RoundRateView，基本画出了外面圆环，但是有瑕疵，然后再修改

首先根据传入的4个数值，计算出所占比例和相应的角度。然后画弧形 angleList是各个数据对应的角度。当然白色区域也算，所以加起来这个集合的大小就是8。

	float angle=0;
    for (int i = 0; i < angleList.size(); i++) {
        mPaint.setColor(colorList.get(i));
        if (i > 0) {
            startAngle += angleList.get(i - 1);
        }
        canvas.drawArc(oval, startAngle, angleList.get(i), false, mPaint);

    }

效果图如下

在这里插入图片描述

可以看到中间隔层的白色离中心点越远，越宽。这不难理解，因为我们画的是个扇形。
如何让中间隔层宽度一样呢。
我这里是直接在中间隔层画了个白色的矩形，矩形肯定是宽度一样的，盖在上面就可以。这里还发生一个奇怪的问题，for循环里面注释的代码和后面for循环的代码一样，但是在画弧的for循环里面，还是没效果！！！单独for写在外面,如下代码，才有效果。此问题还不知啥原因。
代码如下，首先保持图层，然后在中心点旋转相应的角度，再画白色的矩形

 float angle=0;
 for (int i = 0; i < angleList.size(); i++) {
        mPaint.setColor(colorList.get(i));
        if (i > 0) {
            startAngle += angleList.get(i - 1);
        }
        canvas.drawArc(oval, startAngle, angleList.get(i), false, mPaint);
//			 angle+=angleList.get(i);
//            if (angleList.get(i)>1){
//                LogUtil.d("angle:"+angle+","+angleList.get(i));
//                //画白色分隔带
//                canvas.save();
//                rectPaint.setColor(Color.WHITE);
//                canvas.rotate(angle, getWidth() / 2, getHeight() / 2);
//                RectF r = new RectF(getWidth() / 2, 0, getWidth() / 2 + ScreenUtil.dip2px(3), mCircleWidth+ScreenUtil.dip2px(4));
//                canvas.drawRect(r, rectPaint);
//                canvas.restore();
//            }
    }

    for (int i=0;i<angleList.size();i++){
		 angle+=angleList.get(i);
        if (angleList.get(i)>1){
            LogUtil.d("angle:"+angle+","+angleList.get(i));
            //画白色分隔带
            canvas.save();
            rectPaint.setColor(Color.WHITE);
            canvas.rotate(angle, getWidth() / 2, getHeight() / 2);
            RectF r = new RectF(getWidth() / 2, 0, getWidth() / 2 + ScreenUtil.dip2px(3), mCircleWidth+ScreenUtil.dip2px(4));
            canvas.drawRect(r, rectPaint);
            canvas.restore();
        }
    }

效果如下。白色宽度保持一致了。

在这里插入图片描述

剩下来就是画比例文字了。

在这里插入图片描述

只要我们把中心点平移到黑点。则就可以直接drawText画文字了。
代码如下。首先我们坐标移动到圆中心点。角度a就是弧形角度的一半。外边圆的半径，减去弧宽度的一半，就是黑点到圆中心点的距离。然后再乘以角度a的正弦 就是transX.也就是黑点的x坐标，同理可得黑点的y坐标。再根据字体的宽高调整下位置。就可以画在黑点的位置。代码如下

float preAngle=0;
    for (int i=0;i<angleList.size();i++){
        if (i>0) {
            preAngle += angleList.get(i - 1);
        }
        if (angleList.get(i)>1){
            //画比例数据
            canvas.save();
            //先平移到中心点
            canvas.translate(getWidth()/2,getHeight()/2);
            //将角度转换为弧度
            double a=Math.PI/180*(preAngle+angleList.get(i)/2);


            String data=(angleList.get(i)*100/360)+"%";

            float transX = (float) ((getWidth()/2 - mCircleWidth/2)*Math.sin(a))+ViewUtil.getTextRectWidth(textPaint,data)/2;
            float transY = (float) ((getWidth()/2 - mCircleWidth/2)*Math.cos(a))-ViewUtil.getTextHeight(textPaint);

            LogUtil.d("transX:"+transX+",transY:"+transY+","+String.valueOf(data));
            canvas.translate(transX,-transY);
            canvas.drawText(String.valueOf(data),0,0,textRatePaint);
            canvas.restore();
        }
    }

效果图如下。

在这里插入图片描述

完整代码如下

public class RoundRateView extends View {
    private Paint mPaint;
    private int mCircleWidth; //圆环宽度
    private int intervalAngle = 4;//间隔角度
    private int intervalColor = Color.GRAY;//间隔颜色 默认灰色
    private int aboveTextColor = Color.GRAY;//上面的文字 默认灰色
    private int belowTextColor = Color.GRAY;//下面的文字 默认灰色
    private int aboveTextSize = 60;//上面的文字字体大小
    private int belowTextSize = 40;//下面的文字字体大小
    private boolean isShowText = true; //是否显示中间文字 默认显示
    /**
     * 画文字的画笔
     */
    private Paint textPaint;
    private Paint textRatePaint;

    private int colors[] = {Color.parseColor("#41A8FF")
            , Color.parseColor("#86C8FF")
            , Color.parseColor("#FF8B13")
            , Color.parseColor("#FFB971")
            , Color.parseColor("#FF8A77")
            , Color.parseColor("#EEE685")
            , Color.parseColor("#EECBAD")
            , Color.parseColor("#EEAEEE")
            , Color.parseColor("#EE3B3B")
            , Color.parseColor("#EDEDED")};


    private List<Integer> angleList = new ArrayList<>(); //所有的角度 集合
    private List<Integer> colorList = new ArrayList<>(); //所有的色值 集合
    private List<Integer> dataList=new ArrayList<>();
    private RectF oval;
    private double allMoney;
    private boolean isShowMoney = true; //是否是明文显示钱数,默认是明文显示
    //    private Paint p;

    public RoundRateView(Context context) {
        super(context);
        init(context, null, 0);
    }

public RoundRateView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
}

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

private void init(Context context, AttributeSet attrs, int defStyleAttr) {

    TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RoundRateView, defStyleAttr, 0);
    int n = array.getIndexCount();//自定义属性个数
    for (int i = 0; i < n; i++) {
        int attr = array.getIndex(i);//通过索引获取具体属性
        switch (attr) {
            case R.styleable.RoundRateView_rrv_circleWidth:
                mCircleWidth = array.getDimensionPixelSize(attr, (int) dip2px(20f));
                if (mCircleWidth < 2) {
                    mCircleWidth = 2;//最小宽度是2
                }
                break;
            case R.styleable.RoundRateView_rrv_intervalAngle:
                intervalAngle = array.getDimensionPixelSize(attr, (int) dip2px(4f));
                break;
            case R.styleable.RoundRateView_rrv_aboveTextSize:
                aboveTextSize = array.getDimensionPixelSize(attr, (int) dip2px(60));
                break;
            case R.styleable.RoundRateView_rrv_belowTextSize:
                belowTextSize = array.getDimensionPixelSize(attr, (int) dip2px(40));
                break;
            case R.styleable.RoundRateView_rrv_intervalColor:
                intervalColor = array.getColor(attr, Color.GRAY);
                break;
            case R.styleable.RoundRateView_rrv_aboveTextColor:
                aboveTextColor = array.getColor(attr, Color.GRAY);
                break;
            case R.styleable.RoundRateView_rrv_belowTextColor:
                belowTextColor = array.getColor(attr, Color.GRAY);
                break;
            case R.styleable.RoundRateView_rrv_isShowText:
                isShowText = array.getBoolean(attr, true);
                break;
        }
    }
    array.recycle();//定义完后属性对象回


    mPaint = new Paint();  //创建画笔
    mPaint.setAntiAlias(true);  //设置绘制时抗锯齿
    mPaint.setStyle(Paint.Style.STROKE); //设置绘画空心（比如画圆时画的是空心圆而不是实心圆）
    mPaint.setStrokeWidth(mCircleWidth);//设置画笔线宽

    textPaint = new Paint();
    textPaint.setAntiAlias(true);
    textPaint.setDither(true);
    textRatePaint = new Paint();
    textRatePaint.setAntiAlias(true);
    textRatePaint.setDither(true);
    textRatePaint.setTextSize(getResources().getDimension(R.dimen.s20));
    textRatePaint.setColor(Color.WHITE);
    textRatePaint.setTextAlign(Paint.Align.CENTER);
    rectPaint.setAntiAlias(true);
    rectPaint.setStyle(Paint.Style.FILL);
    rectPaint.setColor(Color.WHITE);
    rectPaint.setStrokeWidth(intervalAngle);
}
private Paint rectPaint = new Paint();

public void setList(List<Integer> list) {
    int allIntervalAngle = 0;//所有间隔加起来的角度
    int allModuleAngle;  //所有模块加起来的角度  allModuleAngle + allIntervalAngle=360;
    if (list.size() > colors.length) {
        return;
    }
    angleList.clear();
    colorList.clear();
    allMoney = 0d;
    for (int i = 0; i < list.size(); i++) {
        allMoney += (list.get(i));
    }
    if (list.size() == 1) { //如果只有一条数据,就不要间隔
        angleList.add(360);
        colorList.add(colors[0]);
    } else {
        for (int i = 0; i < list.size(); i++) {
            if (list.get(i) != 0) {
                allIntervalAngle += intervalAngle;
            }
        }
        if (allIntervalAngle == intervalAngle) {//如果只有一条数据不为0,就不要间隔颜色
            angleList.add(360);
            colorList.add(colors[0]);
        } else {
            allModuleAngle = 360 - allIntervalAngle;
            int angle = 0;
            for (int i = 0; i < list.size(); i++) {
                if (list.get(i) != 0) {
                    int e = (int) (list.get(i) / allMoney * allModuleAngle);
                    dataList.add((int) (list.get(i) / allMoney)*100);
                    if (i == list.size() - 1) {//如果是最后一个色块,所占角度就是剩余全部的角度
                        this.angleList.add(allModuleAngle - angle);
                    } else {
                        angle += e;
                        this.angleList.add(e);
                    }
                    this.angleList.add(intervalAngle);
                    this.colorList.add(colors[i]);
                    this.colorList.add(intervalColor);
                }

            }
        }

    }

    invalidate();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    int widthPixels = this.getResources().getDisplayMetrics().widthPixels;//获取屏幕宽
    int heightPixels = this.getResources().getDisplayMetrics().heightPixels;//获取屏幕高
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int hedight = MeasureSpec.getSize(heightMeasureSpec);
    int minWidth = Math.min(widthPixels, width);
    int minHedight = Math.min(heightPixels, hedight);
    setMeasuredDimension(Math.min(minWidth, minHedight), Math.min(minWidth, minHedight));

}

public void setIsShowText(boolean isShowText) {
    this.isShowText = isShowText;
    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    drawCircle(canvas);
    if (isShowText) {
        drawText(canvas);
    }
    drawInnerCicle(canvas);
}

private void drawInnerCicle(Canvas canvas) {

    mPaint.setStrokeWidth(ScreenUtil.dip2px(4));
    mPaint.setColor(getResources().getColor(R.color.time_axis_detail_sleep_title));
    int radiu = (int) (getMeasuredWidth()/2 - mCircleWidth - dip2px(4));

    canvas.drawCircle(getMeasuredWidth()/2,getHeight()/2,radiu,mPaint);
}

/**
 * 画出圆弧
 *
 * @param canvas
 */
private void drawCircle(Canvas canvas) {
    if (oval == null) {
        int min = Math.min(getWidth() - mCircleWidth / 2, getHeight() - mCircleWidth / 2);
        oval = new RectF(mCircleWidth / 2, mCircleWidth / 2,
                min, min);
    }
    float startAngle = -90f;

 
    mPaint.setColor(intervalColor);

    mPaint.setStrokeWidth(mCircleWidth);
    float angle=0;
    for (int i = 0; i < angleList.size(); i++) {
        mPaint.setColor(colorList.get(i));
        if (i > 0) {
            startAngle += angleList.get(i - 1);
        }
        canvas.drawArc(oval, startAngle, angleList.get(i), false, mPaint);
//            angle+=angleList.get(i);
//
//            if (angleList.get(i)>1){
//                LogUtil.d("angle:"+angle+","+angleList.get(i));
//                //画白色分隔带
//                canvas.save();
//                rectPaint.setColor(Color.WHITE);
//                canvas.rotate(angle, getWidth() / 2, getHeight() / 2);
//                RectF r = new RectF(getWidth() / 2, 0, getWidth() / 2 + ScreenUtil.dip2px(3), mCircleWidth+ScreenUtil.dip2px(4));
//                canvas.drawRect(r, rectPaint);
//                canvas.restore();
//            }
    }

    for (int i=0;i<angleList.size();i++){
        angle+=angleList.get(i);
        if (angleList.get(i)>1){
            LogUtil.d("angle:"+angle+","+angleList.get(i));
            //画白色分隔带
            canvas.save();
            rectPaint.setColor(Color.WHITE);
            canvas.rotate(angle, getWidth() / 2, getHeight() / 2);
            RectF r = new RectF(getWidth() / 2, 0, getWidth() / 2 + ScreenUtil.dip2px(3), mCircleWidth+ScreenUtil.dip2px(4));
            canvas.drawRect(r, rectPaint);
            canvas.restore();
        }
    }
    float preAngle=0;
    for (int i=0;i<angleList.size();i++){
        if (i>0) {
            preAngle += angleList.get(i - 1);
        }
        if (angleList.get(i)>1){
            //画比例数据
            canvas.save();
            //先平移到中心点
            canvas.translate(getWidth()/2,getHeight()/2);
            //将角度转换为弧度
            double a=Math.PI/180*(preAngle+angleList.get(i)/2);


            String data=(angleList.get(i)*100/360)+"%";

            float transX = (float) ((getWidth()/2 - mCircleWidth/2)*Math.sin(a))+ViewUtil.getTextRectWidth(textPaint,data)/2;
            float transY = (float) ((getWidth()/2 - mCircleWidth/2)*Math.cos(a))-ViewUtil.getTextHeight(textPaint);

            LogUtil.d("transX:"+transX+",transY:"+transY+","+String.valueOf(data));
            canvas.translate(transX,-transY);
            canvas.drawText(String.valueOf(data),0,0,textRatePaint);
            canvas.restore();
        }
    }

}

public String precentStr;
public String precentUnit;
/**
 * 画出中间的文字
 *
 * @param canvas 画布对象
 */
private void drawText(Canvas canvas) {
    int center = getWidth() / 2;
    String percent;
    percent=precentStr;
    textPaint.setTextSize(aboveTextSize);
    //防止文字边界超过内环边界  上面的文字大小减小 下面的文字大小也跟着减小
    while (textPaint.measureText(percent) > getWidth() - 2f * mCircleWidth) {
        aboveTextSize--;
        belowTextSize--;
        textPaint.setTextSize(aboveTextSize);
    }

    textPaint.setTextAlign(Paint.Align.CENTER); // 设置文字居中，文字的x坐标要注意
    textPaint.setColor(aboveTextColor); // 设置文字颜色
    textPaint.setStrokeWidth(0); // 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠
    Rect bounds = new Rect(); // 文字边框
    textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形
    Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
    int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; // 计算文字的基线,方法见http://blog.csdn.net/harvic880925/article/details/50423762
    canvas.drawText(percent, center, baseline, textPaint); // 绘制文字
    percent=precentUnit;
    textPaint.setColor(belowTextColor); // 设置文字颜色
    textPaint.setTextSize(belowTextSize);
    //防止下面的文字超出内环边界
    while (textPaint.measureText(percent) > getWidth() - 2f * mCircleWidth) {
        belowTextSize--;
        textPaint.setTextSize(belowTextSize);
    }
    textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形
    Paint.FontMetricsInt fontMetrics1 = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线
    int baseline1 = center + (fontMetrics1.bottom - fontMetrics1.top) / 2 - fontMetrics.bottom + 38 * 2;
    canvas.drawText(percent, center, baseline1, textPaint); // 绘制文字
}


public static int px2dip(int pxValue) {
    final float scale = Resources.getSystem().getDisplayMetrics().density;
    return (int) (pxValue / scale + 0.5f);
}


public static float dip2px(float dipValue) {
    final float scale = Resources.getSystem().getDisplayMetrics().density;
    return (dipValue * scale + 0.5f);
}

public void setIsShowMoney(boolean isShowMoney) {
    this.isShowMoney = isShowMoney;
    invalidate();
}
}
Mr_lu_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF环形图表
09-06
WPF制作的环形图。你只需传入参数，就可以实现环形图的生成。 样式已设置好，后台逻辑也定义好。 重要的是你只需要在构造时传数值和说明，就可以生成图啦，非常方便！
WPF LiveCharts 圆环图表
余道长的博客
08-23 878
<lvc:PieChart Grid.Row="1" Height="302" Width="264" Canvas.Left="162" Canvas.Top="65" Series="{Binding PieSeriesCollection}" SeriesColors="{Binding CloCollection}" InnerRadius="80"> </lvc:PieChart> InnerRadius：内...
WPF 实现带明细的环形图表
dotNET跨平台
06-08 468
本文经原作者授权以原创方式二次分享，欢迎转载、分享。原文作者：普通的地球人原文地址：https://www.cnblogs.com/tsliwei/p/7155616.htmlGithub地址：https://github.com/WPFDevelopersOrg/WPFDevelopers.Charts大体思路图表使用Arc+Popup实现；图表分为两部分,一是环形部分...
[数据可视化] 环形图(Donut Chart)
Hudas的博客
08-25 7827
本文主要讲解环形图
WPF原生环形图表
weixin_30878361的博客
03-27 175
WPF原生环形图表 原文:WPF原生环形图表 版权声明：欢迎转载。转载请注明出处，谢谢 https://blog.csdn.net/wzcool273509239/artic...
echart 3D环形图 动画效果
12-18
利用echart实现的3D环形图表，底部带有动画效果
年份对比环形图PPT图表.pptx
09-12
年份对比环形图PPT图表.pptx
安卓图表报表相关-简单的环形图.zip
07-29
简单的环形图.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
PPT图表美化之微立体环形图.rar
09-03
新人也学得会的PPT数据图表美化之微立体环形图。1、设置背景：PPT的背景色设置线性渐变，方向90度，颜色上浅下深。2、插入图表：插入一个圆环图表，将标题网格、图例等去掉后，进行设置，只留两行数据。3、数值设置...
WPF编程，Live Charts使用说明（26）——环图
君一席
04-14 2805
后台 using System; using System.Linq; using System.Windows; using LiveCharts; using LiveCharts.Defaults; using LiveCharts.Wpf; namespace Wpf.PieChart { public partial class DoughnutChartExample ...
WPF 3D 显示树状统计图
12-20
WPF 3D 显示树状统计图！WPF 3D 显示树状统计图！ WPF 3D 显示树状统计图！WPF 3D 显示树状统计图！
WPF+圆形菜单+弹出动画
05-15
软件为图片展示系统，右键触发事件（可改为左键出发），弹出圆形按钮。点击各个圆形按钮显示多张图片（从本地读取，图片已放在打包目录下，可运行）
环形进度条
08-31
环形进度条，环形图.可以自己修改里面的所有东西，本来就是一个java文件，什么都可以改，如果不修改的话直接一个方法调用就行了
tableau可视化分析-案例集锦-环形图
02-04
tableau可视化分析-案例集锦-环形图
WPF圆环图
鸣风
06-29 8642
引用的dll:LiveCharts.Wpf.dllLiveCharts.dllArthas.dll 界面代码： xmlns:Metro="clr-namespace:Arthas.Controls.Metro;assembly=Arthas" xmlns:ms="clr-namespace:Mindscape.WpfElements.Charting;assembly=Mindscape.WpfElements" xmlns:lvc="clr-name...
WPF：使用【Arc】制作环形加载动画和环形进度条
pandawangyt的博客
08-20 2543
安装Blend包 首先引入Blend包，【工具】-【NuGet包管理器】-【管理解决方案的NuGet程序包】，在【浏览】页面搜索关键词【Blend】，安装 引入Blend包 在MainWindow.xaml的Window标签里引入 xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" 环形加载等待动画 <ed:Arc Width="300" Height="300" StartAngle="0
echart图表环形图（饼图）
热门推荐
ProgramarQin的博客
02-03 1万+
最近由于项目需要接触了echart图表插件，由于echart表格配置项比较多，因此整理了自己遇到的一些图表并且粘贴出代码，echarts官网API http://echarts.baidu.com/option.html#title 首先，用图示解释几个配置option属性 tooltip:legend:labelLine: 需要实现的效果图如下，直接贴上代码，各配置项已在代码中通过注释说明
JS 饼图/环形图表
qiaofengma的博客
07-28 1万+
js 圆形/环形图表 最近公司项目要求开发环形图表客户端（Android/IOS）组件，一开始想使用原生实现，但是需要开发2套代码，最后决定使用js来实现图表，原生调用html代码展示。 效果如下： 直接上代码：html代码：<html> <head> <meta name="viewport" content="width=device-width, initial-scal
eacharts环形图调整图表位置
最新发布
05-25
你可以通过使用 `grid` 属性来调整 Eacharts 环形图的位置。...注意：`grid` 属性只对柱状图、折线图、散点图等有网格的图表有效，对于饼图、环形图等没有网格的图表，`grid` 属性的作用是调整图表位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值