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

2024-12-15 19:39:39

效果视频

引用

描述

本示例采用的是非常、非常、非常好用的一款第三方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 动态添加数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Android 根据EditText搜索框ListView动态显示数据

根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layout,包含一个EditText搜索框和一个ListView 2.创建一个数据集mData,用于ListView的Adapter的创建 3.添加EditText的文本改变的监听器 4.利用notifyDataSetChanged()动态更新ListView 第一步:创建一个搜索框这个还是比较容易的,这
Android 动态添加view或item并获取数据的实例

最近在做一项目,项目中用到了一个功能,要求是动态Item,而且是多个的情况下,不过仔细的分析了下,都大同小异,做起来也很简单,在这里我只抽取出来做了一demo,也只做了一个动态添加item,同时可以获取所有添加和编辑Item上的数据,先上图: 我们先来分析一下这个demo: 两个TextView和EditText,一个Button,一个星级评价RatingBar控件,布局完事- activity_dynamic的布局,有可能会添加多个,所以外面用ScrollView,因为我们是垂直方向添加,所以
Android列表组件ListView使用详解之动态加载或修改列表数据

在使用ListView组件来显示列表数据时,有的时候我们需要改变列表中的数据,有以下方法: 1.重新给ListView组件设置适配器这种方法重新创建了ListView,效率不好. 2.使用适配器中的方法 /** * Notifies the attached observers that the underlying data has been changed * and any View reflecting the data set should refresh itself. */ pu
Android开发中Listview动态加载数据的方法示例

本文实例讲述了Android开发中Listview动态加载数据的方法.分享给大家供大家参考,具体如下: 最近在研究网络数据加载的问题,比如我有几百,甚至上千条数据,这些数据如果一次性全部加载到arraylist,然后再加载到Listview中.我们必然会去单独开线程来做,这样造成的结果就是会出现等待时间很长,用户体验非常不好.我的想法是动态加载数据,第一次加载十条,然后往下面滑动的时候再追加十条,再往下面滑动的时候再去追加,这样大大减少了用户等待的时间,同时给处理数据留下了时间.网上看到了这样一
android ListView内数据的动态添加与删除实例代码

main.xml 文件: 复制代码代码如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_pa
Android实现ListView数据动态加载的方法

本文实例讲述了Android实现ListView数据动态加载的方法.分享给大家供大家参考,具体如下: list.setOnScrollListener(new OnScrollListener() { //添加滚动条滚到最底部,加载余下的元素 public void onScrollStateChanged(AbsListView view, int scrollState) { // if (scrollState == OnScrollListener.SCROLL_STATE_IDLE)
Android实现listview动态加载数据分页的两种方法

在android开发中,经常需要使用数据分页,比如要实现一个新闻列表的显示,或者博文列表的显示,不可能第一次加载就展示出全部,这就需要使用分页的方法来加载数据,在android中Handler经常用来在耗时的工作中,它接收子线程发送的数据,并使用数据配合更新UI,AsyncTask是在一个线程中执行耗时操作然后把结果传给UI线程,不需要你亲自去管理线程和句柄. 一.使用Handler+线程方法 1.基础知识 Handler在android系统中,主要负责发送和接收消息,它的用途主要有以下两种:
Android实现动态添加数据与堆叠折线图详解流程

目录效果视频引用描述导包代码分析初始化动态添加数据温度数据湿度数据光照数据动态添加X轴时间值初始化自动刷新时间实现尾言效果视频引用描述本示例采用的是非常.非常.非常好用的一款第三方SDK--helloCharts 传送门导包第一步 :导入maven maven { url 'https://jitpack.io' } 第二步:导入依赖 implementation 'com.github.lecho:hellocharts-library:1.5.8@aa
Python pyecharts绘制折线图详解

一.绘制折线图 import seaborn as sns import numpy as np import pandas as pd import matplotlib as mpl import matplotlib.pyplot as plt %matplotlib inline plt.rcParams['font.sans-serif']=['Microsoft YaHei'] # 用来正常显示中文标签 plt.rcParams['axes.unicode_minus']=False
JavaScript实现动态添加，删除行的方法实例详解

本文实例讲述了JavaScript实现动态添加,删除行的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>增加Table行</title> </head> <script language="javascript
微信小程序使用echarts获取数据并生成折线图

微信小程序使用echarts,实现左右双Y轴,动态获取数据,生成折线图本来使用的是wxcharts,但发现实现不了左右双y轴的效果,就换成echarts 要实现这样的效果,需要以下几步: (1)去github下载插件,放进自己的项目里只需要将名称是ec-canvas的文件夹放进自己项目里. 像这样: (2)分别写小程序的四个文件 ① echart.json { "usingComponents": { "ec-canvas": "../../ec-ca
JS中利用localStorage防止页面动态添加数据刷新后数据丢失

非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use
jquery Ajax实现Select动态添加数据

jquery Ajax实现Select动态添加数据,具体内容如下 1.背景最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示.但是,这次要实现select与别的选项框联动,也就是要动态添加option数据.查阅了很多资料,终于搞定.下面就分享一下,如何利用jQuery和Ajax实现select动态添加数据. 2.本文代码实现的是车辆型号根据车辆品牌联动显示的功能.首先,是jsp中的车辆品牌定义,这个很简单.如下:
Python SqlAlchemy动态添加数据表字段实例解析

本文研究的主要是Python SqlAlchemy动态添加数据表字段,具体如下. 我们知道使用SqlAlchemy创建类来映射数据表,类属性等于数据库字段,但有时候要在我们创建表的时候,不确定数据表字段数量,遇到这种情况,应如何解决? 先看常规用法 from sqlalchemy import create_engine,Column,String,Integer class Mybase(Base): #表名 __tablename__ ='mycars' #字段,属性 myid=Column
JavaScript动态添加数据到表单并提交的几种方式

情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到form对象 var tmpInput=$("<input type='text' name='blogArticleForm.articleContent'/>"); tmpInput.attr("value", myUeditor.window.getCont
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能

上面的人要hui admin 做页面,本人前端比较菜,这框架也没用过. 因为是动态添加数据 .表也没有,..然后子菜单列表只能通过字符串拼接的方式显示. (伪造的)数据是传过来了发现这个框架的点击菜单,子菜单滑出的效果触发不了,应该是封装了吧..反正不会引用.就自己写了个点击事件(,列表格式还是参照模板). ①:请求数据+ul拼接比较糙,两边icon 无力回天,不过功能是实现了 $.ajax({ url:'/type/reportType', data:{"token":getC
AngularJS动态添加数据并删除的实例

如下所示: <!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>TodoList</title> <style> body { padding: 0; margin: 0; } .todo { width: 300px; margin: 100px a