Android自定义叠加柱形图

1.先上效果图

设计图.png

demo效果图.png

2.简介
前几天项目中用到了柱形图，而且是叠加的，找了一些第三方开源库，没有特别合适的，MPAndroidChart能实现这种效果，但是这个库太大了，只为了实现这个效果就引用这个库不太好，就自己写了一个柱形图自定义控件，实现叠加柱形图，适用于简单的几个柱的情况，如果复杂的柱状图建议使用MPAndroidChart和HelloChart这两个开源库。

3.实现原理

demo.png

每个柱形图分为三段，一段是红色框部分称为第二柱，第二段为绿色框部分称为第一柱，第三段为蓝色框部分为数据显示。
首先新建BarChartView继承View，原理就是根据柱形图父控件的高度和y轴的最大值算出柱状图的应有高度，如父控件高度为300，y轴最大值为5k，柱形图的数据为3k,那么柱形图的高度 = 3/5*父控件总高度，在根据柱形图高度计算坐标，画矩形，有了第一柱的坐标再计算第二柱和数据的坐标就简单了。
如下：

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取每个柱的宽度
        int barWidth = getRight() - getLeft();
        //获取总高度
        int totalHeight = canvas.getHeight();
        //画第二柱
        float secondBarHeight = (dataSecond / yMax )* totalHeight;
        float y = totalHeight - secondBarHeight;
        float x = getLeft();
        canvas.drawRect(x,y,x+barWidth,totalHeight,barPaint1);
        //画第一柱
        float firstBarHeght = (dataFirst / yMax )* totalHeight;
        float firstY = totalHeight - firstBarHeght;
        canvas.drawRect(x,firstY,x+barWidth,y,barPaint);
        //画文字
        Rect rect = new Rect();
        textPaint.getTextBounds(String.valueOf(text), 0, String.valueOf(text).length(), rect);
        int w = rect.width();
        int h = rect.height();
        canvas.drawText(String.valueOf(text),(x+barWidth)/2 - w/2,firstY - h/2 - textMagin,textPaint);
    }

4.用法
在xml中声明

  android:layout_width="30dp"  //必须为柱形图设置宽度，必须是固定值
  app:firstBarColor="@color/colorAccent" //第一柱的颜色值
  app:secondeBarColor="@color/colorPrimary" //第二柱颜色值
  app:textColor="@color/colorPrimaryDark" //数据的颜色值
  app:textSize="12sp" //数据文字大小
  app:textMargin="15dp" //数据和柱形图距离

在java中设置数据

chartView1 = (BarChartView) findViewById(R.id.bar_view1);
chartView1.setData(1000,800,5000,"1000");

demo.png

找到ChartView控件，调用setData方法设置数据，setData方法的四个参数，第一个参数1000为图中绿色框的数据，第二个参数为图中红色框的数据，第三个参数为y轴的最大值，图中为5k，第四个参数为蓝色框中显示的数据，这样就可以了，用着很简单有没有。至于横纵轴用布局画上去就可以了，我这里用了比重做的。这样这个叠加柱状图的效果就实现了，如果需要动画效果的可以自己加上动画。

5.代码
BarChartView

public class BarChartView extends View {
    Paint textPaint; //文字画笔
    Paint barPaint; //第二柱形图画笔
    Paint barPaint1;//第一柱形图画笔

    int textColor = 0xDDFFFFFF;//文字颜色
    int barColor = 0xDDFF9246; //第二柱形图画笔颜色
    int barColor1 = 0xDDFFAC72;//第一柱形图画笔颜色

    float dataFirst; //第一柱形图数据
    float dataSecond; //第二柱形图数据

    float yMax;//y轴最大数据

    int textMagin = 5; //文字与柱形图距离
    int textSize = 18; //文字大小
    String text; //文字

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

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

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

    private void initPaint(Context context) {
        //获取屏幕宽度
        DisplayMetrics dm = context.getResources().getDisplayMetrics();
        int mScreenWidth = dm.widthPixels;
        int mScreenHeight = dm.heightPixels;

        //以分辨率为720*1080准，计算宽高比值,根据屏幕比例计算文字大小
        float ratioWidth = (float) mScreenWidth / 720;
        float ratioHeight = (float) mScreenHeight / 1080;
        float ratioMetrics = Math.min(ratioWidth, ratioHeight);
        int textSize = Math.round(this.textSize * ratioMetrics);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);

        barPaint = new Paint();
        barPaint.setAntiAlias(true);
        barPaint.setColor(barColor);

        barPaint1 = new Paint();
        barPaint1.setAntiAlias(true);
        barPaint1.setColor(barColor1);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取每个柱的宽度
        int barWidth = getRight() - getLeft();
        //获取总高度
        int totalHeight = canvas.getHeight();
        //画第二柱
        float secondBarHeight = (dataSecond / yMax )* totalHeight;
        float y = totalHeight - secondBarHeight;
        float x = getLeft();
        canvas.drawRect(x,y,x+barWidth,totalHeight,barPaint1);
        //画第一柱
        float firstBarHeght = (dataFirst / yMax )* totalHeight;
        float firstY = totalHeight - firstBarHeght;
        canvas.drawRect(x,firstY,x+barWidth,y,barPaint);
        //画文字
        Rect rect = new Rect();
        textPaint.getTextBounds(String.valueOf(text), 0, String.valueOf(text).length(), rect);
        int w = rect.width();
        int h = rect.height();
        canvas.drawText(String.valueOf(text),(x+barWidth)/2 - w/2,firstY - h/2 - textMagin,textPaint);
    }

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

    /**
     * 设置柱型数据
     * @param dataFirst 第一柱的数据值
     * @param dataSecond 第二柱的数据值
     * @param yMax Y轴的最大值
     * @param text 柱上显示的文字
     */
    public void setData(float dataFirst,float dataSecond,float yMax,String text) {
        this.dataSecond = dataSecond;
        this.yMax = yMax;
        this.dataFirst = dataFirst;
        this.text = text;
        invalidate();
    }


    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public void setBarColor(int barColor) {
        this.barColor = barColor;
    }

    public void setBarColor1(int barColor1) {
        this.barColor1 = barColor1;
    }

    public void setTextMagin(int textMagin) {
        this.textMagin = textMagin;
    }

    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }
}

attr.xml

可以直接拷贝过去使用了...