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

     弄完柱形图后，忽然发现，做折线图变得很容易了。马上 就弄了张折线图和折线与柱形图出来。

效果图:

 主要是利用了Android的Path，这个在这种情况下真很有用。

  附上代码:

package com.xcl.canvas03;

/**
 * Canvas练习 
 * 	  自已画饼图和柱形图，实现出来后觉得也算实用.
 *   折线图及折线与柱形的混合图
 * author:xiongchuanliang
 * date:2014-4-6
 */

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Typeface;
import android.graphics.Path.Direction;
import android.graphics.RectF;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;

@SuppressLint("NewApi")
public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//setContentView(R.layout.activity_main);
		
		//setContentView(new PanelRpt(this)); //饼图
		//setContentView(new PanelBar(this)); //柱形图		
		setContentView(new PanelLnChart(this)); //折线图
		
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
	
	
class PanelLnChart extends View {
		
		private int ScrHeight;
		private int ScrWidth;
						
		private Paint[] arrPaintArc;
		private Paint PaintText = null;		
		
		final int[] colors = new int[]{			
				R.color.red,
				R.color.white,
				R.color.green,
				R.color.yellow,
				R.color.blue,				
			};
		
		//饼图演示用的比例,实际使用中，即为外部传入的比例参数
		final float arrPer[] = new float[]{20f,30f,10f,40f};
		
		//柱形图演示用的比例,实际使用中，即为外部传入的比例参数
		private final int[] arrNum = {1,4,3,2};
		
		public PanelLnChart(Context context){
			super(context);
			
			//解决4.1版本 以下canvas.drawTextOnPath()不显示问题			
			this.setLayerType(View.LAYER_TYPE_SOFTWARE,null);
			
			//屏幕信息
			DisplayMetrics dm = getResources().getDisplayMetrics();
			ScrHeight = dm.heightPixels;
			ScrWidth = dm.widthPixels;
						
			//设置边缘特殊效果
		    BlurMaskFilter PaintBGBlur = new BlurMaskFilter(
		    						1, BlurMaskFilter.Blur.INNER);

			arrPaintArc = new Paint[5];	
			Resources res = this.getResources();
			for(int i=0;i<5;i++)
			{
				arrPaintArc[i] = new Paint();			
				arrPaintArc[i].setColor(res.getColor(colors[i] )); 
				
				arrPaintArc[i].setStyle(Paint.Style.FILL);
				arrPaintArc[i].setStrokeWidth(4);
				arrPaintArc[i].setMaskFilter(PaintBGBlur);
			}
				
			PaintText = new Paint();
			PaintText.setColor(Color.BLUE);
			PaintText.setTextSize(30);
			PaintText.setTypeface(Typeface.DEFAULT_BOLD);
		}
		
		public void onDraw(Canvas canvas){
			//画布背景
			canvas.drawColor(Color.WHITE);
					
			//饼图标题
			canvas.drawText("自绘折线图", 100,50, PaintText);	
			
			arrPaintArc[0].setTextSize(25);
			arrPaintArc[3].setTextSize(25);			
			arrPaintArc[0].setStyle(Paint.Style.STROKE);
			
			int i= 0;		
			
			int lnWidth = 10; //标识线宽度
			int lnSpace = 40; //标识间距
			
			int startx = 120;
			int endx = startx + 20;
			
			int starty =  ScrHeight / 3 ;
			int endy = ScrHeight / 3 ;
			
			int initX = startx;
			int initY = starty;
			
			int rectHeight = 10; //柱形框高度
			
			/////////////////////////
		    //折线图
		    ///////////////////////////
			// Y 轴  标识线和值
			int yCount = 5;
			for(i=0; i<yCount; i++) 
			{				
				starty =  initY - (i+1) * lnSpace;
				endy = starty;				
				if(i == 0) continue;
				//画折线
				canvas.drawLine( initX  ,starty + lnSpace ,startx + yCount * lnSpace ,starty + lnSpace, PaintText);
				
				canvas.drawText(Integer.toString(i), initX - 30,endy + lnSpace, PaintText);							
			}
				
			// Y 轴
			canvas.drawLine( startx ,starty ,initX ,initY, PaintText);
			
			//用于画折线	
			Path p = new Path();
			p.moveTo(initX,initY);			
			//X 轴					 			 
			for(i=0; i< arrNum.length; i++) 
			{				 
			    startx=  initX + (i+1) * lnSpace;
				endx = startx;
				
				canvas.drawLine( startx  ,initY ,startx ,endy, PaintText);
				
				//标识文字
				canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[0]);
				//画折线			
				p.lineTo(startx ,initY  -  arrNum[i] * lnSpace);								
			}
			 canvas.drawLine( initX ,initY  ,ScrWidth - 10  ,initY, PaintText);
			//画折线
			 canvas.drawPath(p,arrPaintArc[0]);			 
			 //////////////////////////////////////////////////////////////////
		 	/////////////////////////
		    //折线图与横向柱形图的混合
		    ///////////////////////////
		    startx = 120;// ScrWidth / 2 - 50;
			endx = startx + 20;
			
			starty = ScrHeight - ScrHeight / 3 ;
			endy = ScrHeight - ScrHeight / 3 ;
			
			initX = startx;
			initY = starty;		
			
			// Y 轴  标识线和值
			for(i=0; i<5; i++) 
			{				
				starty =  initY - (i+1) * lnSpace;
				endy = starty;				
				if(i == 0) continue;
				canvas.drawLine( startx - lnWidth  ,starty + lnSpace ,initX,endy + lnSpace, PaintText);
				canvas.drawText(Integer.toString(i), initX - 30,endy + lnSpace, PaintText);							
			}
				
			// Y 轴
			canvas.drawLine( startx ,starty ,initX ,initY, PaintText);
			
		    //用于画折线
			Path p2 = new Path();
			p2.moveTo(initX,initY);
			
			//X 轴					 			 
			for(i=0; i< arrNum.length; i++) 
			{				 
			    startx=  initX + (i+1) * lnSpace;
				endx = startx;
				//柱形
				canvas.drawRect(startx - rectHeight  ,initY,
						startx + rectHeight  ,initY  -  arrNum[i] * lnSpace, arrPaintArc[3]);
				
				//标识文字
				canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[3]);
				//画折线
				p2.lineTo(startx  ,initY  -  arrNum[i] * lnSpace);
				
				// 	p2.lineTo(startx + rectHeight  + lnWidth ,initY  -  arrNum[i] * lnSpace);	
			}
			 canvas.drawLine( initX ,initY  ,ScrWidth - 10  ,initY, PaintText);
			//画折线
			 canvas.drawPath(p2,arrPaintArc[0]);
			/////////////////////////////// 
			 
			
		}		
	}
}

 附其它绘制图表的链接:

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

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

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

  MAIL: [email protected]

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

Android Canvas练习(4)自已绘折线图,,5-wow.com