Android 折线分布图LineChartView

开篇

  如何自定义折线分布图。

LineChartView

可支持功能点:

  • 1、设置XY轴坐标颜色
  • 2、设置XY轴坐标标签
  • 3、设置XY轴网格的宽度
  • 4、左右滑动、左右拖拽反弹
  • 5、添加N条折线、设置折线颜色
  • 6、设置折线区域和非折线区域颜色
  • 7、开关网格线

效果截屏

立即体验

扫描以下二维码下载体验App(从0.2.3版本开始,体验App内嵌版本更新检测功能):


JSCKit库传送门:https://github.com/JustinRoom/JSCKit

简析源码

LineChartView.java

  • 1、根据坐标标签以及网格宽度测量view的宽高。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        visibleWidth = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        Log.i(TAG, "onMeasure: [width = " + visibleWidth + ", height = " + height + "]");
        int realWidth = 0;
        int realHeight = 0;
        ViewGroup.LayoutParams params = getLayoutParams();
        if (xLabels != null && xLabels.length > 0)
            realWidth = (int) (getPaddingLeft() + getPaddingRight() + xSpace * (xLabels.length - 1) + .5f);
        if (yLabels != null && yLabels.length > 0)
            realHeight = (int) (getPaddingTop() + getPaddingBottom() + ySpace * (yLabels.length - 1) + 0.5f);

        //compute suitable width
        if (params.width == ViewGroup.LayoutParams.WRAP_CONTENT) {
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(realWidth, MeasureSpec.EXACTLY);
        } else {
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(visibleWidth, realWidth), MeasureSpec.EXACTLY);
        }

        //compute suitable height
        if (params.height == ViewGroup.LayoutParams.WRAP_CONTENT) {
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(realHeight, MeasureSpec.EXACTLY);
        } else {
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(height, realHeight), MeasureSpec.EXACTLY);
            int yCount = yLabels == null ? 0 : yLabels.length;
            yCount = Math.max(1, yCount);
            ySpace = height / yCount;
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
  • 2、绘制。

protected void onDraw(Canvas canvas)

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        clipRect.set(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight() - getPaddingBottom());
        //draw line chart area background
        paint.setColor(lineChartAreaColor);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawRect(clipRect.left, 0, getWidth(), clipRect.bottom, paint);
        //draw other area background
        paint.setColor(otherAreaColor);
        canvas.drawRect(0, 0, clipRect.left, clipRect.bottom, paint);
        canvas.drawRect(0, clipRect.bottom, getWidth(), getHeight(), paint);

        paint.setColor(axisColor);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(1);
        //draw x coordinate axis
        canvas.drawLine(clipRect.left, clipRect.bottom, clipRect.right, clipRect.bottom, paint);
        int xLabelCount = xLabels == null ? 0 : xLabels.length;
        int width = (xLabelCount - 1) * xSpace;
        for (int i = 0; i < xLabelCount; i++) {
            float basicX = clipRect.left + i * xSpace;
            //draw x labels
            drawXLabel(canvas, xLabels[i], basicX, clipRect.bottom, 10, textPaint);
            //draw x scale]
            if (isShowScale()) {
                canvas.drawLine(basicX, clipRect.bottom, basicX, clipRect.bottom + scaleLength, paint);
            }
        }

        //draw y coordinate axis
        int scrollX = 0;//getScrollX();
        canvas.drawLine(clipRect.left + scrollX, clipRect.top, clipRect.left + scrollX, clipRect.bottom, paint);
        int yLabelCount = yLabels == null ? 0 : yLabels.length;
        int height = (yLabelCount - 1) * ySpace;
        for (int i = 0; i < yLabelCount; i++) {
            float basicY = clipRect.bottom - i * ySpace;
            //draw y labels
            drawYLabel(canvas, yLabels[i], clipRect.left + scrollX, basicY, -10, textPaint);
            //draw y scale
            if (isShowScale()) {
                canvas.drawLine(clipRect.left, basicY, clipRect.left - scaleLength, basicY, paint);
            }
        }

        //draw dash grid
        drawDashGrid(canvas, height, xLabelCount, yLabelCount);

        //draw data
        for (LineItem item : lineItems) {
            drawData(canvas, item.getData(), height, 3, item.getLineColor(), 4.0f, Color.GREEN);
        }

        //draw y coordinate axis for floating
        drawFloatingYAxis(canvas, getScrollX(), yLabelCount);
    }
  • 3、处理触控事件。

public boolean onTouchEvent(MotionEvent event)

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                float touchX = event.getX();
                float touchY = event.getY();
                if (touchX < clipRect.left
                        || touchX > clipRect.right
                        || touchY < clipRect.top
                        || touchY > clipRect.bottom){
                    canMove = false;
                } else {
                    removeCallbacks(r);
                    lastTouchX = touchX;
                    canMove = true;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (canMove){
                    float tempTouchX = event.getX();
                    float dx = lastTouchX - tempTouchX;
                    scrollBy((int) (dx + .5f), 0);
                    lastTouchX = tempTouchX;
                }
                break;
            case MotionEvent.ACTION_UP:
                int scrollX = getScrollX();
                if (scrollX < 0){
                    from = scrollX;
                    to = 0;
                    if (canMove)
                        postDelayed(r, 10);
                } else if (scrollX > 0 && (scrollX + visibleWidth > getMeasuredWidth())){
                    from = scrollX;
                    to = getMeasuredWidth() - visibleWidth;
                    if (canMove)
                        postDelayed(r, 10);
                }
                break;
        }
        return true;
    }

使用示例

    private LineChartView lineChartView;
                String[] labels = new String[]{"", "10%", "20%", "30%", "40%", "50%", "60%", "70%"};
                LabelItem[] yLabels = new LabelItem[labels.length];
                for (int i = 0; i < labels.length; i++) {
                    LabelItem item = new LabelItem();
                    item.setLabel(labels[i]);
                    yLabels[i] = item;
                }

                int size = 12;
                LabelItem[] xLabels = new LabelItem[size];
                for (int i = 0; i < xLabels.length; i++) {
                    LabelItem item = new LabelItem();
                    item.setLabel((i + 1) + "月");
                    xLabels[i] = item;
                }

                int xSpace = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, getResources().getDisplayMetrics());
                lineChartView.setXLabels(xLabels, xSpace);
//                lineChartView.setYLabels(yLabels);
                lineChartView.clearData();
                int[] lineColors = new int[]{Color.GRAY, Color.RED, 0xFFF8E71C};
                for (int i = 0; i < lineColors.length; i++) {
                    DataItem[] data = new DataItem[size];
                    Random random = new Random();
                    for (int j = 0; j < data.length; j++) {
                        DataItem item = new DataItem();
                        item.setRatio(random.nextFloat());
                        data[j] = item;
                    }
                    lineChartView.addLine(lineColors[i], data);
                }

请安装体验app自行体验效果,体验app无任何广告。
童鞋们,如果你们觉得不错的话给我点个吧,谢谢!!!

篇尾

  Wechat:eoy9527

知识是从劳动中得来的,任何成就都是刻苦劳动的结晶。 —— 宋庆龄

你可能感兴趣的:(Android 折线分布图LineChartView)