Android绘制折线图、柱状图等

来源：点击打开链接

简洁明了~

 很多时候，做一些统计数据，可能放到列表里面看起来不太直观，这个时候借助于折线图，饼状图，柱形图等报表图形展示，即直观，又可以一目了然的明白数据的趋势变化，而且安卓应用，最主要的就是用户和界面交互，一个良好的界面，对用户来说，能起的作用不亚于内存，响应速度等的优化效果。

   

        如何实现一个自定义的折线图呢，当然，你得继承自View，然后写好你的带参构造方法，并且为了考虑以后代码的复用性，把很多能够影响图表的条件都提到全局变量上，这样就能在以后随时随地为你的控件切换不同的皮肤和效果。例如：X轴， Y轴， 线颜色， 点颜色，填充颜色等等

具体代码：

[java]  view plain  copy

 

1. private int bgColor = Color.rgb(Integer.parseInt("4d", 16),  
2.         Integer.parseInt("af", 16), Integer.parseInt("ea", 16));// 整体的背景色  
3.   
4. private int singleColumnFillColor = Color.rgb(Integer.parseInt("e7", 16),  
5.         Integer.parseInt("e7", 16), Integer.parseInt("e9", 16));// 单数列的背景色  
6.   
7. private int doubleColumnFillColor = Color.rgb(Integer.parseInt("4d", 16),  
8.         Integer.parseInt("af", 16), Integer.parseInt("ea", 16));// 单数行的背景色  
9.   
10. private int fillDownColor = Color.rgb(Integer.parseInt("45", 16),  
11.         Integer.parseInt("64", 16), Integer.parseInt("bf", 16));// 填充下面部分的背景色  
12.   
13. private int xyLineColor = Color.rgb(Integer.parseInt("a9", 16),  
14.         Integer.parseInt("d8", 16), Integer.parseInt("f5", 16));// 表格的线颜色  
15.   
16. private int chartLineColor = Color.WHITE;// 绘制趋势线的颜色  
17.   
18. private int shadowLineColor = Color.rgb(Integer.parseInt("1a", 16),  
19.         Integer.parseInt("49", 16), Integer.parseInt("84", 16));// 趋势线阴影的颜色  
20.   
21. private String yUnit = "";// Y轴单位  
22.   
23. private boolean isDrawY = false;// 是否绘制Y轴  
24.   
25. private boolean isDrawX = true;// 是否绘制X轴  
26.   
27. private boolean isDrawInsideX = true;// 是否绘制内部的X轴  
28.   
29. private boolean isDrawInsedeY = false;// 是否绘制内部的Y轴  
30.   
31. private boolean isFillDown = false;// 是否填充点的下面部分  
32.   
33. private boolean isFillUp = false;// 是否填充点的上面部分（暂未实现）  
34.   
35. private boolean isAppendX = true;// X轴是否向左突出一点  
36.   
37. private boolean isDemo = true;// 是否demo测试数据  
38.   
39. private int ScreenX;// view的宽度  
40.   
41. private int ScreenY;// view的高度  
42.   
43. private int numberOfX = 6;// 默认X轴放6个值  
44.   
45. private int numberOfY = 5;// 默认Y轴放5个值（越多显示的值越精细）  
46.   
47. private int paddingTop = 30;// 默认上的padding  
48.   
49. private int paddingLeft = 70;// 默认左的padding  
50.   
51. private int paddingRight = 30;// 默认右的padding  
52.   
53. private int paddingDown = 50;// 默认下的padding  
54.   
55. private int appendXLength = 10;// 向左X轴突出的长度  
56.   
57. private float maxNumber = 0;// Y轴最大值  
58.   
59. private List<List<Float>> pointList;// 传入的数据  
60.   
61. private List<Integer> bitmapList;// 传入的点资源id  
62.   
63. private List<Integer> lineColorList;// 传入的线颜色  
64.   
65. private List<String> titleXList;// 传入的X轴标题  
66.   
67. private List<String> titleYList;// 计算得出的Y轴标题  

然后当然就要考虑我们的view需要的大小了，这个时候onmeasure方法就需要登场了，在这里面根据你在layout中为view分配的width和height，得出实际我们要给画布的width和height

[java]  view plain  copy

 

1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
2.   
3.        int measuredHeight = measureHeight(heightMeasureSpec);  
4.   
5.        int measuredWidth = measureWidth(widthMeasureSpec);  
6.   
7.        setMeasuredDimension(measuredWidth, measuredHeight);  
8.   
9.        ScreenX = measuredWidth;  
10.   
11.        ScreenY = measuredHeight;  
12.   
13.    }  
14.   
15.    private int measureHeight(int measureSpec) {  
16.   
17.        int specMode = MeasureSpec.getMode(measureSpec);  
18.        int specSize = MeasureSpec.getSize(measureSpec);  
19.   
20.        int result = 300;  
21.        if (specMode == MeasureSpec.AT_MOST) {  
22.   
23.            result = specSize;  
24.        }  
25.        else if (specMode == MeasureSpec.EXACTLY) {  
26.   
27.            result = specSize;  
28.        }  
29.   
30.        return result;  
31.    }  
32.   
33.    private int measureWidth(int measureSpec) {  
34.        int specMode = MeasureSpec.getMode(measureSpec);  
35.        int specSize = MeasureSpec.getSize(measureSpec);  
36.   
37.        int result = 450;  
38.        if (specMode == MeasureSpec.AT_MOST) {  
39.            result = specSize;  
40.        }  
41.   
42.        else if (specMode == MeasureSpec.EXACTLY) {  
43.   
44.            result = specSize;  
45.        }  
46.   
47.        return result;  
48.    }  

接着，就要考虑实现折现图的画布了，也就是ondraw方法，先考虑下拆分折线图；我们可以想下，折线图可以拆成几部分呢？可能看上面定义的全局变量能够发现我这里把折线图表拆分为了

1、最左侧的Y轴

2、最底部的X轴

3、图表内部的Y轴和X轴

4、折线图

5、标记点

这样，我们就明确了我们需要在ondraw里面画什么了（各种draw图形）

1、画Y轴

2、画X轴

3、画内部的X,Y轴

4、画折线

5、画点

当然，明确这一点还不够，因为我们知道在画布中draw的时候需要x和y的位置，这个位置怎么来呢，而且怎么根据外面传进来的值换算成画布中的点

这就需要用数学转换下啦：

计算X轴平均后的坐标

[java]  view plain  copy

 

1. private List<Point> initNumberOfX() {  
2.        int num = (ScreenX - paddingLeft - paddingRight) / (numberOfX - 1);  
3.        List<Point> list = new ArrayList<Point>();  
4.        for (int i = 0; i < numberOfX; i++) {  
5.            Point point = new Point();  
6.            point.y = ScreenY - paddingDown - paddingTop;  
7.            point.x = paddingLeft + num * i;  
8.            list.add(point);  
9.        }  
10.        return list;  

计算Y轴平均后的坐标

[java]  view plain  copy

 

1. private List<Point> initNumberOfY() {  
2.        int num = (ScreenY - paddingDown - paddingTop) / (numberOfY - 1);  
3.        List<Point> list = new ArrayList<Point>();  
4.        for (int i = 0; i < numberOfY; i++) {  
5.            Point point = new Point();  
6.            point.x = ScreenX - paddingLeft - paddingRight;  
7.            point.y = ScreenY - paddingDown - paddingTop - num * i;  
8.            list.add(point);  
9.        }  
10.        return list;  
11.    }  

拿到坐标了，这样折现的背景表格框就完全可以画出来了

[java]  view plain  copy

 

1. if (isDrawX) {  
2.            int appendX = 0;  
3.            if (isAppendX) {  
4.                appendX = appendXLength;  
5.            }  
6.            canvas.drawLine(paddingLeft - appendX, paddingTop + listY.get(0).y, listY.get(0).x  
7.                    + paddingLeft,  
8.                    paddingTop + listY.get(0).y, paint);  
9.        }  
10.        if (isDrawY) {  
11.            canvas.drawLine(listX.get(0).x, paddingTop, listX.get(0).x, listX.get(0).y + paddingTop  
12.                    , paint);  
13.        }  
14.        if (isDrawInsedeY) {// 绘制纵向的  
15.            for (Point point : listX) {  
16.                if (!isDrawX) {  
17.                    isDrawX = !isDrawX;  
18.                    continue;  
19.                }  
20.                canvas.drawLine(point.x, paddingTop, point.x, point.y + paddingTop, paint);  
21.            }  
22.        }  
23.        if (isDrawInsideX) {// 绘制横向的  
24.            for (Point point : listY) {  
25.                if (!isDrawY) {  
26.                    isDrawY = !isDrawY;  
27.                    continue;  
28.                }  
29.                int appendX = 0;  
30.                if (isAppendX) {  
31.                    appendX = appendXLength;  
32.                }  
33.                canvas.drawLine(paddingLeft - appendX, paddingTop + point.y, point.x + paddingLeft,  
34.                        paddingTop + point.y, paint);  
35.            }  
36.        }  

接下来为Y轴找到最大值以及它的每个标题

[java]  view plain  copy

 

1. private void setYTitle(List<Point> listY, Canvas canvas) {  
2.        Paint paint = new Paint();  
3.        paint.setColor(Color.WHITE);  
4.        if (pointList == null) {  
5.            titleYList = new ArrayList<String>();  
6.            for (int i = 1; i <= numberOfY; i++) {  
7.                titleYList.add(String.valueOf(100 / i));  
8.            }  
9.        } else {  
10.            for (int i = 0; i < pointList.size(); i++) {  
11.                for (int j = 0; j < pointList.get(i).size(); j++) {  
12.   
13.                    if (pointList.get(i).get(j) > maxNumber) {  
14.                        maxNumber = pointList.get(i).get(j);  
15.                    }  
16.                }  
17.            }  
18.            maxNumber = maxNumber + maxNumber / 3;//最大值  
19.            titleYList = new ArrayList<String>();  
20.            for (int i = 0; i < numberOfY; i++) {  
21.                titleYList.add(String.valueOf((int) (0 + i * (maxNumber / (numberOfY - 1)))));  
22.            }  
23.        }  
24.        for (int i = 0; i < numberOfY; i++) {  
25.            int appendX = 0;  
26.            if (isAppendX) {  
27.                appendX = appendXLength;  
28.            }  
29.            if (i != 0) {  
30.                canvas.drawText(titleYList.get(i), paddingLeft - appendX - paddingLeft / 3,  
31.                        paddingTop  
32.                                + listY.get(i).y, paint);  
33.            } else {  
34.                canvas.drawText(titleYList.get(i) + yUnit,  
35.                        paddingLeft - appendX - paddingLeft / 3, paddingTop  
36.                                + listY.get(i).y, paint);  
37.            }  
38.        }  
39.    }  

同样，有了坐标，设置X轴的标题也很简单啦，就不复述了

接着就该考虑怎么将外面传递进来的值转换成图里面的坐标了

[java]  view plain  copy

 

1. private List<List<Point>> countListPosition(List<Point> listX) {  
2.         List<List<Point>> positionList = new ArrayList<List<Point>>();  
3.         if (pointList == null) {  
4.             pointList = new ArrayList<List<Float>>();  
5.             List<Float> pointInList = new ArrayList<Float>();  
6.             for (int i = 0; i < numberOfX; i++) {  
7.                 pointInList.add(0f);  
8.             }  
9.             pointList.add(pointInList);  
10.         }  
11.         for (int i = 0; i < pointList.size(); i++) {  
12.             List<Point> positionInList = new ArrayList<Point>();  
13.             for (int j = 0; j < pointList.get(i).size(); j++) {  
14.                 Point point = new Point();  
15.                 Float z = pointList.get(i).get(j);  
16.                 point.x = listX.get(j).x;  
17.                 point.y = listX.get(j).y + paddingTop  
18.                         - (int) ((listX.get(j).y) * (float) z / (float) maxNumber);  
19.                 positionInList.add(point);  
20.             }  
21.             positionList.add(positionInList);  
22.         }  
23.         return positionList;  
24.     }  

这样拿到每个点的坐标后是不是整个折线图就可以画出来了

就是各种drawline啊，draw点啊

[java]  view plain  copy

 

1. private void drawChart(Canvas canvas, List<List<Point>> positionList) {  
2.         Paint paint = new Paint();  
3.         paint.setAntiAlias(true);  
4.         paint.setColor(chartLineColor);  
5.         paint.setStrokeWidth(3);// 默认线宽为3  
6.         Paint shadowPaint = new Paint();  
7.         shadowPaint.setAntiAlias(true);  
8.         shadowPaint.setColor(shadowLineColor);  
9.         shadowPaint.setStrokeWidth(1);// 默认线宽为3  
10.         shadowPaint.setAlpha(178);  
11.         for (int i = 0; i < positionList.size(); i++) {  
12.             if (lineColorList != null && lineColorList.get(i) != null) {  
13.                 paint.setColor(lineColorList.get(i));  
14.             }  
15.             for (int j = 0; j < positionList.get(i).size() - 1; j++) {  
16.                 canvas.drawLine(positionList.get(i).get(j).x, positionList.get(i).get(j).y + 2,  
17.                         positionList.get(i).get(j + 1).x, positionList.get(i).get(j + 1).y + 2,  
18.                         shadowPaint);//画折线的阴影  
19.                 canvas.drawLine(positionList.get(i).get(j).x, positionList.get(i).get(j).y,  
20.                         positionList.get(i).get(j + 1).x, positionList.get(i).get(j + 1).y, paint);//画折现  
21.             }  
22.         }  
23.     }  

这样，一个你自己定义的折线图就出来了，里面还有一些填充，覆盖等draw，通过这些美化后最终实现结果就是：

 

当然：有更好的第三方控件我们也可以使用，例如AChartEngine，这个控件也非常好用滴~

0分源码下载地址：点击打开链接