Android canvas繪制柱形統計圖
如今非常多應用都須要一些統計圖。眼下第三方的統計圖也有非常多。可是在自己看來僅僅要不是特別耽誤時間還是選擇用canvas自己繪制比較合理。依賴於第三方的繪制在需求上也榮easy有一定出入，並且也不easy擴展，所以自己就依據需求繪制了一些統計圖，以下就是我繪制的柱狀統計圖，能夠依據給定高和寬來自適應，不懂的地方能夠留言聯系我。
首先寫一個基類，將公用的模塊提取出來，這也體現設計模式中的抽象工廠模式和模板模式，以下是基類，一些共同處理的代碼也能夠放到BaseChartView裏面。可是因為時間問題，這些會後期進行優化
import java.util.ArrayList;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
public abstract class BaseChartView extends View {
protected Context context;
public ChartView(Context context) {
super(context);
this.context= context;
}
public ChartView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context= context;
}
public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context= context;
}
/** 返回最大值 **/
protected double getMaxArray(ArrayList<Double> array) {
if (array.size() == 0)
return 0;
double max = array.get(0);
for (double i : array) {
max = max > i ? max : i;
}
return max;
}
/** 返回最小值 **/
protected double getMinArray(ArrayList<Double> array) {
if (array.size() == 0)
return 0;
double min = array.get(0);
for (double i : array) {
min = min < i ? min : i;
}
return min;
}
protected int px2sp(float pxValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (pxValue / scale + 0.5f);
}
protected int sp2px( float spValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (spValue * scale + 0.5f);
}
/**
* 依據手機的分辨率從 dp 的單位 轉成為 px(像素)
*/
protected int dip2px(float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
}
以下就繼承這個基類來進行畫圖了：
import java.util.ArrayList;
import java.util.List;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Paint.FontMetricsInt;
import android.graphics.PathEffect;
import android.graphics.Rect;
import android.text.Layout.Alignment;
import android.text.StaticLayout;
import android.text.TextPaint;
import android.util.AttributeSet;
public class BarChartView extends BaseChartView{
private List<Double> data_total = new ArrayList<Double>();
private List<String> data_title = new ArrayList<String>();
private float margin;
private Paint paint;
private float total_y = 0;
private float scale;
private float scaleWidth;
private int width;
private int textSize;
public BarChartView(Context context, ArrayList<Double> data_total,
ArrayList<String> data_title) {
super(context);
this.context = context;
width = getResources().getDisplayMetrics().widthPixels;
this.data_total = data_total;
this.data_title = data_title;
total_y = (float) (getMaxArray(data_total) * 1.2);
scale = width / (3 * total_y);
scaleWidth = width * 9 / (20 * data_total.size() - 10);
paint = new Paint();
paint.setAntiAlias(true);
margin = scaleWidth;
textSize = sp2px( 9);
}
public BarChartView(Context context, AttributeSet attrs) {
super(context, attrs);
width = getResources().getDisplayMetrics().widthPixels;
this.context = context;
paint = new Paint();
paint.setAntiAlias(true);
}
public void setData(ArrayList<Double> data_total,
ArrayList<String> data_title) {
this.data_total = data_total;
this.data_title = data_title;
total_y = (float) (getMaxArray(data_total) * 1.2);
scale = width / (3 * total_y);
scaleWidth = width * 9 / (20 * data_total.size() - 10);
margin = scaleWidth;
textSize = sp2px(9);
invalidate();
}
public void drawAxis(Canvas canvas) {
// paint.setColor(Color.YELLOW) ;
paint.setStrokeWidth(1);
PathEffect effects = new DashPathEffect(new float[] { width / 60,
width / 100, width / 50, width / 100 }, 1);
paint.setPathEffect(effects);
paint.setColor(Color.parseColor("#FFD1D1D1"));
canvas.drawLine(width / 36, scale * total_y + 0.5f, width * 31 / 32,
scale * total_y + 0.5f, paint);
// canvas.drawLine(30, 20, 30, 300, paint) ;
int x = (int) width / 20;
// paint.setTextAlign(Paint.Align.CENTER);
FontMetricsInt fontMetrics = paint.getFontMetricsInt();
// 轉載請註明出處：http://blog.csdn.net/hursing
paint.setTextSize(textSize);
paint.setColor(Color.parseColor("#00000000"));
for (int i = 0; i < data_title.size(); i++) {
TextPaint textPaint = new TextPaint();
textPaint.setTextSize(textSize);
textPaint.setStrokeWidth(2);
textPaint.setTextAlign(Paint.Align.CENTER);
String aboutTheGame = data_title.get(i);
StaticLayout layout = new StaticLayout(aboutTheGame, textPaint,
(int) margin * 5 / 4, Alignment.ALIGN_NORMAL, 1.0F, 0.0F,
true);
// canvas.translate((int) (x-margin/2),(int) (scale*total_y+5));
Rect targetRect = new Rect((int) (x - margin / 4), (int) (scale
* total_y + 5), (int) (x + margin * 5 / 4), (int) (scale
* total_y * 1.2 + 5));
canvas.drawRect(targetRect, paint);
// canvas.drawText(i + 1 + "gg", x, (float) (scale*total_y+20),
// paint) ;
int baseline = (targetRect.top - fontMetrics.bottom);
textPaint.setColor(Color.parseColor("#000000"));
canvas.translate(targetRect.centerX(), baseline);
layout.draw(canvas);
x += margin * 2;
canvas.translate(-targetRect.centerX(), -baseline);
}
}
public void drawChart(Canvas canvas) {
// paint.setColor(Color.GREEN) ;
paint.setTextAlign(Paint.Align.CENTER);
float temp = width / 20;
paint.setTextSize(textSize);
for (int i = 0; i < data_total.size(); i++) {
// chart.drawSelf(canvas, paint) ;
paint.setColor(Color.parseColor("#4f91e1"));
Rect targetRect = new Rect((int) temp,
(int) (scale * (total_y - data_total.get(i))),
(int) (temp + margin), (int) (scale * total_y));
if (data_total.get(i) != 0) {
canvas.drawRect(targetRect, paint);
}
int baseline = targetRect.top - 10;
paint.setColor(Color.parseColor("#000000"));
canvas.drawText(data_total.get(i) + "", targetRect.centerX(),
baseline, paint);
temp = temp + margin * 2;
}
}
@Override
public void onDraw(Canvas canvas) {
canvas.drawColor(Color.WHITE);
drawChart(canvas);
drawAxis(canvas);
}
}Android canvas繪制柱形統計圖