android 自定义折线图

时间:2022-01-12 00:43:58

看图:

android 自定义折线图

比较简陋,主要是通过canvas画上去的:

package com.example.democurvegraph.view;

import java.util.ArrayList;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams; /**
* 自定义局部折线图
* @author feijian
* @time 2015年6月29日15:37:41
*/
public class CurveView extends View{ ArrayList<Float> listData;
int mHeight,mWidth;
private int default_circle_radius = 4;
private int selected_circle_radius = 8;
private int padding = 8;
private int widthEMS = 0; //两个相邻描点之间的距离
// private float avg = 0;// listData里面数组的平均值
private float maxValue = 0;//最大的值
private int lineColor=0; //线条的颜色
private int circleColor=0; //圆圈的颜色
private float pre_X = 0,pre_Y = 0;
public CurveView(Context context) {
super(context);
} public CurveView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CurveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/**
* 自定义初始化画图数据
* @param listData
* @param lineColor
* @param circleColor
*/
public void DrawData(ArrayList<Float> listData,int lineColor,int circleColor)
{
this.listData = listData;
LayoutParams llparam = this.getLayoutParams();
mHeight = llparam.height;
mWidth = llparam.width;
if(listData!=null)
{
for(int i=0;i<listData.size();i++)
{
if(this.maxValue < listData.get(i))
{
this.maxValue = listData.get(i);
}
}
}
this.lineColor = lineColor;
this.circleColor = circleColor; this.widthEMS = (mWidth-padding*2)/listData.size();
System.out.print("widthEMS="+widthEMS+";mWidth="+mWidth+";paddingLeft="+padding+";size="
+listData.size()+";mHeight="+mHeight);
invalidate();//刷新界面
}
@Override
protected void onDraw(Canvas canvas) {
System.out.println("onDraw init");
if(listData!=null)
{
System.out.println("onDraw");
Paint circlePaint = new Paint();
circlePaint.setColor(circleColor);
Paint linePaint = new Paint();
linePaint.setColor(lineColor);
for(int i=0;i<listData.size();i++)
{
if(pre_X==0 && pre_Y==0) //说明开始画第一个圈圈
{
pre_X=padding;
pre_Y = (mHeight - listData.get(i)*mHeight / maxValue);
}
System.out.println("pre_X="+pre_X+";pre_Y="+pre_Y);
if(i > 0) //这时需要画前一个线段
{
canvas.drawLine(pre_X, pre_Y, pre_X+widthEMS, mHeight - listData.get(i)*mHeight / maxValue, linePaint);
pre_X = pre_X+widthEMS;
pre_Y = mHeight - listData.get(i)*mHeight / maxValue;
}
canvas.drawCircle(pre_X, pre_Y, default_circle_radius, circlePaint);
}
} super.onDraw(canvas);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 获取点击屏幕时的点的坐标
float x = event.getX();
float y = event.getY();
System.out.println("x="+x+";y="+y+",event.getAction()"+event.getAction());
return super.onTouchEvent(event);
}
}

使用方法:

curveView = (CurveView) findViewById(R.id.v_curve);
LayoutParams llparams = curveView.getLayoutParams();
llparams.height = 140;
llparams.width = 400;
ArrayList<Float> listData = new ArrayList<Float>();
listData.add(1f);
listData.add(2f);
listData.add(3f);
listData.add(2f);
listData.add(5f);
listData.add(1f);
listData.add(4f);
curveView.DrawData(listData,Color.parseColor("#ffffff"),Color.parseColor("#ffffff"));

demo下载