android 趋势图

效果图

思路：

自定义视图继承View,在onDraw()函数中绘制点和线

获取视图的高度，将视图区分为指定的趋势值，

例如，我们的销售业绩从0-10，分为10个阶段，那么就用视图的高度/10，然后根据指定的状态数组来绘制点的位置，然后线连接点

趋势视图代码：

public class LineView extends View {

　　//点之间的距离
    private int xUnit = 50;

　　//视图的高度
    private int height;

//默认的趋势单位
    private int yUnit = 10;

　　//默认的趋势数组
    private int arr[] = { 5, 6, 3, 6, 3, 7, 6, 7, 7, 8, 8, 2, 6, 4, 3 };

private int lineColor, radius, referLineColor, maxLevel;

private float lineWidth, referLineWidth;

public LineView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

public LineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

private Paint paint;
    private Paint paintReferLine;

private void init(Context context, AttributeSet attrs) {
        lineColor = Color.GREEN;
        lineWidth = 3;
        referLineColor = Color.GRAY;
        referLineWidth = 1;
        maxLevel = 10;

TypedArray typeArray = context.obtainStyledAttributes(attrs,
                R.styleable.lineView);
        for (int i = 0; i < typeArray.length(); i++) {
            switch (typeArray.getIndex(i)) {

　　　　//趋势线的颜色
            case R.styleable.lineView_lineColor:
                lineColor = typeArray.getColor(i, Color.GREEN);
                break;

　　　　//趋势线的宽度
            case R.styleable.lineView_lineWidth:
                lineWidth = typeArray.getDimension(i, 3);
                break;

//圆点的半径
            case R.styleable.lineView_pointRadius:
                radius = typeArray.getDimensionPixelSize(i, 5);
                break;

　　　　//参考线颜色
            case R.styleable.lineView_referLineColor:
                referLineColor = typeArray.getColor(i, Color.GRAY);
                break;

　　　　//参考线宽度
            case R.styleable.lineView_referLineWidth:
                referLineWidth = typeArray.getDimension(i, 1);
                break;

　　　　//阶段值
            case R.styleable.lineView_maxLevel:
                maxLevel = typeArray.getInt(i, 10);
                break;
            }
        }

paint = new Paint();
        paint.setColor(lineColor);
        paint.setStrokeWidth(lineWidth);
        paint.setAntiAlias(true);

paintReferLine = new Paint();
        paintReferLine.setColor(referLineColor);
        paintReferLine.setStrokeWidth(referLineWidth);
        paintReferLine.setAntiAlias(true);
    }

public void setLevelArray(int[] array) {
        this.arr = array;
        invalidate();
    }

public void setMaxLevel(int maxLevel) {
        this.maxLevel = maxLevel;
    }

public void setLineColor(int lineColor) {
        this.lineColor = lineColor;
        paint.setColor(lineColor);
    }

public void setLineWidth(float lineWidth) {
        this.lineWidth = lineWidth;
        paint.setStrokeWidth(lineWidth);
    }

public void setRadius(int radius) {
        this.radius = radius;
    }

public void setReferLineColor(int referLineColor) {
        this.referLineColor = referLineColor;
        paintReferLine.setColor(referLineColor);
    }

public void setReferLineWidth(int referLineWidth) {
        this.referLineWidth = referLineWidth;
        paintReferLine.setStrokeWidth(referLineWidth);
    }

@Override
    protected void onLayout(boolean changed, int left, int top, int right,
            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        height = getHeight();
        yUnit = height / maxLevel;
        if (arr.length > 0) {
            xUnit = getWidth() / arr.length;
        }
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (arr.length == 0) {
            canvas.drawText("set Point Array First", 50, 50, paint);
            return;
        }
        for (int i = 0; i < arr.length - 1; i++) {
            int sX = i * xUnit + radius;
            int sY = arr[i] * yUnit;
            int eX = (i + 1) * xUnit + radius;
            int code = arr[i + 1];
            int eY = code * yUnit;

if (sY == 0) {
                sY = radius;
            }
            if (eY == 0) {
                eY = radius;
            }
            if (sY >= height - radius) {
                sY = height - radius;
            }
            if (eY >= height - radius) {
                eY = height - radius;
            }

if (i == 0) {
                canvas.drawLine(sX, 0, sX, height, paintReferLine);
                canvas.drawCircle(sX, sY, radius, paint);
            }
            canvas.drawLine(eX, 0, eX, height, paintReferLine);
            canvas.drawLine(sX, sY, eX, eY, paint);
            canvas.drawCircle(eX, eY, radius, paint);
        }
    }
}

xml布局：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:lineView="http://schemas.android.com/apk/res/com.example.lineview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

<demo.LineView
        android:id="@+id/lineView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        lineView:lineColor="#000000"
        lineView:lineWidth="2dp"
        lineView:maxLevel="10"
        lineView:pointRadius="5dp"
        lineView:referLineColor="#DCDCDC"
        lineView:referLineWidth="1dp" />

</LinearLayout>

源代码下载

android 趋势图