Android - 折线图
使用Android的canvas,画折线图:代码为:
package spt.view;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.DashPathEffect;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathEffect;
import android.util.Log;
import android.view.View;
/**
* 为了扩展不同分辨率手机的兼容性,百分比和一些重要变量设置为final,其他可变变量设置为成员变量.
*
* @author Administrator
*
*/
@SuppressLint("DrawAllocation")
public class BrokenLineView extends View {
// 计算相对比例时,均使用边距margin为依照(值与比例结果成反比).
// 画轴线时,箭头所占比例.
private static final int ARROW_PECENT = 10;
// x,y轴坐标点文字的比例.
private static final int X_TEXT_PECENT = 10;
private static final int Y_TEXT_PECENT = 10;
// 标题文字的比例.
private static final int TITLE_TEXT_PECENT = 5;
// 默认坐标轴值.
private static final String[] X_LABLE = { "a", "b", "c", "d", "e", "f", "g" };
private static final String[] Y_LABLE = { "0", "50", "100", "150", "200",
"250", "300" };
// 数据点圆的半径.
private static final int dataRadius = 10;
// x,y轴坐标点数字的位置偏离轴线的距离.
private int xTextDistanceAxis = 20;
private int yTextDistanceAxis = 30;
// 数据点数值文字相对于数据点的高度值.
private int dataTextAboveCircle = 25;
// 边距(也不能为final,因为可能用户可能根据不同条件设置不同间距.
private int margin = 100;
// X,Y轴的单位长度
private int xScale = 20;
private int yScale = 20;
// 标题的高度.
private String title;
// 标题距离最顶行线的y距离.
private int titleHeight = 20;
// 原点坐标
private int x0Point;
private int y0Point;
// X,Y轴上面的显示文字
private String[] xLabel = null;
private String[] yLabel = null;
// 曲线数据
private int[] data = null;
public BrokenLineView(Context context, String title, String[] xLabel,
String[] yLabel, int[] data) {
super(context);
this.title = title;
// 若传递空值,则使用默认的值.
this.xLabel = (xLabel == null ? X_LABLE : xLabel);
this.yLabel = (yLabel == null ? Y_LABLE : yLabel);
if (data == null)
throw new RuntimeException("data cannot null:");
this.data = data;
}
public BrokenLineView(Context context) {
this(context, null, X_LABLE, Y_LABLE, null);
}
// 设置坐标原点位置和轴线上的单位长度.
public void init() {
x0Point = margin; // x0.
y0Point = getHeight() - margin; // y0.
xScale = (getWidth() - 2 * margin) / (this.xLabel.length - 1);
yScale = (getHeight() - 2 * margin) / (this.yLabel.length - 1);
}
public int getMargin() {
return margin;
}
public void setMargin(int margin) {
if (margin < 0)
throw new RuntimeException("间距不能为负数:" + margin);
this.margin = margin;
}
@Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLACK); // 背景色.
Paint p = new Paint();
p.setStyle(Paint.Style.STROKE); // 设置轴线的的外框的样式“空心”(STROKE).
p.setAntiAlias(true); // 抗锯齿
p.setColor(Color.WHITE);
p.setStrokeWidth(2); // 设置轴线的的外框的宽度.
init();
drawYAxis(canvas, p);
drawXAxis(canvas, p);
drawHorizontalLine(canvas);
drawData(canvas);
}
// x向线
private void drawHorizontalLine(Canvas canvas) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.GRAY);
Path path = new Path();
// 先画长度为1的实线,然后长度为10的空白,再画长度为1实线,再画长度为10的空白;最后一个是是偏移量,可不理会.
PathEffect effects = new DashPathEffect(new float[] { 1, 10, 1, 10 }, 1);
paint.setPathEffect(effects);
for (int i = 1; (y0Point - i * yScale) >= margin; i++) {
int startX = x0Point;
int startY = y0Point - i * yScale;
int stopX = x0Point + (xLabel.length - 1) * xScale;
path.moveTo(startX, startY);
path.lineTo(stopX, startY);
paint.setColor(Color.DKGRAY);
canvas.drawPath(path, paint);
}
}
/**
* 画y轴线
*
* @param canvas
* @param p
*/
private void drawYAxis(Canvas canvas, Paint p) {
// y轴.
canvas.drawLine(x0Point, y0Point, margin, margin, p);
// y轴箭头的左部分.
canvas.drawLine(x0Point, margin, x0Point - x0Point / ARROW_PECENT,
margin + margin / ARROW_PECENT, p);
// y轴箭头的右部分.
canvas.drawLine(x0Point, margin, x0Point + x0Point / ARROW_PECENT,
margin + margin / ARROW_PECENT, p);
}
/**
* 画x轴线.
*
* @param canvas
* @param p
*/
private void drawXAxis(Canvas canvas, Paint p) {
// x轴.
canvas.drawLine(x0Point, y0Point, getWidth() - margin, y0Point, p);
// x轴箭头的上部分.
canvas.drawLine(getWidth() - margin, y0Point, getWidth() - margin
- margin / ARROW_PECENT, y0Point - margin / ARROW_PECENT, p);
// x轴箭头的下部分.
canvas.drawLine(getWidth() - margin, y0Point, getWidth() - margin
- margin / ARROW_PECENT, y0Point + margin / ARROW_PECENT, p);
}
// 画数据
private void drawData(Canvas canvas) {
Paint p = new Paint();
p.setAntiAlias(true); // 抗锯齿.
p.setColor(Color.RED);
p.setTextSize(margin / X_TEXT_PECENT);
for (int x = 0; x < data.length; x++) {
int startX = x0Point + x * xScale;
// 轴坐标点文字的显示.
canvas.drawText(xLabel[x], startX, y0Point + xTextDistanceAxis, p);
// 数据点的圆.
canvas.drawCircle(startX, calY(data[x]), dataRadius, p);
// 在数据点上标数据值.
canvas.drawText(data[x] + "", startX, calY(data[x]) + dataRadius
- dataTextAboveCircle, p);
// 在数据点圆间画变化线.
// 画线时,最后数据点不执行操作.
if (x != data.length - 1)
canvas.drawLine(startX, calY(data[x]), startX + xScale,
calY(data[x + 1]), p);
} // for x.
// 画y轴坐标点文字.
Paint py = new Paint();
py.setAntiAlias(true); // 抗锯齿.
py.setColor(Color.RED);
py.setTextSize(margin / Y_TEXT_PECENT);
for (int y = 0; y < yLabel.length; y++) {
int startY = y0Point - y * yScale;
// y轴坐标点文字的显示.
canvas.drawText(yLabel[y], x0Point - yTextDistanceAxis, startY, py);
} // for y.
// 画标题.
Paint pTitle = new Paint();
pTitle.setAntiAlias(true); // 抗锯齿.
pTitle.setColor(Color.RED);
pTitle.setTextSize(margin / TITLE_TEXT_PECENT);
// 通过Paint.measureText计算标题长度的像素,进而将标题水平居中.
canvas.drawText(title, (getWidth() - pTitle.measureText(title)) / 2,
margin - titleHeight, pTitle);
}
/**
* 计算数据值在坐标系中y的位置.
*
* @param y
* @return
*/
private int calY(int y) {
int y0 = 0;
int y1 = 0;
try {
y0 = Integer.parseInt(yLabel[0]);
y1 = Integer.parseInt(yLabel[1]);
return y0Point - ((y - y0) * yScale / (y1 - y0));
} catch (NumberFormatException e) {
Log.d("sysout", "y轴label必须是数字:" + e.getMessage());
return -1;
}
}
}
然后在Activity中调用即可:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//test:
int[] data = { 0, 50, 51, 78, 200, 121, 31 };
final String title = "最近一周AQI变化图";
setContentView(new BrokenLineView(this, title, null, null, data));
initView();
}
