自定义折线图加上背景阴影效果

最近项目中用到了折线图效果，之前没做过这种图表的功能，从网上百度一些，发现跟我要的效果不一样，于是我就开始在别人写的代码基础上进行修改，修改是一件也很辛苦的事，因为首先你要看懂别人的代码，然后才能进行一定的修改和添加代码

下面就是我修改后的代码，夸自己一句，真的很不错

/**
 * 备注：
 * 作者：王莹
 * 时间：2018/1/19.
 * ~_~想睡觉了!!
 * (～o～)~zZ我想睡啦～
 * π_π?打瞌睡
 */

public class DrawLineView extends View {
    /**
     * 上下文
     */
    private Context mContext = null;
    /**
     * 画图区域的宽高
     */
    private float width, height;
    /**
     * 纵坐标平均每一行的高度
     */
    private float fRowHeight;
    /**
     * 横坐标平均每一列的宽带
     */
    private float fColWidth = 0;
    /**纵向显示个数*/
//    private static final int VERTICALCOUNT = 5;
    /**横向显示个数*/
//    private static final int HORIZONTALCOUNT = 7;
    /**
     * 固定要显示的利率
     */
//    private static final int CONSTANT_DISPLAY_RATE = 8;
    /**
     * 横纵向字体大小单位dp
     */
    private static final int TEXTSIZE = 12;
    /**
     * 纵坐标、横坐标的字体画笔
     */
    private Paint textPaint = null;
    /**
     * 横坐标画笔
     */
    private Paint horizontalPaint = null;
    /**
     * 固定的虚线画笔
     */
    private Paint dottedLinePaint = null;
    /**
     * 画Y轴的刻度线
     */
    private Paint yLinePaint = null;
    /**
     * 画空心圆
     */
    private Paint circlePaint = null;
    /**
     * 圆的半径 单位dp
     */
    private int circleRadius = 3;
    /**
     * 折线画笔
     */
    private Paint linePaint = null;
    private Paint innerPaint = null;
    /**
     * 阴影画笔
     */
    private Paint shadowPaint = null;
    /**
     * 阴影走过的路径
     */
    private Path shadowPath = null;

    private List<Integer> yList = new ArrayList<Integer>();
    private List<Integer> yListtext = new ArrayList<Integer>();

    private List<String> xList = new ArrayList<String>();
    /**
     * Y轴的五个刻度
     */
    private List<Integer> yRateList = new ArrayList<Integer>();

    /**
     * Y轴最大值
     */
    private float maxY = 0;
    /**
     * 纵向设置的Y每一段的值
     */
    private int verticalAnnualValueY = 0;
    /**
     * 横行字体宽带
     */
    private float horizontalTextWidth = 0;

    /**
     * 横向起始位置
     */
    private float xStart = 0;
    private float[] xPoint;
    private float[] yPoint;

    public DrawLineView(Context context) {
        super(context);
        initWillUsed(context);
    }

    public DrawLineView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initWillUsed(context);
    }

    /**
     * 初始化将使用到的参数
     */
    private void initWillUsed(Context context) {
        mContext = context;

        textPaint = new Paint();
        textPaint.setColor(Color.parseColor("#B9C7DD"));
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(ValueUtils.dip2px(mContext, TEXTSIZE));

        horizontalPaint = new Paint();
        horizontalPaint.setColor(Color.parseColor("#B9C7DD"));
        horizontalPaint.setAntiAlias(true);
        horizontalPaint.setStrokeWidth(1);

        yLinePaint = new Paint();
        yLinePaint.setColor(Color.parseColor("#B9C7DD"));
        yLinePaint.setAntiAlias(true);

        dottedLinePaint = new Paint();
        dottedLinePaint.setStyle(Paint.Style.STROKE);
        dottedLinePaint.setColor(Color.parseColor("#C5D1FF"));
        dottedLinePaint.setAntiAlias(true);

        circlePaint = new Paint();
        circlePaint.setColor(Color.parseColor("#6789FD"));
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setAntiAlias(true);
        circlePaint.setStrokeWidth(1);

        linePaint = new Paint();
        linePaint.setColor(Color.parseColor("#6789FD"));
        linePaint.setStrokeWidth(2);
        linePaint.setAntiAlias(true);

        innerPaint = new Paint();
        innerPaint.setColor(Color.WHITE);
        innerPaint.setStyle(Paint.Style.FILL);
        innerPaint.setAntiAlias(true);


    }

    /**
     * 设置将要绘制的数据
     */
    public void setData(List<String> xValuesList, List<Integer> yValuesList, float currMaxY) {
        this.xList = xValuesList;
        this.yList = yValuesList;
        yListtext.clear();
        yRateList.clear();
        for (int i = 0; i < yList.size(); i++) {
            yListtext.add(yList.get(i));
        }
        xPoint = new float[xList.size()];
        yPoint = new float[xList.size()];

        if (currMaxY / yList.size() == currMaxY % yList.size()) {
            verticalAnnualValueY = (int) currMaxY / yList.size();
        } else {
            verticalAnnualValueY = (int) currMaxY / yList.size() + 1;
        }

        maxY = yList.size() * verticalAnnualValueY;


        for (int i = yListtext.size(); i >= 1; i--) {
            yRateList.add(verticalAnnualValueY * i);
        }
        setWillNotDraw(false);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        width = getWidth();
        height = getHeight();
        fRowHeight = (float) height / (yList.size()+1);
        xStart = 0;
        fColWidth = 0;
        shadowPaint = new Paint();
        shadowPaint.setAntiAlias(true);
        shadowPath = new Path();
        drawVertical(canvas);

        drawHorizontal(canvas);

//        drawDottedLine(canvas);

        drawYLine(canvas);

        drawLine(canvas);

        drawCircle(canvas);
    }

    /**
     * 画纵向数据
     */
    private void drawVertical(Canvas canvas) {
        Integer temp=0;
        for (int i = 0; i < yRateList.size()-1; i++) {
            for (int j = i + 1; j < yRateList.size(); j++) {
                if (yRateList.get(i)< yRateList.get(j)) { // 交换两数的位置
                    temp = yRateList.get(i);
                    yRateList.set(i,yRateList.get(j));
//                    yRateList.get(i) = yRateList.get(j);
                    yRateList.set(j,temp);
//                    yRateList.get(j) = temp;
                }
            }
        }
//        //降序
//        Collections.reverse(yRateList);
        for (int i = 0; i < yRateList.size(); i++) {
            Integer verticalContent = yRateList.get(i);
            canvas.drawText(verticalContent + "", 0, i * fRowHeight + ValueUtils.dip2px(mContext, TEXTSIZE), textPaint);

            if (xStart < textPaint.measureText(verticalContent + "")) {
                xStart = textPaint.measureText(verticalContent + "");
            }
        }
        xStart = xStart * 3 / 2;
    }

    /**
     * 画横向数据
     */
    private void drawHorizontal(Canvas canvas) {
        for (int i = 0; i < xList.size(); i++) {
            String horizontalContent = xList.get(i);
            horizontalTextWidth = textPaint.measureText(horizontalContent);
            if (fColWidth == 0) {
                fColWidth = (width - xStart - horizontalTextWidth) / (xList.size() - 1);
            }
            canvas.drawText(horizontalContent, xStart + i * fColWidth - horizontalTextWidth / 2, yList.size() * fRowHeight + ValueUtils.dip2px(mContext, TEXTSIZE + 10), textPaint);

//            if (i == xList.size() - 1) {
//                canvas.drawLine(xStart, yList.size() * fRowHeight, fColWidth * i + horizontalTextWidth, yList.size() * fRowHeight, horizontalPaint);
//            }
        }
    }

//    /**
//     * 画固定8%的虚线
//     */
//    private void drawDottedLine(Canvas canvas) {
//        float dottedWidth = (maxY - CONSTANT_DISPLAY_RATE) * yList.size() * fRowHeight / maxY + ValueUtils.dip2px(mContext, TEXTSIZE);
//        Path path = new Path();
//        path.moveTo(xStart, dottedWidth);
//        path.lineTo(fColWidth * (xList.size() - 1) + horizontalTextWidth, dottedWidth);
//        PathEffect effects = new DashPathEffect(new float[]{4, 4, 4, 4}, 4f);
//        dottedLinePaint.setPathEffect(effects);
//        canvas.drawPath(path, dottedLinePaint);
//    }

    /**
     * 画Y轴的刻度线
     */
    private void drawYLine(Canvas canvas) {
        for (int i = 0; i < yList.size(); i++) {
            canvas.drawLine(xStart, i * fRowHeight + ValueUtils.dip2px(mContext, TEXTSIZE), fColWidth * (xList.size()), i * fRowHeight + ValueUtils.dip2px(mContext, TEXTSIZE), yLinePaint);
        }
    }

    /**
     * 画空心圆
     */
    private void drawCircle(Canvas canvas) {
        for (int i = 0; i < xList.size(); i++) {
            canvas.drawCircle(xPoint[i], yPoint[i], ValueUtils.dip2px(mContext, circleRadius), circlePaint);

            float innerValue = ValueUtils.dip2px(mContext, circleRadius) - 1.6F;

            innerPaint.setColor(Color.WHITE);
            innerPaint.setStyle(Paint.Style.FILL);
            innerPaint.setAntiAlias(true);
            canvas.drawCircle(xPoint[i], yPoint[i], innerValue, innerPaint);
        }
    }

    /**
     * 画折线 和 阴影
     */
    private void drawLine(Canvas canvas) {
        int maxHeightPoint = 0;//记录最高的点
        float maxHeight = 0;
        for (int i = 0; i < xList.size(); i++) {
            xPoint[i] = xStart + i * fColWidth;

            if (maxHeight < yList.get(i)) {
                maxHeight = yList.get(i);
                maxHeightPoint = i;
            }
            yPoint[i] = (maxY - yList.get(i)) / maxY * yList.size() * fRowHeight + ValueUtils.dip2px(mContext, TEXTSIZE);

            if (i > 0) {
                canvas.drawLine(xPoint[i - 1], yPoint[i - 1], xPoint[i], yPoint[i], linePaint);
                if (i == 1) {
                    shadowPath.moveTo(xPoint[i - 1], yPoint[i - 1]);
                }
                shadowPath.lineTo(xPoint[i], yPoint[i]);
            }
        }
        shadowPath.lineTo(xPoint[xList.size() - 1], yList.size() * fRowHeight);
        shadowPath.lineTo(xPoint[0], yList.size() * fRowHeight);
        shadowPath.close();
        Shader lShader = new LinearGradient(0, yPoint[maxHeightPoint], 0, yList.size() * fRowHeight, Color.parseColor("#BFC5D1FF"), Color.parseColor("#BFFDFDFF"), Shader.TileMode.REPEAT);
        shadowPaint.setShader(lShader);
        canvas.drawPath(shadowPath, shadowPaint);
    }
}

用来也很简单呀！

    <com.egojit.android.sops.views.Chart.DrawLineView
                android:id="@+id/cv_chartView"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:visibility="gone"
                >

            </com.egojit.android.sops.views.Chart.DrawLineView>

    private void initLineDatas() {
//        cv_chartView.setShowNum(listarray.size());
        maxlist = new ArrayList<>();
        for (int i = 0; i < listarray.size(); i++) {
            maxlist.add(listarray.getJSONObject(i).getFloatValue("sq"));
            ydatas.add(listarray.getJSONObject(i).getInteger("sq"));
        }

        float maxValueY = Collections.max(maxlist);
        cv_chartView.setData(xdata, ydatas, maxValueY);
        cv_chartView.postInvalidate();
    }

不过注意的是，如果你需要切换数据或者改其他数据，肯定都要吧之前数据清掉的哦！希望可以帮到其他小伙伴啦！

把效果图也发给大家吧！

跟效果图不一样的是我加了圆点