推荐一款简易的折线图,效果如下
\
lineview.png
使用比较简单
先去这里把View源码下载下来放入到自己的view目录
在布局中添加:(com.sp.view.LineView根据自己放代码的位置修改)
使用:
((LineView) headView.findViewById(R.id.lineView)).setData(
Arrays.asList(02-1,02-1,02-1,02-1,02-1,02-1,02-1),
Arrays.asList(1.0f,2.0f,3.0f,4.0f,5.0f,6.0f,7.0f));
可以自己修改的自定义属性
/**
* 底部间隙大小
*/
private float bootomDes = 10;
/**
* 左边间隙大小
*/
private float leftDes = 10;
/**
* 纵坐标固定值分为几个间隔 默认6个
*/
private int yGapSize = 6;
/**
* 背景色
*/
private int bgColor = 0x66000000;
/**
* 刻度值字体大小
*/
private int scaleTxtSize = 13;
/**
* 刻度字体颜色
*/
private int scaleTxtColor = 0xffffffff;
/**
* 折线颜色
*/
private int lineColor = 0xff2791dc;
/**
* 折线粗细层度
*/
private int lindWidth = 2;
实现细节
onMeasure宽度为屏幕宽度或者用户设置值,高度为用户设置值否则固定为300dp
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
width = MeasureSpec.getSize(widthMeasureSpec);
switch (heightMode) {
case MeasureSpec.AT_MOST:
height = dp2px(getContext(), 350);
break;
case MeasureSpec.EXACTLY:
height = heightSize;
break;
}
setMeasuredDimension(width, height);
}
onDraw通过绘制底部文字,背景以及背景框,左部文字和画点和连接先
drawBottomText(canvas);
drawRectLineAndBg(canvas);
drawLeftText(canvas);
drawPointAndLine(canvas);
private void drawPointAndLine(Canvas canvas) {
if (xList==null||xList.size()==0){
return;
}
for (int i = 0; i < yList.size(); i++) {
x= getXPix(i);
y= getYPix(yList.get(i));
if (i<=yList.size()-2){
canvas.drawLine(x,y,getXPix(i+1),getYPix(yList.get(i+1)),linePaint);
}
canvas.drawCircle(x, y, (float) this.DOT_OUTER_CIR_RADIUS, bigCirPaint);
canvas.drawCircle(x, y, (float) this.DOT_INNER_CIR_RADIUS, smallCirPaint);
}
}
private void drawLeftText(Canvas canvas) {
if (yList == null || yList.size() == 0) {
return;
}
canvas.save();
max = getUpOrDownNum(getMaxOrMinNum(yList, true), 0, true);
min = getUpOrDownNum(getMaxOrMinNum(yList, false), 0, false);
incressFloat = increaseBy6(max, min);
for (int i = 0; i < yGapSize+1; i++) {
yShalfList.add(getRoundHalfUp(getUpOrDownNum(getMaxOrMinNum(yList,false),0,false)+(incressFloat*i),1));
}
canvas.translate((width - showLineAreaWidth) / 2, showLineAreaHeight);
yGap = showLineAreaHeight/(yGapSize+2); //2顶部和尾部空出一个格子
for (Float aFloat : yShalfList) {
canvas.translate(0,-yGap);
canvas.drawText(aFloat+ -,0,0,scaleTxtPaint);
}
canvas.restore();
}
private void drawRectLineAndBg(Canvas canvas) {
canvas.drawLine(width - showLineAreaWidth, 0, width - showLineAreaWidth, showLineAreaHeight, linePaint);
canvas.drawLine(width - showLineAreaWidth, showLineAreaHeight, width, showLineAreaHeight, linePaint);
canvas.drawRect(width - showLineAreaWidth, 0, width, showLineAreaHeight, bgPaint);
}
private void drawBottomText(Canvas canvas) {
if (xList == null || xList.size() == 0) {
return;
}
canvas.save();
canvas.translate(width - showLineAreaWidth, showLineAreaHeight + ((bootomDes + bottomTxtHeight) / 2) + bottomTxtHeight / 2);
xGap = showLineAreaWidth / ( .