安卓可上下滑动改变数值的折线图（基于hellochart）

最新推荐文章于 2024-08-08 07:48:50 发布
最新推荐文章于 2024-08-08 07:48:50 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： Android填坑记 文章标签： 安卓 折线图 滑动改变数值 hellochart 自定义View
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zheng_weichao/article/details/86668127
版权

需求

接手的公司的一个项目，有一个需求是折线图可以通过上下滑动改变数值。原先的大佬自己从头写的，也能实现功能。大佬后来也把思路和代码分享出来了。大家有兴趣的可以看一下。
手把手教你写一个可以上下滑动点改变值的安卓折线图
因为后来需求有些变动，原来的代码改动起来略显吃力，于是自己又以hellocharts为基础重新封装了一个自定义VIew，以此来实现功能。使用起来也更简洁一些。

需求明确：

  • 多条折线图切换滑动
  • 手动上下滑动改变数值

实现效果图

滑动折线图

分析

现在最好用的图表库大概就是hellochart了。但是hellochart并没有提供滑动改变数值的接口以及相关内容。因此我们在hellochart的基础上进行功能扩展，通过自定义控件来实现如图效果。
首先需要确定用户点击的是哪一条线，哪一个点。然后对对应的数据进行操作。重新进行赋值改变图表显示。

实现

尺寸计算

首先计算控件宽高，因为要滑动，不宜进行1：1的计算，滑动难度高。因此乘以0.75，以方便响应用户手势操作。

int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();

hLength = width * 0.75f;          // x轴长度
vLength = height * 0.75f;         // y轴长度

触摸 - 按下响应事件

lineChartData = vccharts.this.getLineChartData();

                for (int i = 0; i < lineChartData.getLines().size(); i++) {
                    Line line = lineChartData.getLines().get(i);
                    int pointRadius = ChartUtils.dp2px(density, line.getPointRadius());
                    for (int j = 0; j < line.getValues().size(); j++) {
                        PointValue pointValue = line.getValues().get(j);
                        final float rawValueX = vccharts.this.getChartComputator().computeRawX(pointValue.getX());
                        final float rawValueY = vccharts.this.getChartComputator().computeRawY(pointValue.getY());
                        if (isInArea(rawValueX, rawValueY, touchX, touchY, pointRadius + touchToleranceMargin)) {
                            LogUtils.e("     xuanzhong   xxx " + pointValue.getX() + "        yyy   " + pointValue.getY() + "           ");
                            vccharts.this.lineIndex = i;
                            vccharts.this.pointIndex = j;
                            isMoveChange = true;
                            for (Line line1 : lineChartData.getLines()) {
                                line1.setStrokeWidth(2);
                            }
                            line.setStrokeWidth(4);
                            selectLineNumber = i;
                        }
                    }
                }

触摸 - 移动响应事件

移动的时候需要判断位移以及差值，重新计算比例，确定新数值，进而更新数据，刷新View显示。

                    float y_max = 10;
                    float y_min = 0;
//                    如果没有选中任何点
                    if (pointIndex == -1 || lineIndex == -1) {
                        return super.onTouchEvent(event);
                    }
                    lineChartData = vccharts.this.getLineChartData();
                    float y = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).getY();
                    float x = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).getX();
                    float y_new = y_max - coordinateConversionY(touchY);

数值保护，防止超过数据边界

    if (y_new < y_pre) {
           y_new = y_pre;
     }
    if (y_new > y_after) {
           y_new = y_after;
    }
    if (y_new < y_min) {
            y_new = y_min;
    }
    if (y_new > y_max) {
           y_new = y_max;
    }

重新设置数据，通知数据变化

lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).set(x, y_new);
// 通知数据变化
 postInvalidate();

触摸 - 抬起事件

抬起的时候，取消选择的线条的状态，并且计算最终数据，进行显示

if (vccharts.this.pointIndex == -1 || vccharts.this.lineIndex == -1) {
                        isMoveChange = false;
                        return true;
                    }

                    //                    通知数据变化
                    List<PointValue> values = lineChartData.getLines().get(lineIndex).getValues();
                    float[] changeData = new float[values.size()];
                    for (int i = 0; i < values.size(); i++) {
                        changeData[i] = values.get(i).getY();
                    }

                    try {
                        if (vcListener != null) {
                            vcListener.DataChange(lineIndex, new ZuniData(changeData));
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }

                    postInvalidate();

                    isMoveChange = false;
                    vccharts.this.pointIndex = -1;
                    vccharts.this.lineIndex = -1;
                    return true;

判断是否点击对应点

    private boolean isInArea(float x, float y, float touchX, float touchY, float radius) {
        float diffX = touchX - x;
        float diffY = touchY - y;
        return Math.pow(diffX, 2) + Math.pow(diffY, 2) <= 2 * Math.pow(radius, 2);
    }

完整代码：

public class vccharts extends LineChartView {
    private static final int DEFAULT_TOUCH_TOLERANCE_MARGIN_DP = 4;
    private final ChartTouchHandler0 touchHandler0;
    boolean isMoveChange = false; // 是否需要根据移动改变
    boolean isBetterPreAfter = true; // 是否需要比较前后
    int pointIndex;
    int lineIndex;
    private LineChartData lineChartData;
    private float vLength;// 竖线长度
    private float hLength;// 横线长度
    private float density;
    private int touchToleranceMargin;
    private int moveNumber = 0;
    private int selectLineNumber = -1; // 现在选中的线条
    private vcDataChangeListener vcListener;


    public vccharts(Context context, AttributeSet attrs) {
        super(context, attrs);

        try {
            density = context.getResources().getDisplayMetrics().density;
            touchToleranceMargin = ChartUtils.dp2px(density, DEFAULT_TOUCH_TOLERANCE_MARGIN_DP);
            LogUtils.e("  touchToleranceMargin  " + touchToleranceMargin);
        } catch (Exception e) {
            e.printStackTrace();
        }
        touchHandler0 = new ChartTouchHandler0(context, this);
        vccharts.this.post(new Runnable() {

            @Override
            public void run() {
                //在此处调用view.getMeasuredWidth()和getMeasuredHeight（）可得到正确值
                int width = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
                int height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();

                hLength = width * 0.75f;          // x轴长度
                vLength = height * 0.75f;         // y轴长度

                LogUtils.e("  vLength " + vLength + "  h " + hLength);
            }
        });
    }

    public void setVcListener(vcDataChangeListener vcListener) {
        this.vcListener = vcListener;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float touchY = event.getY();
        float touchX = event.getX();

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                LogUtils.e("                 按下了  ");

                moveNumber = 0;
                lineChartData = vccharts.this.getLineChartData();

                for (int i = 0; i < lineChartData.getLines().size(); i++) {
                    Line line = lineChartData.getLines().get(i);
                    int pointRadius = ChartUtils.dp2px(density, line.getPointRadius());
                    for (int j = 0; j < line.getValues().size(); j++) {
                        PointValue pointValue = line.getValues().get(j);
                        final float rawValueX = vccharts.this.getChartComputator().computeRawX(pointValue.getX());
                        final float rawValueY = vccharts.this.getChartComputator().computeRawY(pointValue.getY());
                        if (isInArea(rawValueX, rawValueY, touchX, touchY, pointRadius + touchToleranceMargin)) {
                            LogUtils.e("     xuanzhong   xxx " + pointValue.getX() + "        yyy   " + pointValue.getY() + "           ");
                            vccharts.this.lineIndex = i;
                            vccharts.this.pointIndex = j;
                            isMoveChange = true;
                            for (Line line1 : lineChartData.getLines()) {
                                line1.setStrokeWidth(2);
                            }
                            line.setStrokeWidth(4);
                            selectLineNumber = i;
                        }
                    }
                }
                return true;
            case MotionEvent.ACTION_MOVE:
                if (isMoveChange) {
                    float y_max = 10;
                    float y_min = 0;
//                    如果没有选中任何点
                    if (pointIndex == -1 || lineIndex == -1) {
                        return super.onTouchEvent(event);
                    }
                    lineChartData = vccharts.this.getLineChartData();
                    float y = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).getY();
                    float x = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).getX();
                    float y_new = y_max - coordinateConversionY(touchY);
                    if (isBetterPreAfter) {
                        float y_pre = y_min;
                        float y_after = y_max;
                        if (pointIndex < lineChartData.getLines().get(lineIndex).getValues().size() - 1) {
                            y_after = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex + 1).getY();
                        }
                        if (pointIndex > 0) {
                            y_pre = lineChartData.getLines().get(lineIndex).getValues().get(pointIndex - 1).getY();
                        }
                        if (y_new < y_pre) {
                            y_new = y_pre;
                        }
                        if (y_new > y_after) {
                            y_new = y_after;
                        }
                    }

                    if (y_new < y_min) {
                        y_new = y_min;
                    }
                    if (y_new > y_max) {
                        y_new = y_max;
                    }
                    lineChartData.getLines().get(lineIndex).getValues().get(pointIndex).set(x, y_new);
//                    通知数据变化
                    /*List<PointValue> values = lineChartData.getLines().get(lineIndex).getValues();
                    float[] changeData = new float[values.size()];
                    for (int i = 0; i < values.size(); i++) {
                        changeData[i] = values.get(i).getY();
                    }*/
                    postInvalidate();
                    /*if (vcListener != null) {
                        moveNumber++;
                        if (moveNumber % 3 == 0) {
                            vcListener.DataChange(lineIndex, new ZuniData(changeData));
                        }
                    }*/
                }
                return super.onTouchEvent(event);
            case MotionEvent.ACTION_UP:
                LogUtils.e("  move " + moveNumber);
                if (isMoveChange) {
                    if (vccharts.this.pointIndex == -1 || vccharts.this.lineIndex == -1) {
                        isMoveChange = false;
                        return true;
                    }

                    //                    通知数据变化
                    List<PointValue> values = lineChartData.getLines().get(lineIndex).getValues();
                    float[] changeData = new float[values.size()];
                    for (int i = 0; i < values.size(); i++) {
                        changeData[i] = values.get(i).getY();
                    }

                    try {
                        if (vcListener != null) {
                            vcListener.DataChange(lineIndex, new ZuniData(changeData));
                        }
                    } catch (Exception e) {
                        e.printStackTrace();
                    }

                    postInvalidate();

                    isMoveChange = false;
                    vccharts.this.pointIndex = -1;
                    vccharts.this.lineIndex = -1;
                    return true;
                }
                return true;
            case MotionEvent.ACTION_CANCEL:
                if (isMoveChange) {
                    isMoveChange = false;
                    vccharts.this.pointIndex = -1;
                    vccharts.this.lineIndex = -1;
                    return true;
                }
                return true;
        }
        return super.onTouchEvent(event);
    }

    // 把坐标从 y 轴的位置转换成实际的值
    private float coordinateConversionY(float y) {
        LogUtils.i("坐标从 y 轴的位置转换成实际的值" + (10 - 0) / vLength * y);
        return (10 - 0) / vLength * y;
    }

    // 把坐标从 x 轴的位置转换成实际的值
    private float coordinateConversionX(float x) {
        LogUtils.i("坐标从 x 轴的位置转换成实际的值" + (11 - 0) / hLength * x);
        return (11 - 0) / hLength * x;
    }

    private boolean isInArea(float x, float y, float touchX, float touchY, float radius) {
        float diffX = touchX - x;
        float diffY = touchY - y;
        return Math.pow(diffX, 2) + Math.pow(diffY, 2) <= 2 * Math.pow(radius, 2);
    }

    public int getSelectLineNumber() {
        return selectLineNumber;
    }

    public void setSelectLineNumber(int selectLineNumber) {
        this.selectLineNumber = selectLineNumber;
    }

    public boolean isBetterPreAfter() {
        return isBetterPreAfter;
    }

    public void setBetterPreAfter(boolean betterPreAfter) {
        isBetterPreAfter = betterPreAfter;
    }

    public interface vcDataChangeListener {
        void DataChange(int line_index, ZuniData ZuniData);
    }
}
vchao_
关注
专栏目录
android自定义折线图可左右滑动,Android自定义View实现折线图效果
weixin_29095587的博客
05-25 891
下面就是结果图(每种状态用一个表情图片表示)：一、主页面的布局文件如下：xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"xmlns:app="http://...
可滑动的折线图
08-11
可滑动的折线图，带数值指示，滑动停止自动调整滑动的位置。’
Android自定义折线图，可左右滑动，可点击
01-10
Android自定义折线图，可左右滑动，可点击，使用简单轻便
可滑动的折线图，代码简单，支持点击，方便自定义
03-15
1，代码逻辑简单，方便自定义 2，支持点击事件 3，可以滑动，动态改变数据
HelloCharts Android 图表库教程
最新发布
gitblog_00234的博客
08-08 681
HelloCharts Android 图表库教程 hellocharts-androidCharts library for Android compatible with API 8+, several chart types with scaling, scrolling and animations ????项目地址:https://gitcode.com/gh_mirrors/he/hell...
Android移动开发之【Android实战项目】DAY5-MPAndroidChart可滑动折线图
李响
02-09 2190
一、添加依赖 Usage allprojects { repositories { maven { url 'https://jitpack.io' } } } App level build.gradle（在app的build.gradle中添加依赖） dependencies { implementation 'com.github.PhilJay...
android 折线图滑动 - 防小米天气24小时预报折线图
03-23
android 折线图滑动 - 防小米天气24小时预报折线图
Android自定义可左右滑动和点击的折线图
08-26
主要为大家详细介绍了Android自定义可左右滑动和点击的折线图，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android HelloChart开源库图表之折线图的实例代码
08-27
以下是基于Android HelloChart开源库图表之折线图的实例代码的知识点： 1. HelloChart开源库简介：HelloChart是一个开源的图表库，用于在Android应用程序中绘制各种图表，包括折线图、柱形图、饼图等。它具有很好的...
Android代码-安卓可滑动折线图演示工程
08-06
这个"Android代码-安卓可滑动折线图演示工程"，即`LineChartDemo`，是专门用于演示如何在Android应用中实现可滑动的折线图功能。通过此项目，开发者可以学习到如何利用Android的图形库来创建动态、交互式的图表。 ...
可滑动可点击的折线图
11-10
可滑动可点击的折线图，很简单，不过很多人不使用，所以你下了没什么用，特定的需求的
自定义左右滑动折线图
08-24
自定义折线图，可以左右滑动或根据需求自己改动代码。
Android 手绘折线图
05-06
package com.example.linchartdemo.view; import java.util.List; import android.R.color; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Typeface; import android.util.AttributeSet; import android.util.Log; import android.view.View; public class ZXView extends View { private List<Integer> xlist;// X坐标标签 private List<Integer> ylist;// Y坐标标签 private List<Integer> params;// 参数集合 private Paint paint; private Paint paintLines; private Paint paintArc; private Paint paintText; private int textsize = 20; private float Xoffset = 0;// X轴偏移或叫间隔 private float Yoffset = 0;// Y轴偏移或叫间隔 public float XSpac = 50; public float Xspac = 50; public float YSpac = 50; public float rightXspac = 50; public float rightYspac = 50; public float circleRadius = 10; private float lastX = -1; private float lastY = -1; public ZXView(Context context, List<Integer> xlists, List<Integer> ylists, List<Integer> paramss) { super(context); xlist = xlists; ylist = ylists; params = paramss; initWidget(); } public ZXView(Context context, AttributeSet attrs) { super(context, attrs); initWidget(); } public ZXView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initWidget(); } public void initViewData(List<Integer> xlists, List<Integer> ylists, List<Integer> paramss) { xlist = xlists; ylist = ylists; params = paramss; } @Override protected void onDraw(Canvas canvas) { drawXY(canvas); drawLine(canvas); super.onDraw(canvas); } public void updataUI() { invalidate(); } /** * 画折线 * * @param canvas */ private void drawLine(Canvas canvas) { Xoffset = ((getWidth()) - 20) / (xlist.size()); Yoffset = (getHeight()) / (ylist.size()); Log.i("texts", "X=" + Xoffset + "Y=" + Yoffset); float rulerOffset = 0; if (xlist.size() < 2) throw new IllegalArgumentException("the params argument is <2"); else rulerOffset = (xlist.get(1) - xlist.get(0)); if (params == null && params.size() <= 0) throw new IllegalArgumentException("the params is null or 0"); // Paint p = new Paint(); // p.setAntiAlias(true); // p.setTextSize(25); // p.setColor(Color.WHITE); // canvas.drawText("KW", 10 + Xoffset, 20, p); for (int i = 0; i < params.size(); i++) { int param = params.get(i); float histigramHight = param * (Yoffset / rulerOffset); float currentX = (Xoffset * i + Xspac + 5); float currentY = (getHeight() - YSpac - histigramHight); canvas.drawCircle(currentX, currentY, circleRadius, paintArc); if (lastX != -1) { canvas.drawLine(lastX, lastY, currentX, currentY, paintLines); } lastX = currentX; lastY = currentY; } // 重置lastX跟Y lastX = -1; lastY = -1; } /** * 画坐标轴 * * @param canvas */ private void drawXY(Canvas canvas) { canvas.drawLine(XSpac, 0, XSpac, getHeight() - 5 - XSpac, paint);// x canvas.drawLine(XSpac, getHeight() - XSpac, getWidth(), getHeight() - XSpac, paint);// y canvas.drawLine(getWidth(), 0, getWidth() - 1, getWidth() - YSpac, paint);// 右边Y float yoffset = getHeight() / ylist.size(); float xoffset = (getWidth() - XSpac) / xlist.size(); // 画字 for (int i = 0; i < ylist.size(); i++) { canvas.drawText(ylist.get(i) + "", 0, getHeight() - yoffset * i - YSpac, paintText); } for (int i = 0; i < xlist.size(); i++) { canvas.drawText(xlist.get(i) + "", XSpac + xoffset * i, getHeight() - YSpac + textsize, paintText); } // for (int i = 0; i < ylist.size(); i++) { // for (int j = 0; j < 50; j++) { // canvas.drawLine(XSpac + j * 303, yoffset * i - YSpac, XSpac + j // * 30 + 20, yoffset * i - YSpac, paint); // } // } } /** * 初始化画笔 */ private void initWidget() { paint = new Paint(); paint.setColor(Color.parseColor("#999999")); paint.setTypeface(Typeface.DEFAULT); paint.setAntiAlias(true); paint.setStrokeWidth(2); paintLines = new Paint(); paintLines.setColor(Color.parseColor("#00B4EA")); paintLines.setTypeface(Typeface.DEFAULT); paintLines.setAntiAlias(true); paintLines.setStrokeWidth(3); paintArc = new Paint(); paintArc.setColor(Color.parseColor("#EBEEEF")); paintArc.setTypeface(Typeface.DEFAULT); paintArc.setAntiAlias(true); paintArc.setStrokeWidth(2); paintText = new Paint(); // paintText.setColor(Color.parseColor("#ffffff")); paintText.setTypeface(Typeface.DEFAULT); paintText.setAntiAlias(true); paintText.setStrokeWidth(2); paintText.setTextSize(textsize); } }
可拖动的折线图jqplot
10-22
里面有可以设置折线拖动的包。 具体自己实现吧。
左右滑动的曲线统计图
01-19
自定义view，想recyclerView那样加载曲线统计图，项目需求统计图能显示很多的数据，一次性加载特别卡，所以用类似分页加载的方法
android studio 统计图生成app（柱状图/折线图/饼图/折线柱状结合图）
03-29
android studio 统计图生成app（柱状图/折线图/饼图/折线柱状结合图）从数据库中读取数据生成统计图
Android 可左右滑动的动态赛贝尔曲线，纵坐标可设置刻度不均匀
yuanjj5549的博客
12-13 467
Android实时添加数据的赛贝尔曲线，手动自动左右滑动，纵坐标可实现不同刻度
Android自定义横向滚动折线图
□□□□□□
01-05 500
在2020年的最后一天，来一个滚动折线图收尾吧 不多说直接看view @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); if (changed) { mWidth = getWidth()
HelloChart折线图的改写
zjf_0812的博客
07-18 2341
HelloChart折线图的改写因为在实际应用中，原来的HelloChart不能满足我的需求，比如自定义Y轴，修改间距，修改圆点类型颜色等等，所以需要修改一些源码来实现这些功能。原来的HelloChart介绍和集成就不多说了，请点击参考现要达到如下效果： 修改圆点样式在LineChartRenderer这个类中，找到pointPaint这个画笔，可以修改如下属性： pointPaint.setAn
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值