绘完报表，饼图，接下来就绘制柱形图，柱形很容易，就是画线和框就行了。我分别绘制一个竖向的，一个横向的柱形图。

效果图如下:

附上代码:



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)); } @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 PanelBar 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 PanelBar(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); 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 轴 标识线和值 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); //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[0]); //标识文字 canvas.drawText(Integer.toString(arrNum[i]), startx ,initY + lnSpace, arrPaintArc[0]); } canvas.drawLine( initX ,initY ,ScrWidth - 10 ,initY, PaintText); ////////////////////////////////////////////////////////////////// ///////////////////////// //横向柱形图 /////////////////////////// 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<arrNum.length; i++) { starty = initY - (i+1) * lnSpace; //起始线要提高一位 endy = starty; canvas.drawLine( startx - lnWidth ,starty ,initX,endy , PaintText); //文字 偏移30，下移10 canvas.drawText(Integer.toString(arrNum[i]), initX - 30,endy + 10, arrPaintArc[3]); //柱形 canvas.drawRect(initX ,endy, initX + arrNum[i] * lnSpace ,endy + rectHeight, arrPaintArc[3]); } // Y 轴 canvas.drawLine( startx ,starty - 30 ,initX ,initY , PaintText); // X 轴 刻度与标识 for(i=0; i< 6 ; i++) { startx= initX + (i+1) * lnSpace; endx = startx; //canvas.drawLine( startx ,initY ,startx ,initY + lnSpace, PaintText); canvas.drawLine( startx ,initY ,startx ,endy, PaintText); //文字右移10位 canvas.drawText(Integer.toString(i + 1), startx - 10,initY + lnSpace, PaintText); } // X 轴 canvas.drawLine( initX ,initY ,ScrWidth - 10 ,initY, PaintText); /////////////////////////////// } } } 代码很简单，不多做说明了。 不过有个地方要注意，实际值与刻度的关系在这个Demo中并没做处理噢。

附其它绘制图表的链接:


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


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

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


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

MAIL: xcl_168@aliyun.com

BLOG: