自定义柱状图

自定义柱状图

在网上查了好多还是没有找到自己想要的。但是找到了一个比较相近的。初来乍到,第一次写博客。好紧张

先附上资料
这里写链接内容
我是根据他写的自己改造的,还请博主谅解。

先看效果

这里写图片描述

这里的数据都是需要手动传的

直接上代码吧:

public class CustomBarChartView extends View {

    private String COLOR = "";
    private int hPerHeig;
    private int relativeHeight;


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

    public CustomBarChartView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    //  坐标轴 轴线 画笔:
    private Paint mlinePaint;

    //  坐标轴水平内部 虚线画笔
    private Paint mlinePaintDott;

    //  绘制文本的画笔
    private Paint titlePaint;

    //  矩形画笔 柱状图的样式信息
    private Paint recPaint;

    /**
     * 初始化
     *
     * @param context
     * @param attrs
     */
    private void init(Context context, AttributeSet attrs) {
        mlinePaint = new Paint();
        mlinePaintDott = new Paint();
        titlePaint = new Paint();
        recPaint = new Paint();

        mlinePaint.setColor(Color.DKGRAY);
        mlinePaintDott.setColor(Color.LTGRAY);
        titlePaint.setColor(Color.BLACK);

    }

    //矩形数据
    private int[] rectDate;

    //x轴数据
    private String[] xTitles;

    //y轴数据
    private String[] yTitlesStrings;

    //矩形蓝色的数据
    private int[] rectBlueDate;

    /**
     * 更新矩形数据
     *
     * @param thisData
     * @param color
     */
    public void updateRectData(int[] thisData, String color) {
        rectDate = thisData;
        COLOR = color;
        this.postInvalidate();
    }


    /**
     * 更新矩形数据
     *
     * @param thisDataBlue
     */
    public void updateBlueRectData(int[] thisDataBlue) {
        rectBlueDate = thisDataBlue;
        this.postInvalidate();
    }


    /**
     * 更新x轴数据
     *
     * @param xTitle
     */
    public void updateXText(String[] xTitle) {
        xTitles = xTitle;
        this.postInvalidate();
    }

    /**
     * 更新y轴数据
     *
     * @param yTitlesString
     */
    public void updateYText(String[] yTitlesString, int danwei) {
        yTitlesStrings = yTitlesString;
        relativeHeight = danwei;
        this.postInvalidate();
    }

    /**
     * 重写onDraw()方法
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int width = getMeasuredWidth();

        // 1. 画线
        canvas.drawLine(80, 5, 80, 320, mlinePaint);
        canvas.drawLine(80, 320, width - 10, 320, mlinePaint);

        // 2 绘制坐标内部的水平线   横向的
        int leftHeight = 300;
        int hPerHeight = leftHeight / 10;
        mlinePaintDott.setTextAlign(Paint.Align.CENTER);
        mlinePaintDott.setTextSize(25);
        mlinePaintDott.setAntiAlias(true);
        for (int i = 0; i < 11; i++) {
            canvas.drawLine(80, leftHeight - (hPerHeight * i), width - 5, leftHeight - (hPerHeight * i), mlinePaintDott);
        }

        // 3,绘制坐标内部的水平线   竖直方向的的
        for (int i = 0; i < 30; i++) {
            canvas.drawLine(80 + (i + 1) * 20, 0, 80 + (i + 1) * 20, 320, mlinePaintDott);
        }

        // 3 绘制 Y 轴方向的数据
        if (yTitlesStrings != null && yTitlesStrings.length > 0) {
            Paint.FontMetrics metrics = titlePaint.getFontMetrics();
            //相对高度
            hPerHeig = leftHeight / (yTitlesStrings.length - 1);
            int descent = (int) metrics.descent;
            titlePaint.setTextAlign(Paint.Align.RIGHT);
            titlePaint.setTextSize(20);
            titlePaint.setAntiAlias(true);
            for (int i = 0; i < yTitlesStrings.length; i++) {
                canvas.drawText(yTitlesStrings[i], 70, 20 + i * hPerHeig + descent, titlePaint);
            }
        }
        int step = 0;

        // 4  绘制 X 轴方向数据
        if (xTitles != null) {
            int xAxisLength = width - 110;  
            int columCount = xTitles.length + 1;
            step = xAxisLength / columCount;

            for (int i = 0; i < columCount - 1; i++) {
                canvas.drawText(xTitles[i], 110 + step * (i + 1), 360, titlePaint);
            }
        }

        /**红色的*/
        if (rectDate != null && rectDate.length > 0) {
            int thisCount = rectDate.length;

            for (int i = 0; i < thisCount; i++) {  
                int value = rectDate[i];
                int i1 = relativeHeight / hPerHeig;
                int i2 = value / i1;
                int top = leftHeight + 20 - i2;

                if (COLOR == "RED") {
                    recPaint.setColor(Color.RED);
                }else {
                    recPaint.setColor(Color.parseColor("#3299cc"));
                }
                Rect rect = new Rect();

                rect.left = 100 + step * (i + 1) - 10;
                rect.right = 100 + step * (i + 1) + 10;
                L.i("top :" + top);

                rect.top = top;
                rect.bottom = 320;
                canvas.drawRect(rect, recPaint);

            }
        }

        /**蓝色的*/
        if (rectBlueDate != null && rectBlueDate.length > 0) {
            int thisCount = rectBlueDate.length;
            for (int i = 0; i < thisCount; i++) {
                int value = rectBlueDate[i];
                int i1 = relativeHeight / hPerHeig;
                int i2 = value / i1;
                int top = leftHeight + 20 - i2;

                recPaint.setColor(Color.parseColor("#3299cc"));
                Rect rect = new Rect();

                rect.left = 100 + step * (i + 1) - 40;
                rect.right = 100 + step * (i + 1) - 20;

                rect.top = top;
                rect.bottom = 320;

                canvas.drawRect(rect, recPaint);

            }
        }

    }

    public void updateAllDate() {
        postInvalidate();
    }
}

因为我这个项目数据有些大,而且是可变的。所以X轴 和 Y轴的数据也是我代码计算好之后设置进来的。

如果你想要使用的话,可以直接在这个类里面写死X轴 和 Y轴的数据。也可以直接调用上面的四个update方法;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值