Android自定义View柱状图数据分析器

来源:互联网 发布:武汉广电网络收费标准 编辑:程序博客网 时间:2024/06/04 23:28

最近需要实现一个柱状图的数据分析View,在这儿记录下来,最终实现的效果:

这里写图片描述

柱状图说白了也是一个个矩形拼凑而成。Canvas绘制矩形方法:

public void drawRect(float left, float top, float right, float bottom, Paint paint)

参数比较简单,主要是靠4段距离,形成2个对角点来确定矩形的大小和在View中的位置。
效果图当中除了一个个的柱子,还有左边的类别,所以先要减去这段距离如下图:

这里写图片描述

测量距离代码如下(具体大家根据自己的换算):

@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    float width = getMeasuredWidth();    float height = getMeasuredHeight();    //左边类别距离    leftSort_width = (float) (width * 0.1);    columnWidth = (width - leftSort_width);    //减去下面类别    columnHeight = (height - leftSort_width);}

开画:

@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    //左边类别    if (leftSort != null) {    int length = leftSort.length;    float txtY = columnHeight / (length-1);    for (int i = 0; i < length; i++) {    float y = i == 0 ? i * txtY + 30 : i * txtY;    canvas.drawText(leftSort[i], leftSort_width / 2, y, mTxtSortPaint);        }    }    startX = leftSort_width;    //画柱    if (mColumnList != null) {    int size = mColumnList.size();    float averageWidth = columnWidth / size;    float currentWidth = (float) (averageWidth * 0.3);    float blankWidth = (float) (averageWidth * 0.4);    for (int i = 0; i < size; i++) {    Column column = mColumnList.get(i);    //底部类别    canvas.drawText(column.getSort(), startX, columnHeight + 30, mTxtSortPaint);    //当前时间段    canvas.drawRect(startX, (float) (columnHeight * (1-column.getCurrentTime())), startX += currentWidth, columnHeight,                 mColumnNowPaint);    //上一时间段    canvas.drawRect(startX, (float) (columnHeight * (1-column.getLastTime())), startX += currentWidth, columnHeight, mColumnLastPaint);    //空白间隔    startX += blankWidth;        }    }    canvas.save();}
ColumnAnalyser custom_analyser = (ColumnAnalyser) findViewById(R.id.custom_analyser);custom_analyser.setPaintsColor(new String[]{"#BEC0C4","#73A5F4","#EBEAE8"});List<Column> columnList = new ArrayList<>();columnList.add(new Column(0.5,0.7,"周一"));columnList.add(new Column(0.65,0.6,"周二"));columnList.add(new Column(0.8,0.5,"周三"));columnList.add(new Column(0.7,0.9,"周四"));columnList.add(new Column(0.78,0.68,"周五"));columnList.add(new Column(0.77,0.58,"周六"));columnList.add(new Column(0.82,0.78,"周日"));custom_analyser.initAnalyser(new String[]{"50","40","30","20","10"," 0"},columnList);

不足之处大家多多包涵,还需要进一步的完善:
github地址:https://github.com/yangjiechina/ColumnAnalyser

原创粉丝点击