一个安卓折线图控件

最新推荐文章于 2024-08-28 08:00:19 发布
原创 最新推荐文章于 2024-08-28 08:00:19 发布 · 612 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个自定义的ChartView类，用于实现简单的折线图绘制功能。该类仅需一个ChartView.java文件即可完成基本的图表绘制，包括背景色块、坐标轴、刻度值、数据线条及数据点等，并提供了多条折线和单条折线的用法示例。

1.废话少说，看效果

图片1图片2

2.只需要一个class,即实现ChartView.java

public class ChartView extends View {

    private float xLength;
    private float yLength;
    private float startPointX;
    private float startPointY;
    private float xScale;
    private float yScale;
    private float coordTextSize;

    private String[] xLabel;
    private String[] yLabel;
    private ArrayList<String[]> data;
    private String[] title;

    //private String[] mDataLineColors;
    private int[] drawColors;
    private ArrayList<float[][]> mDataCoords = new ArrayList<float[][]>();

    private Paint mScaleLinePaint;
    private Paint mDataLinePaint;
    private Paint mScaleValuePaint;
    private Paint mBackColorPaint;

    Rect bounds = new Rect();

    private boolean isClick;                // 是否点击了数据点
    private int[] clickIndex;

    //private PopupWindow mPopWin;

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

    private void init() {
        this.setBackgroundColor(Color.WHITE);
        // x轴刻度值
        if (xLabel == null) {
            //获取当前日期
            xLabel = new String[7];
            long current = System.currentTimeMillis() / 1000;
            for (int i = 6; i >= 0; i--) {
                long tmp = current - 24 * 60 * 60 * (i + 1);
                String dateStr = Utils.longtimeToDayDate(tmp);
                xLabel[i] = dateStr.substring(5, dateStr.length());
            }
        }
        // 数据点
        if (data == null) {
            data = new ArrayList<String[]>();
            data.add(new String[]{"0", "0", "0", "0", "0", "0", "0"});

        }
        clickIndex = new int[data.size()];
        for (int i = 0; i < clickIndex.length; i++) {
            clickIndex[i] = -1;
        }
        // 标题
        if (title == null) {
            title = new String[]{"网点"};
        }
        // 根据设置的数据值生成Y坐标刻度值
        yLabel = createYLabel();
        //设置折线颜色
        if (drawColors == null) {
            drawColors = new int[1];
            drawColors[0] = Color.parseColor("#ff5400");
        }
        // 新建画笔
        mDataLinePaint = new Paint();       // 数据(点和连线)画笔
        mScaleLinePaint = new Paint();      // 坐标(刻度线条)值画笔
        mScaleValuePaint = new Paint();      // 图表(刻度值)画笔
        mBackColorPaint = new Paint();       // 背景(色块)画笔
        // 画笔抗锯齿
        mDataLinePaint.setAntiAlias(true);
        mScaleLinePaint.setAntiAlias(true);
        mScaleValuePaint.setAntiAlias(true);
        mBackColorPaint.setAntiAlias(true);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        initParams();
        drawBackColor(canvas);              // 绘制背景色块
        drawYAxisAndXScaleValue(canvas);    // 绘制y轴和x刻度值
        drawXAxisAndYScaleValue(canvas);    // 绘制x轴和y刻度值
        drawDataLines(canvas);              // 绘制数据连线
        drawDataPoints(canvas);             // 绘制数据点
        drawTitle(canvas);                  // 绘制标题
    }

    /**
     * 绘制背景色块
     *
     * @param canvas
     */
    private void drawBackColor(Canvas canvas) {
        for (int i = 0; i < 7; i++) {
            if (i == 2 || i == 4 || i == 6) {
                canvas.drawRect(startPointX + (i - 1) * xScale,
                        startPointY,
                        startPointX + i * xScale,
                        yLength + startPointY,
                        mBackColorPaint);
            }
        }
    }

    private void drawYAxisAndXScaleValue(Canvas canvas) {
        for (int i = 0; i < 7; i++) {
            canvas.drawLine(startPointX + i * xScale,
                    startPointY,
                    startPointX + i * xScale,
                    startPointY + yLength,
                    mScaleLinePaint);
            mScaleValuePaint.getTextBounds(xLabel[i], 0, xLabel[i].length(), bounds);

            canvas.drawText(xLabel[i],
                    startPointX + i * xScale - bounds.width() / 2,
                    startPointY + yLength + bounds.height() + yScale / 15,
                    mScaleValuePaint);

        }
    }

    /**
     * 绘制x轴和y刻度值
     *
     * @param canvas
     */
    private void drawXAxisAndYScaleValue(Canvas canvas) {
        for (int i = 0; i < 6; i++) {
            if (i < 5) {
                mScaleValuePaint.getTextBounds(yLabel[4 - i], 0, yLabel[4 - i].length(), bounds);
                canvas.drawText(yLabel[4 - i],
                        startPointX - bounds.width() - 2 * xScale / 15,
                        startPointY + yScale * (i + 0.5f) + bounds.height() / 2,
                        mScaleValuePaint);
                canvas.drawLine(startPointX,
                        startPointY + (i + 0.5f) * yScale,
                        startPointX + xLength,
                        startPointY + (i + 0.5f) * yScale,
                        mScaleLinePaint);
            } else {
                canvas.drawLine(startPointX,
                        startPointY + (i + 0.5f) * yScale,
                        startPointX + xLength,
                        startPointY + (i + 0.5f) * yScale,
                        mScaleLinePaint);
            }
        }
    }

    /**
     * 绘制数据线条
     *
     * @param canvas
     */
    private void drawDataLines(Canvas canvas) {
        getDataRoords();
        for (int n = 0; n < data.size(); n++) {
            for (int i = 0; i < 6; i++) {
                mDataLinePaint.setColor(drawColors[n]);
                canvas.drawLine(mDataCoords.get(n)[i][0], mDataCoords.get(n)[i][1], mDataCoords.get(n)[i + 1][0], mDataCoords.get(n)[i + 1][1], mDataLinePaint);
                canvas.drawCircle(mDataCoords.get(n)[i][0], mDataCoords.get(n)[i][1], xScale / 15, mDataLinePaint);
            }
            canvas.drawCircle(mDataCoords.get(n)[6][0], mDataCoords.get(n)[6][1], xScale / 15, mDataLinePaint);
        }
    }

    /**
     * 绘制数据点
     *
     * @param canvas
     */
    private void drawDataPoints(Canvas canvas) {

        // 点击后，绘制数据点
        for (int n = 0; n < data.size(); n++) {
            if (isClick && clickIndex[n] > -1) {
                mDataLinePaint.setColor(drawColors[n]);
                canvas.drawCircle(mDataCoords.get(n)[clickIndex[n]][0], mDataCoords.get(n)[clickIndex[n]][1], xScale / 10, mDataLinePaint);
                mDataLinePaint.setColor(Color.WHITE);
                canvas.drawCircle(mDataCoords.get(n)[clickIndex[n]][0], mDataCoords.get(n)[clickIndex[n]][1], xScale / 20, mDataLinePaint);
                mDataLinePaint.getTextBounds(data.get(n)[clickIndex[n]], 0, data.get(n)[clickIndex[n]].length(), bounds);
                //画圆角矩形
                mDataLinePaint.setStyle(Paint.Style.FILL);//充满
                mDataLinePaint.setColor(drawColors[n]);//设置颜色
                // mDataLinePaint.setAntiAlias(true);// 设置画笔的锯齿效果
                float width = bounds.height() > bounds.width() ? bounds.height() :bounds.width();

                RectF rectF = new RectF(
                        mDataCoords.get(n)[clickIndex[n]][0] - 15 - width / 2,
                        mDataCoords.get(n)[clickIndex[n]][1] - 2 * bounds.height() - 17,
                        mDataCoords.get(n)[clickIndex[n]][0] + 15 + width / 2,
                        mDataCoords.get(n)[clickIndex[n]][1] - 2 * bounds.height() + bounds.height() + 13);// 设置个新的长方形
                canvas.drawRoundRect(rectF, rectF.height() / 2, rectF.height() / 2, mDataLinePaint);//第二个参数是x半径，第三个参数是y半径

                //绘制数据
                mDataLinePaint.setColor(Color.WHITE);
                canvas.drawText(data.get(n)[clickIndex[n]],
                        mDataCoords.get(n)[clickIndex[n]][0] - bounds.width() / 2 - 2,
                        mDataCoords.get(n)[clickIndex[n]][1] - 1 * bounds.height() - 2,
                        mDataLinePaint);
            }
        }
    }

    /**
     * 绘制标题
     *
     * @param canvas
     */
    private void drawTitle(Canvas canvas) {

        // 绘制标题文本和线条
        for (int i = 0; i < data.size(); i++) {
            //设置绘制标题时的颜色
            mDataLinePaint.setColor(drawColors[i]);
            mDataLinePaint.getTextBounds(title[i], 0, title[i].length(), bounds);
            canvas.drawText(title[i], startPointX + i * xLength / data.size() + xScale / 2 + xLength / (2 * data.size()) - xScale / 2 - bounds.width() / 2, startPointY + yLength + yScale / 2 + (yScale / 15 + coordTextSize) / 2 + bounds.height() / 2, mDataLinePaint);
            canvas.drawLine(startPointX + i * xLength / data.size() + xLength / (2 * data.size()) - xScale / 2 - bounds.width() / 2,
                    startPointY + yLength + yScale / 2 + (yScale / 15 + coordTextSize) / 2,
                    startPointX + i * xLength / data.size() + xScale / 2 - xScale / 15 + xLength / (2 * data.size()) - xScale / 2 - bounds.width() / 2,
                    startPointY + yLength + yScale / 2 + (yScale / 15 + coordTextSize) / 2,
                    mDataLinePaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float touchX = event.getX();
        float touchY = event.getY();
        for (int i = 0; i < data.size(); i++) {
            clickIndex[i] = -1;
        }
        for (int n = 0; n < data.size(); n++) {
            for (int i = 0; i < 7; i++) {
                float dataX = mDataCoords.get(n)[i][0];
                float dataY = mDataCoords.get(n)[i][1];
                // 控制触摸/点击的范围，在有效范围内才触发
                if (Math.abs(touchX - dataX) < xScale / 4 && Math.abs(touchY - dataY) < yScale / 4) {
                    isClick = true;
                    clickIndex[n] = i;
                    invalidate();
                    return true;
                }
            }
        }
        invalidate();

        return super.onTouchEvent(event);
    }

    private void initParams() {
        int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
        int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();

        yScale = height / 7f;         // y轴刻度
        xScale = width / 7.5f;          // x轴刻度
        startPointX = xScale / 2;       // 开始绘图的x坐标
        startPointY = yScale / 2;       // 开始UI图的y坐标
        xLength = 6.5f * xScale;        // x轴长度
        yLength = 5.5f * yScale;        // y轴长度

        float chartLineStrokeWidth = xScale / 50;     // 图表线条的线宽
        coordTextSize = xScale / 5;             // 坐标刻度文字的大小
        float dataLineStrodeWidth = xScale / 15;      // 数据线条的线宽

        // 设置画笔相关属性
        mBackColorPaint.setColor(0x11DEDE68);
        mScaleLinePaint.setStrokeWidth(chartLineStrokeWidth);
        mScaleLinePaint.setColor(0xFFDEDCD8);
        mScaleValuePaint.setColor(0xFF999999);
        mScaleValuePaint.setTextSize(coordTextSize);
        mDataLinePaint.setStrokeWidth(dataLineStrodeWidth);
        mDataLinePaint.setStrokeCap(Paint.Cap.ROUND);
        mDataLinePaint.setTextSize(1.5f * coordTextSize);
    }

    /**
     * 根据数据值data生成合适的Y坐标刻度值
     *
     * @return y轴坐标刻度值数组
     */
    private String[] createYLabel() {
        if (data.isEmpty()) throw new NullPointerException("数据点为空");
        int num = data.size() * data.get(0).length;//所有的数据长度
        int[] dataFloats = new int[num];
        for (int i = 0; i < data.size(); i++) {
            String[] strs = data.get(i);
            for (int j = 0; j < strs.length; j++) {
                dataFloats[i * strs.length + j] = Integer.parseInt(strs[j]);
            }
        }
        // 将数据值从小到大排序
        Arrays.sort(dataFloats);
        // 中间值
        int middle = (dataFloats[0] + dataFloats[num - 1]) / 2;
        // Y刻度值
        int scale = (dataFloats[num - 1] - dataFloats[0] + 4) / 4;
        String[] yText = new String[5];
        yText[0] = (middle - 2 * scale) + "";
        yText[1] = (middle - scale) + "";
        yText[2] = middle + "";
        yText[3] = (middle + scale) + "";
        yText[4] = (middle + 2 * scale) + "";
        for (int i = 0; i < yText.length; i++) {
            yText[i] = yText[i] + "";
        }
        return yText;
    }

    /**
     * 获取数据值的坐标点
     *
     * @return 数据点的坐标
     */
    private void getDataRoords() {
        float originalPointX = startPointX;
        float originalPointY = startPointY + yLength - yScale;
        for (int n = 0; n < data.size(); n++) {
            float[][] tmp = new float[7][2];
            for (int i = 0; i < data.get(n).length; i++) {
                tmp[i][0] = originalPointX + i * xScale;
                float dataY = Float.parseFloat(data.get(n)[i]);
                float oriY = Float.parseFloat(yLabel[0]);
                tmp[i][1] = originalPointY - (yScale * (dataY - oriY) / (Float.parseFloat(yLabel[1]) - Float.parseFloat(yLabel[0])));
            }
            mDataCoords.add(tmp);
        }

    }

    /**
     * 格式化数字 ###.000
     *
     * @return ###.000
     */
   /* private float format3Bit(int number) {
        DecimalFormat decimalFormat = new DecimalFormat("###.000");
        String target = decimalFormat.format(number);
        if (target.startsWith(".")) {
            target = "0" + target;
        }
        return Float.parseFloat(target);
    }*/

    /**
     * 格式化数据 ###.000
     *
     * @param numberStr 格式化后的字符串形式
     * @return ###.000
     */
    /*private String format3Bit(String numberStr) {
        if (TextUtils.isEmpty(numberStr)) {
            return "0.000";
        }
        float numberFloat = Float.parseFloat(numberStr);
        DecimalFormat decimalFormat = new DecimalFormat("###.000");
        String target = decimalFormat.format(numberFloat);
        if (target.startsWith(".")) {
            target = "0" + target;
        }
        return target;
    }*/

    /**
     * 设置x轴刻度值
     *
     * @param xLabel x刻度值
     */
    public void setxLabel(String[] xLabel) {
        this.xLabel = xLabel;
    }

    /**
     * 设置数据
     *
     * @param data 数据值
     */
    public void setData(ArrayList<String[]> data) {
        this.data = data;
    }

    /**
     * 设置标题
     *
     * @param title 标题
     */
    public void setTitle(String[] title) {
        this.title = title;
    }

    /**
     * 重新设置x轴刻度、数据、标题后必须刷新重绘
     */
    public void fresh() {
        init();
        postInvalidate();
    }

    public void setDrawColors(int[] drawColors) {
        this.drawColors = drawColors;
    }

    public int[] getDrawColors() {
        return drawColors;
    }
}


3.用法

a.多条折线

/**
     * 填充数据到line_chart
     */
    private void setData() {
        String[] title = {"网点", "专线", "分拨中心"};//标题
        ArrayList<String[]> data = new ArrayList<String[]>();//数据
        data.add(new String[]{"6", "1", "9", "3", "0", "8", "5"});//第一条折线数据
        data.add(new String[]{"5", "1", "2", "6", "1", "7", "9"});//第二条折线数据
        String[] tmp = new String[data.get(0).length];//第三条折线数据
        
        for (int i = 0; i < data.get(0).length; i++) {
            tmp[i] = Integer.parseInt(data.get(0)[i]) + Integer.parseInt(data.get(1)[i]) + "";
        }
        data.add(tmp);
        //画折线的颜色
        int[] colors = new int[3];
        colors[0] = getResources().getColor(R.color.theme_bg);
        colors[1] = getResources().getColor(R.color.orange_f92);
        colors[2] = getResources().getColor(R.color.theme_red);

        mChartView1.setTitle(title);//设置标题
        mChartView1.setDrawColors(colors);//设置颜色
        mChartView1.setData(data);//设置数据
        mChartView1.fresh();//刷新折线图
    }

b.单条折线

   /**
     * 填充数据到line_chart
     */
    private void setData(ChartView c) {
        String[] title=new String[]{"宁波中通路桥店"};
        ArrayList<String[]> data = new ArrayList<String[]>();//数据
        int[] colors;
        colors=new int[]{mActivity.getResources().getColor(R.color.theme_bg)};
        data.add(new String[]{"6", "1", "9", "3", "0", "8", "5"});
        c.setTitle(title);//设置标题
        c.setDrawColors(colors);//设置颜色
        c.setData(data);//设置数据
        c.fresh();//刷新折线图
    }




android 折线图控件demo
06-14
android 折线图控件demo 可控制双坐标值距离，方向，颜色，线条，可支持扩至滑动等
android自定义折线图表格控件
04-16
android自定义折线图表格控件 采用自己在画布绘制实现的一个折线图控件 支持多条线的展示以及各种自定义的方法
Android自定义View简易折线图控件（二）
01-04
继续练习自定义View，这次带来的是简易折线图，支持坐标点点击监听，效果如下： 画坐标轴、画刻度、画点、连线。。x、y轴的数据范围是写死的 1 <= x <= 7 ，1 <= y <= 70 。。写活的话涉及到坐标轴刻度的动态计算、坐标点的坐标修改，想想就头大，这里只练习自定义View。 1、在res/values文件夹下新建attrs.xml文件，编写自定义属性： <?xml version=1.0 encoding=utf-8?> <attr name=textCol
安卓 折线图控件
dianna7010的博客
10-07 278
国庆节啊 堕落啊 写了个折线图控件。。。。已封装成aar, 你可以自定义以下属性 使用方法如下 package com.wenxuan.mytestaar; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import com.wenxuan.l...
android自定义曲线控件,Android自定义折线图
weixin_35036735的博客
05-25 198
list = new ArrayList<>();private Listlist2 = new ArrayList<>();private Canvas canvas;public yuanxing(Context context) {super(context);initPaint();}public yuanxing(Context context, @Nullabl...
hellocharts-line.rar_安卓折线图控件_折线图 eclipse
07-14
本文将详细介绍一个基于Eclipse开发的安卓折线图控件——"hellocharts-line"，以及如何在实际项目中使用和自定义这个控件。 "hellocharts-line.rar" 是一个压缩包文件，其中包含了一个用于在Android设备上显示折线...
Android自定义控件实现折线图
01-04
本文实例实现一个如下图所示的Android折线图，供大家参考，具体内容如下 首先是控件绘图区域的划分，控件左边取一小部分（控件总宽度的八分之一）绘制表头，右边剩余的部分绘制表格 确定表格的行列数，首先绘制一...
Android开发自定义控件之折线图实现方法详解
08-19
本篇文章将深入探讨如何在Android中实现自定义折线图控件。 首先，自定义控件的实现有多种方式，如继承View、已存在的View、ViewGroup或已存在的ViewGroup。对于折线图这种单一的可视化元素，最简单的方法是直接...
Android-SmoothChartView一个简洁干净的曲线图控件
08-12
SmoothChartView一个简洁干净的曲线图控件，带有节点点击高亮效果，显示标签数值，并且标签会根据顶部是否有空间选择性显示在节点下方或上分。
Android studio实现折线图
12-20
Android studio实现折线图
Android 实时动态折线图Linechart
07-07
实现了折线图的实时动态更新，可以自定义X轴坐标，可是设置Y坐标的最大值和最小值，android 绘制折线图（AChartEngine）Linechart 动态更新横轴为获取的当前时间
android自定义曲线控件,Android自定义控件实现折线图
weixin_42358827的博客
05-25 575
本文实例实现一个如下图所示的Android折线图，供大家参考，具体内容如下首先是控件绘图区域的划分，控件左边取一小部分(控件总宽度的八分之一)绘制表头，右边剩余的部分绘制表格确定表格的行列数，首先绘制一个三行八列的网格，设置好行列的坐标后开始绘制/*绘制三条横线*/for(int i=0;i<3;i++){canvas.drawLine(textWide, mLineYs[i], total...
Android自定义控件图表-折线图
MG_ZXC的专栏
07-11 942
在Android开发中经常遇到一些图表的设计，我们有时一定会首先想到“轮子”方式解决，比如 MPAndroidChart、HelloCharts、WilliamChart这些比较流行的第三方库，但是有时候就怕设计师脑洞大开，通过第三方的库也无法满足项目中的要求，接下来我们通过自定义方式实现一个折线图，效果如下： 主要的功能是这样的图表的横轴为月份日期显示，纵轴为心情表情的显示，记录每一天的心...
安卓自定义控件之折线图
子敬的技术博客
07-03 808
自定义控件之折线图 目标： 效果图： 需求： 1、      折线图是固定的，不会滑动，但是随着点数的增多间距逐渐变小（需要在一页中可以看见全部的点）。 2、      横轴的数字也是随着点数的增多保持好间距。 3、      折现需要平滑一点 实现思路 因为没有滑动功能，所以思路比较简单。就是画线和画数字。根据点的多少来决定纵轴间的间距和下面数字之间的间距。
自定义控件-- 折线图--Android
quanjin24k的专栏
08-31 6408
继续我们的控件重写哈、 前阵子重写了个【柱状图】， 今天就看看这个【折线图】到底怎么整、 原理是一样的         依然没有用aChartEngine， 纯手工绘制；          绘制分析：            1.折线图讲求的也是一个坐标轴对称的一个概念，只要将这个换算做到位， 剩余工作就是体力活-绘制了；            2.明确折线图的元素，X轴，Y轴，刻度值，名称
Android 图表-折线图
qq377138858的博客
03-18 6273
Android 使用CombinedChart完成图表
【亲测免费】 探索Android-LineChart：一款强大的开源折线图表控件
最新发布
gitblog_01043的博客
08-28 611
探索Android-LineChart：一款强大的开源折线图表控件 在移动应用开发的世界中，数据可视化是提升用户体验的关键。今天，我们将深入了解一款名为 Android-LineChart 的开源项目，它为Android开发者提供了一个简单而强大的工具，用于在应用中展示折线和贝塞尔曲线图表。 项目介绍 Android-LineChart 是一个专为Android平台设计的图表控件，支持折线和贝塞尔...
安卓eclipse下自定义折线图控件实践指南
综上所述，本资源"hellocharts-line.rar_安卓折线图控件_折线图 eclipse"主要提供了关于在eclipse开发环境下制作并运行安卓折线图控件的知识，包括如何在Android设备上展示折线图、如何修改横纵坐标数据以自定义图表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值