弄完柱形图后，忽然发现，做折线图变得很容易了。马上 就弄了张折线图和折线与柱形图出来。
效果图:
主要是利用了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]);
///////////////////////////////
}
}
}
附其它绘制图表的链接:
MAIL: xcl_168@aliyun.com
BLOG: http://blog.csdn.net/xcl168