绘完报表,饼图,接下来就绘制柱形图,柱形很容易,就是画线和框就行了。我分别绘制一个竖向的,一个横向的柱形图。
效果图如下:
附上代码:
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: http://blog.csdn.net/xcl168