Android实现动态添加数据与堆叠折线图详解流程

更新时间：2021年10月30日 12:00 点击：1307 作者：FranzLiszt1847

效果视频

引用

描述

本示例采用的是非常、非常、非常好用的一款第三方SDK——helloCharts
传送门

导包

第一步：导入maven

maven { url 'https://jitpack.io' }

第二步：导入依赖

implementation 'com.github.lecho:hellocharts-library:1.5.8@aar'

代码分析

本示例总共采用了三条折线，分别为温度、湿度、光照

初始化

初始化三条折线颜色

TmpLine = new Line( mTmpChart ).setColor( Color.parseColor( "#cc00ff" ) );
 HumLine= new Line( mHumChart ).setColor( Color.parseColor( "#0033ff" ) );
 LightLine = new Line( mLightChart ).setColor( Color.parseColor( "#cc0000" ) );

初始化三条折线样式

        TmpLine.setShape( ValueShape.SQUARE);
        TmpLine.setCubic(true);//曲线是否平滑，即是曲线还是折线
        TmpLine.setFilled(true);//是否填充曲线的面积
        TmpLine.setHasLabels(true);//曲线的数据坐标是否加上备注
        TmpLine.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        TmpLine.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）

        HumLine.setShape( ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
        HumLine.setCubic(true);//曲线是否平滑，即是曲线还是折线
        HumLine.setFilled(true);//是否填充曲线的面积
        HumLine.setHasLabels(true);//曲线的数据坐标是否加上备注
        HumLine.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        HumLine.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）

        LightLine.setShape( ValueShape.DIAMOND);//折线图上每个数据点的形状  这里是圆形 （有三种 ：ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND）
        LightLine.setCubic(true);//曲线是否平滑，即是曲线还是折线
        LightLine.setFilled(true);//是否填充曲线的面积
        LightLine.setHasLabels(true);//曲线的数据坐标是否加上备注
        LightLine.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        LightLine.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示（每个数据点都是个大的圆点）

将三条折线添加到折线集合内

        lines.add( TmpLine );
        lines.add( HumLine );
        lines.add( LightLine );

添加折线

        data = new LineChartData();
        data.setLines(lines);

初始化X轴、Y轴样式属性

        Axis axisX = new Axis(); //X轴
        axisX.setHasTiltedLabels(false);  //X坐标轴字体是斜的显示还是直的，true是斜的显示
        axisX.setTextColor(Color.RED);  //设置字体颜色
        //axisX.setName("时间");  //表格名称
        axisX.setTextSize(7);//设置字体大小
        axisX.setMaxLabelChars(10); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称
        data.setAxisXBottom(axisX); //x 轴在底部
        //data.setAxisXTop(axisX);  //x 轴在顶部
        axisX.setHasLines(true); //x 轴分割线

        // Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
        Axis axisY = new Axis();  //Y轴
        axisY.setName("历史数据");//y轴标注
        axisY.setTextSize(10);//设置字体大小
        axisY.setTextColor( Color.RED );
        axisX.setLineColor( Color.GREEN );
        data.setAxisYLeft(axisY);  //Y轴设置在左边

设置折线图支持滑动、缩放、平移等功能

        lineChart.setInteractive(true);
        lineChart.setZoomType( ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setLineChartData(data);
        lineChart.setVisibility( View.VISIBLE);

        Viewport v = new Viewport(lineChart.getMaximumViewport());
        v.left = 0;
        v.right = 7;
        lineChart.setCurrentViewport(v);

动态添加数据

采用Timer动态添加数据

  private void getValue(){
      timer = new Timer(  );
      timer.schedule( new TimerTask() {
          @Override
          public void run() {
           runOnUiThread( ()->{
               getTmp();
               getHum();
               getLight();
           } );
          }
      } ,100,2000);
  }

温度数据

从云获取数据

 float tmp = Float.parseFloat( pointDTO.get( i ).Value );

刷新数据，(很重要)

 lineChart.setLineChartData(data);

private void getTmp(){
      business.getSensorData( Param.DEVICEID, Param.TMPTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
          @Override
          protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {

          }

          @Override
          public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
              super.onResponse( call, response );
              BaseResponseEntity<SensorDataPageDTO> dto = response.body();
              if (dto != null && dto.getStatus() == 0){
                  List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
                  if (pointDTO != null){
                      for (int i = 0; i <pointDTO.size() ; i++) {
                          float tmp = Float.parseFloat( pointDTO.get( i ).Value );
                          //Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
                          mTmpChart.add( new PointValue( i,tmp ) );
                          lineChart.setLineChartData(data);
                      }
                  }else {
                   Toast.makeText( context,"数据为空",Toast.LENGTH_SHORT ).show();
                  }
              }
          }
      } );
  }

湿度数据

business.getSensorData( Param.DEVICEID, Param.HUMTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
          @Override
          protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {

          }

          @Override
          public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
              super.onResponse( call, response );
              BaseResponseEntity<SensorDataPageDTO> dto = response.body();
              if (dto != null && dto.getStatus() == 0){
                  List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
                  if (pointDTO != null){
                      for (int i = 0; i <pointDTO.size() ; i++) {
                          float hum = Float.parseFloat( pointDTO.get( i ).Value );
                          //Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
                          mHumChart.add( new PointValue( i,hum ) );
                          lineChart.setLineChartData(data);
                      }
                  }else {
                      Toast.makeText( context,"数据为空",Toast.LENGTH_SHORT ).show();
                  }
              }
          }
      } );
  }

光照数据

 private void getLight(){
      business.getSensorData( Param.DEVICEID, Param.LIGHTTAG, "1", "1", null, null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
          @Override
          protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {

          }

          @Override
          public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
              super.onResponse( call, response );
              BaseResponseEntity<SensorDataPageDTO> dto = response.body();
              if (dto != null && dto.getStatus() == 0){
                  List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
                  if (pointDTO != null){
                      for (int i = 0; i <pointDTO.size() ; i++) {
                          float light = Float.parseFloat( pointDTO.get( i ).Value );
                          //Toast.makeText( context,tmp+"",Toast.LENGTH_SHORT ).show();
                          mLightChart.add( new PointValue( i,light ) );
                          lineChart.setLineChartData(data);
                      }
                  }else {
                      Toast.makeText( context,"数据为空",Toast.LENGTH_SHORT ).show();
                  }
              }
          }
      } );
  }

动态添加X轴时间值

初始化

X轴自动刷新时间依旧采用Timer实现
这俩属性较为重要

        axisX.setTextSize(7);//设置字体大小
        axisX.setMaxLabelChars(10); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的

X轴属性初始化

        Axis axisX = new Axis(); //X轴
        axisX.setHasTiltedLabels(false);  //X坐标轴字体是斜的显示还是直的，true是斜的显示
        axisX.setTextColor(Color.RED);  //设置字体颜色
        //axisX.setName("时间");  //表格名称
        axisX.setTextSize(7);//设置字体大小
        axisX.setMaxLabelChars(10); //最多几个X轴坐标，意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称
        data.setAxisXBottom(axisX); //x 轴在底部
        //data.setAxisXTop(axisX);  //x 轴在顶部
        axisX.setHasLines(true); //x 轴分割线

自动刷新时间实现

    private void getAxis() {
        timerY = new Timer(  );
        timerY.schedule( new TimerTask() {
            @Override
            public void run() {
                test();
            }
        },100,2000 );

    }

private void test(){
                business.getSensorData( Param.DEVICEID, Param.TMPTAG, "1", "1", null,null, "ASC", "20", "1", new NCallBack<BaseResponseEntity<SensorDataPageDTO>>(context) {
            @Override
            protected void onResponse(BaseResponseEntity<SensorDataPageDTO> response) {

            }

            @Override
            public void onResponse(Call<BaseResponseEntity<SensorDataPageDTO>> call, Response<BaseResponseEntity<SensorDataPageDTO>> response) {
                super.onResponse( call, response );
                BaseResponseEntity<SensorDataPageDTO> dto = response.body();
                if (dto != null && dto.getStatus() == 0){
                    List<SensorDataPageDTO.VR> pointDTO = dto.getResultObj().DataPoints.get( 0 ).PointDTO;
                    SensorDataPageDTO.VR[] array = new SensorDataPageDTO.VR[pointDTO.size()];
                    pointDTO.toArray(array);
                    mAxisXValues.clear();
                    mTime = new String[array.length];
                        for (int i = 0; i < array.length ; i++) {
                            //mAxisXValues.clear();
                            mTime[i] = pointDTO.get( i ).RecordTime;
                            mAxisXValues.add(new AxisValue(i).setLabel(mTime[i]));
                        }
                    runOnUiThread( ()->{
                        lineChart.setLineChartData(data);
                    } );
                }
            }
        } );
    }

尾言

如有不足之处，望君海涵
需要源码，call我

到此这篇关于Android实现动态添加数据与堆叠折线图详解流程的文章就介绍到这了,更多相关Android 动态添加数据内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/News53231323/article/details/120576778

[!--infotagslink--]

上一篇: Android MVVM架构实现RecyclerView列表详解流程

下一篇: Android中EditText光标的显示与隐藏方法

Android子控件超出父控件的范围显示出来方法
下面我们来看一篇关于Android子控件超出父控件的范围显示出来方法，希望这篇文章能够帮助到各位朋友，有碰到此问题的朋友可以进来看看哦。 <RelativeLayout xmlns:an...2016-10-02
Android开发中findViewById()函数用法与简化
findViewById方法在android开发中是获取页面控件的值了，有没有发现我们一个页面控件多了会反复研究写findViewById呢，下面我们一起来看它的简化方法。 Android中Fin...2016-09-20
Android模拟器上模拟来电和短信配置
如果我们的项目需要做来电及短信的功能，那么我们就得在Android模拟器开发这些功能，本来就来告诉我们如何在Android模拟器上模拟来电及来短信的功能。在Android模拟...2016-09-20
夜神android模拟器设置代理的方法
夜神android模拟器如何设置代理呢？对于这个问题其实操作起来是非常的简单，下面小编来为各位详细介绍夜神android模拟器设置代理的方法，希望例子能够帮助到各位。 app...2016-09-20
android自定义动态设置Button样式【很常用】
为了增强android应用的用户体验，我们可以在一些Button按钮上自定义动态的设置一些样式，比如交互时改变字体、颜色、背景图等。今天来看一个通过重写Button来动态实...2016-09-20
Android WebView加载html5页面实例教程
如果我们要在Android应用APP中加载html5页面，我们可以使用WebView，本文我们分享两个WebView加载html5页面实例应用。实例一：WebView加载html5实现炫酷引导页面大多...2016-09-20
深入理解Android中View和ViewGroup
深入理解Android中View和ViewGroup从组成架构上看，似乎ViewGroup在View之上，View需要继承ViewGroup，但实际上不是这样的。View是基类，ViewGroup是它的子类。本教程我们深...2016-09-20
Android自定义WebView网络视频播放控件例子
下面我们来看一篇关于Android自定义WebView网络视频播放控件开发例子，这个文章写得非常的不错下面给各位共享一下吧。因为业务需要，以下代码均以Youtube网站在线视...2016-10-02
Android用MemoryFile文件类读写进行性能优化
java开发的Android应用，性能一直是一个大问题，，或许是Java语言本身比较消耗内存。本文我们来谈谈Android 性能优化之MemoryFile文件读写。 Android匿名共享内存对外A...2016-09-20
Android设置TextView竖着显示实例
TextView默认是横着显示了，今天我们一起来看看Android设置TextView竖着显示如何来实现吧，今天我们就一起来看看操作细节，具体的如下所示。在开发Android程序的时候，...2016-10-02
android.os.BinderProxy cannot be cast to com解决办法
本文章来给大家介绍关于android.os.BinderProxy cannot be cast to com解决办法，希望此文章对各位有帮助呀。 Android在绑定服务的时候出现java.lang.ClassCastExc...2016-09-20
Android 实现钉钉自动打卡功能
这篇文章主要介绍了Android 实现钉钉自动打卡功能的步骤，帮助大家更好的理解和学习使用Android，感兴趣的朋友可以了解下...2021-03-15
Android 开发之布局细节对比：RTL模式
下面我们来看一篇关于Android 开发之布局细节对比：RTL模式，希望这篇文章对各位同学会带来帮助，具体的细节如下介绍。前言讲真，好久没写博客了，2016都过了一半了，赶紧...2016-10-02
Android中使用SDcard进行文件的读取方法
首先如果要在程序中使用sdcard进行存储，我们必须要在AndroidManifset.xml文件进行下面的权限设置: 在AndroidManifest.xml中加入访问SDCard的权限如下: <!--...2016-09-20
Android开发之PhoneGap打包及错误解决办法
下面来给各位简单的介绍一下关于Android开发之PhoneGap打包及错误解决办法，希望碰到此类问题的同学可进入参考一下哦。在我安装、配置好PhoneGap项目的所有依赖...2016-09-20
用Intel HAXM给Android模拟器Emulator加速
Android 模拟器 Emulator 速度真心不给力，，现在我们来介绍使用 Intel HAXM 技术为 Android 模拟器加速，使模拟器运行度与真机比肩。周末试玩了一下在Eclipse中使...2016-09-20
Android判断当前屏幕是全屏还是非全屏
在安卓开发时我碰到一个问题就是需要实现全屏，但又需要我们来判断出用户是使用了全屏或非全屏了，下面我分别找了两段代码，大家可参考。先来看一个android屏幕全屏实...2016-09-20
Android开发中布局中的onClick简单完成多控件时的监听的利与弊
本文章来为各位介绍一篇关于Android开发中布局中的onClick简单完成多控件时的监听的利与弊的例子，希望这个例子能够帮助到各位朋友．首先在一个控件加上这么一句：and...2016-09-20
Ubuntu 系统下安装Android开发环境 Android Studio 1.0 步骤
Android Studio 是一个Android开发环境，基于IntelliJ IDEA. 类似 Eclipse ADT，Android Studio 提供了集成的 Android 开发工具用于开发和调试，可以在Linux，Mac OS X，Window...2016-09-20
Android实现简单用户注册案例
这篇文章主要为大家详细介绍了Android实现简单用户注册案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-05-26