Android drawXXX()直方图和饼图

作者: 倔强的炉包 | 来源:发表于2017-07-13 18:40 被阅读103次

Android drawXXX()直方图和饼图
认识matplotlib—直方图、饼图、箱线图
R语言绘制饼图，扇图，直方图
Matplotlib实践使用笔记——基本画图
Android 自定义View简介
2018-07-20 报表和图表的作用和特点
秦路《七周》Python部分 -- 可视化笔记（pandas&
第三章：数据的描述
R语言入门section2
D3图表绘制

题目见Github
通过一下午的时间做了个练习，比较复杂的就是直方图和饼图。

直方图

device-2017-07-13-183502.png

package com.hencoder.hencoderpracticedraw1.practice;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Arrays;
import java.util.List;

public class Practice10HistogramView extends View {
    private Paint mPaint;
    private List<String> mStrings = Arrays.asList("Froyo", "GB", "ICS", "JB", "KitKat", "L", "M");
    private List<Integer> mIntegerList = Arrays.asList(2, 5, 6, 40, 80, 100, 30);
    private RectF rectF = new RectF();
    private Rect descRectF = new Rect();

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

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

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getWidth() - 100 - 100;
        int marign = 20;
        int eachWidth = (width - marign * (mStrings.size() + 1)) / mStrings.size();
        canvas.drawLine(100, 30, 100, getHeight() - 160, mPaint);
        canvas.drawLine(100, getHeight() - 160, getWidth() - 100, getHeight() - 160, mPaint);
        mPaint.setTextSize(28);
        for (int i = 0; i < mStrings.size(); i++) {
            int x = eachWidth * i + marign * (i + 1) + 100;
            Rect rect = new Rect();
            mPaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
            canvas.drawText(mStrings.get(i), x + eachWidth / 2 - rect.width() / 2, getHeight() - 120, mPaint);
        }
        mPaint.setTextSize(48);
        String desc = "直方图";
        mPaint.getTextBounds(desc, 0, desc.length(), descRectF);
        canvas.drawText(desc, getWidth() / 2 - descRectF.width() / 2, getHeight() - 20, mPaint);

        mPaint.setColor(Color.parseColor("#72B916"));
        mPaint.setStyle(Paint.Style.FILL);
        int height = getHeight() - 230;
        int eachHeight = height / 100;
        for (int i = 0; i < mIntegerList.size(); i++) {
            rectF.left = eachWidth * i + marign * (i + 1) + 100;
            rectF.top = height - eachHeight * mIntegerList.get(i);
            rectF.right = rectF.left + eachWidth;
            rectF.bottom = getHeight() - 160;
            canvas.drawRect(rectF, mPaint);
        }
    }
}

饼图

device-2017-07-13-183511.png

package com.hencoder.hencoderpracticedraw1.practice;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

import java.util.Arrays;
import java.util.List;

public class Practice11PieChartView extends View {
    private Paint mPaint;
    private List<Integer> mIntegerList = Arrays.asList(40, 20, 7, 3, 20, 30);
    private List<String> mStrings = Arrays.asList("AAFSF", "BFDBC", "CDF", "DFE", "EDSFSDFD", "FFDCX");
    private int sum = 0;
    private int radius = 300;
    private Paint mWhitePaint;
    private RectF mRectF1 = new RectF();
    private RectF mRectF2 = new RectF();
    private RectF mRectF3 = new RectF();
    private RectF mRectF4 = new RectF();

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

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

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

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.WHITE);
        mPaint.setStrokeWidth(2);
        for (int a : mIntegerList) {
            sum += a;
        }
        mWhitePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mWhitePaint.setColor(Color.WHITE);
        mWhitePaint.setStrokeWidth(3);
        mWhitePaint.setTextSize(30);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mRectF1.left = getWidth() / 2 - radius + 5;
        mRectF1.top = getHeight() / 2 - radius + 5;
        mRectF1.right = getWidth() / 2 + radius + 5;
        mRectF1.bottom = getHeight() / 2 + radius + 5;

        mRectF2.left = getWidth() / 2 - radius - 5;
        mRectF2.top = getHeight() / 2 - radius + 5;
        mRectF2.right = getWidth() / 2 + radius - 5;
        mRectF2.bottom = getHeight() / 2 + radius + 5;

        mRectF3.left = getWidth() / 2 - radius - 5;
        mRectF3.top = getHeight() / 2 - radius - 5;
        mRectF3.right = getWidth() / 2 + radius - 5;
        mRectF3.bottom = getHeight() / 2 + radius - 5;

        mRectF4.left = getWidth() / 2 - radius + 5;
        mRectF4.top = getHeight() / 2 - radius - 5;
        mRectF4.right = getWidth() / 2 + radius + 5;
        mRectF4.bottom = getHeight() / 2 + radius - 5;
    }

    private int degreeed = 0;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        综合练习
//        练习内容：使用各种 Canvas.drawXXX() 方法画饼图
        for (int i = 0; i < mIntegerList.size(); i++) {
            int degree = mIntegerList.get(i) * 360 / sum;
            int red = (int) (Math.random() * 255);
            int green = (int) (Math.random() * 255);
            int blue = (int) (Math.random() * 255);
            mPaint.setColor(Color.rgb(red, green, blue));
            if (degreeed < 180) {
                int centerDegree = degreeed + degree / 2;
                if (degreeed < 90) {
                    float startX = (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius) + getWidth() / 2;
                    float startY = (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius) + getHeight() / 2;
                    float endX = startX + 25;
                    float endY = startY + 25;
                    canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
                    canvas.drawLine(endX, endY, endX + 70, endY, mWhitePaint);
                    canvas.drawText(mStrings.get(i), endX + 80, endY, mWhitePaint);
                    canvas.drawArc(mRectF1, degreeed, degree, true, mPaint);
                } else {
                    float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
                    float startY = (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius) + getHeight() / 2;
                    float endX = startX - 25;
                    float endY = startY + 25;
                    canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
                    canvas.drawLine(endX, endY, endX - 70, endY, mWhitePaint);
                    Rect rect = new Rect();
                    mWhitePaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
                    canvas.drawText(mStrings.get(i), endX - 80 - rect.width(), endY, mWhitePaint);
                    canvas.drawArc(mRectF2, degreeed, degree, true, mPaint);
                }
            } else {
                int centerDegree = degreeed + degree / 2;
                if (degreeed < 270) {
                    float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
                    float startY = getHeight() / 2 + (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius);
                    float endX = startX - 25;
                    float endY = startY - 25;
                    canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
                    canvas.drawLine(endX, endY, endX - 70, endY, mWhitePaint);
                    Rect rect = new Rect();
                    mWhitePaint.getTextBounds(mStrings.get(i), 0, mStrings.get(i).length(), rect);
                    canvas.drawText(mStrings.get(i), endX - 80 - rect.width(), endY, mWhitePaint);
                    canvas.drawArc(mRectF3, degreeed - 360, degree, true, mPaint);
                } else {
                    float startX = getWidth() / 2 + (float) (Math.cos(Math.PI * centerDegree / 180.0) * radius);
                    float startY = getHeight() / 2 + (float) (Math.sin(Math.PI * centerDegree / 180.0) * radius);
                    float endX = startX + 25;
                    float endY = startY - 25;
                    canvas.drawLine(startX, startY, endX, endY, mWhitePaint);
                    canvas.drawLine(endX, endY, endX + 70, endY, mWhitePaint);
                    canvas.drawText(mStrings.get(i), endX + 80, endY, mWhitePaint);
                    canvas.drawArc(mRectF4, degreeed - 360, degree, true, mPaint);
                }
            }
            degreeed += degree;
        }
        mPaint.setColor(Color.BLACK);
    }
}

Android drawXXX()直方图和饼图
题目见Github通过一下午的时间做了个练习，比较复杂的就是直方图和饼图。直方图device-2017-07-1...
认识matplotlib—直方图、饼图、箱线图
本节主要介绍如何绘制直方图、饼图、箱线图。直方图饼图箱线图
R语言绘制饼图，扇图，直方图
模型数据饼图扇形图直方图数据作图
Matplotlib实践使用笔记——基本画图
基本画图操作内容包括画线、条形图、直方图、饼图。画线画条形图简单条形图直方图统计出现的次数饼状图会...
Android 自定义View简介
概述 Android自定义View 其实就是：布局、绘制、触摸反馈。在绘制的过程中，不管是直方图，饼图，还是其他...
2018-07-20 报表和图表的作用和特点
报表和图表的作用和特点需求报表用例报表测试实验室报表缺陷报表直方图饼图趋势图
秦路《七周》Python部分 -- 可视化笔记（pandas&
折线图条形图直方图箱线图密度图密度图面积图散点图散点图矩阵饼图
第三章：数据的描述
3.1.1 定量变量的图表示：直方图、盒形图、茎叶图、散点图。 3.1.2 定性变量的图表示：饼图和条形图。 3....
R语言入门section2
hist()绘制直方图： plot()绘制散点图：列联函数table(),柱状图绘制函数barplot(): 饼...
D3图表绘制
本节内容将描述饼状图、力导向图、弦图、集群图、树状图、打包图、分区图、圆形分区图、直方图、捆图、堆栈图、矩阵树图、...