Android Canvas 自已绘面积图(Area Chart)

需要在图表上画一些不规则的面积图，参考了以下这篇博客，感觉不错！修改一下，可以用了！

原文链接：http://blog.csdn.net/xcl168/article/details/23220197

本来当时只想做两个练练手后就快速越过Canvas的，对这块我一向兴趣不大，不过最近在绘了两个图后忽然发现，以前那些很常见的图

表，仔细想一下，如果不太讲求通用性，不考虑一些特效外，光图表本身， 自己简单的画出来，好像也不难。这样尝试尝试，自娱自乐下也蛮不错的。

      这不，我又画了个Area Chart，就用到drawLine和Path两个东东配合下透明度就实现了。

  效果图如下:

     

  至于怎么实现的，主要原理就是个Path加透明度的事，透明度自定了个公式计算出来，越到后面的越透明，

层次感就出来了。具体看看我的代码实现。    

[java] view plain copy

1. package com.xcl.chart;  
2.   
3. /** 
4.  * Canvas练习  
5.  *    自已画面积图(Area Chart) 
6.  *    
7.  * author:xiongchuanliang 
8.  * date:2014-4-8 
9.  */  
10.   
11.   
12. //import android.annotation.SuppressLint;  
13. import android.content.Context;  
14. //import android.content.res.Resources;  
15. import android.graphics.Canvas;  
16. import android.graphics.Color;  
17. import android.graphics.Paint;  
18. import android.graphics.Path;  
19. import android.graphics.Paint.Style;  
20. import android.util.DisplayMetrics;  
21. import android.view.View;  
22.   
23.   
24. public class PanelAreaChart extends View {  
25.       
26.     private int ScrHeight;  
27.     private int ScrWidth;  
28.                       
29.     private Paint[] arrPaint;  
30.     private Paint PaintText = null;       
31.     /* 
32.     final int[] colors = new int[]{                  
33.             R.color.red,     
34.             R.color.blue, 
35.             R.color.green, 
36.             R.color.yellow,          
37.             R.color.red1,    
38.             R.color.green1,  
39.             R.color.dark1,               
40.             R.color.blue1,   
41.             R.color.blue2,   
42.             R.color.blue3,   
43.             R.color.white, 
44.         }; 
45.     */  
46.       
47.     //RGB颜色数组  
48.         private final int arrColorRgb[][] = { {77, 83, 97},    
49.                                               {148, 159, 181},    
50.                                               {253, 180, 90},  
51.                                               {52, 194, 188},  
52.                                               {39, 51, 72},  
53.                                               {255, 135, 195},  
54.                                               {215, 124, 124},  
55.                                               {180, 205, 230}} ;  
56.           
57.   
58.       
59.     //Area chart图演示用的比例,实际使用中，即为外部传入的比例参数     
60.     private final int arrNumArea[][] = {{40,60,70,60,50,60},  
61.                                         {30,40,50,40,40,50},  
62.                                         {20,50,30,40,30,20}} ;  
63.       
64.       
65.     public PanelAreaChart(Context context){  
66.         super(context);  
67.   
68.         //屏幕信息  
69.         DisplayMetrics dm = getResources().getDisplayMetrics();  
70.         ScrHeight = dm.heightPixels;  
71.         ScrWidth = dm.widthPixels;  
72.   
73.         arrPaint = new Paint[8];      
74.         //Resources res = this.getResources();  
75.         for(int i=0;i<8;i++)  
76.         {  
77.             arrPaint[i] = new Paint();            
78.             //arrPaint[i].setColor(res.getColor(colors[i] ));   
79.             arrPaint[i].setARGB(255, arrColorRgb[i][0], arrColorRgb[i][1], arrColorRgb[i][2]);  
80.               
81.             arrPaint[i].setStyle(Paint.Style.FILL);  
82.             arrPaint[i].setStrokeWidth(4);    
83.         }  
84.               
85.         PaintText = new Paint();  
86.         PaintText.setColor(Color.BLUE);  
87.         PaintText.setTextSize(22);    
88.     }  
89.       
90.     public void onDraw(Canvas canvas){  
91.         //画布背景  
92.         canvas.drawColor(Color.WHITE);  
93.                   
94.         //饼图标题  
95.         canvas.drawText("自绘面积图(Area Chart)", 100,50, PaintText);      
96.           
97.         arrPaint[0].setTextSize(25);  
98.         arrPaint[3].setTextSize(25);              
99.         arrPaint[0].setStyle(Paint.Style.FILL_AND_STROKE);  
100.         arrPaint[0].setAlpha(50);  
101.           
102.         int i= 0;         
103.           
104.         int lnWidth = 10; //标识线宽度  
105.         int lnSpace = 50; //标识间距  
106.           
107.         int startx = 70;  
108.         int endx = startx + 20;  
109.           
110.         int starty =  ScrHeight/2  +150 ;  
111.         int endy = ScrHeight /2 +150 ;  
112.           
113.         int initX = startx;  
114.         int initY = starty;           
115.       
116.         int HLength = ScrWidth - 10; //横线宽度  
117.           
118.         /  
119.         //Area Chart  
120.         ///  
121.         // Y 轴  标识线和值  
122.         int yCount = 9;  
123.         for(i=0; i<yCount; i++)   
124.         {                 
125.             starty =  initY - (i+1) * lnSpace;  
126.             endy = starty;                
127.             if(i == 0) continue;  
128.             //画折线  
129.             //canvas.drawLine( initX  ,starty + lnSpace ,startx + yCount * lnSpace ,starty + lnSpace, PaintText);  
130.             canvas.drawLine( initX  ,starty + lnSpace ,HLength ,starty + lnSpace, PaintText);  
131.               
132.             //Y轴标注  
133.             canvas.drawText(Integer.toString(i * 10), initX - 35,endy + lnSpace, PaintText);                              
134.         }                 
135.         // 画出 Y 轴线  
136.         canvas.drawLine( startx ,starty ,initX ,initY, PaintText);  
137.           
138.         // X 轴轴标注             
139.         for(i =0; i< 6;i++)  
140.         {  
141.             startx=  initX + (i+1) * lnSpace;  
142.             endx = startx;                    
143.             //标识文字  
144.             canvas.drawText(Integer.toString(i +1 )+"月", initX + (i+1) * lnSpace  - lnSpace/2 ,initY  + 20, PaintText);  
145.         }  
146.         // 画出 X 轴线  
147.         canvas.drawLine( initX ,initY  ,HLength ,initY, PaintText);  
148.           
149.         //绘制面积图  
150.          for(i=0 ; i < arrNumArea.length ; i++) {   
151.             //用于画折线   
152.             Path p = new Path();  
153.             p.moveTo(initX,initY);                
154.                               
155.             int ColorNum = 0;  
156.             arrPaint[i].setStyle(Style.FILL);     
157.               
158.             //透明度。其取值范围是0---255,数值越小，越透明，颜色上表现越淡      
159.             //依公式算透明比例  
160.              int curAlpha = 255 - 200/arrNumArea.length*i;  
161.              arrPaint[i].setAlpha( curAlpha );                            
162.               
163.             for(int j=0 ; j< arrNumArea[i].length ; j++) {    
164.      
165.                 startx=  initX + (j+1) * lnSpace;  
166.                 endx = startx;  
167.                                   
168.                 //将传入值转为屏幕坐标位置, 其中值10只适应当前例子  
169.                 int yPos = initY -   lnSpace * (arrNumArea[i][j]/10);                     
170.                 p.lineTo(startx ,yPos );   
171.                   
172.                 //收尾，将path连接一气  
173.                 if(j == arrNumArea[i].length - 1)   
174.                 {  
175.                     p.lineTo(startx ,initY);      
176.                 }                                         
177.             }   
178.             canvas.drawPath(p,arrPaint[i]);       
179.         }   
180.           
181.         ///  
182.          canvas.drawText("author:xiongchuanliang", 10, ScrHeight - 180, PaintText);  
183.     }         
184. }  

   搞定。

附其它链接:

     Android Canvas练习(1)画一张报表来玩   

   Android Canvas练习(2)自已绘饼图

   Android Canvas练习(3)自已绘柱形图

   Android Canvas练习(4)自已绘折线图

MAIL: xcl_168@aliyun.com

BLOG: http://blog.csdn.net/xcl168