本文是引用开源图表库框架 MPAndroidChart的LineChart

地址：https://github.com/PhilJay/MPAndroidChart

1.需求：

（1）动态添加RadioButton，点击改变下面的LineChart数据

（2）LineChart绘制价格走势图，只显示最低点的小圆点和View,手指滑动，MarkView数据变化。

（3） 服务端返回端数据，不是每一天端数据，但是x轴显示的必须是每一天的数据，这里是有我自己处理过的。返回里需要显示点的数组，之前的时间点显示的就是第一个点值。

2.实现效果：

最低点显示View和小圆点是自定义的，通过修改 LineChart的源码，下面我们来具体分析代码

3.代码分析

(1)布局的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <RadioGroup
    android:id="@+id/mRadioGroup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="30px"
    android:orientation="horizontal"
    android:visibility="gone">
  </RadioGroup>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:orientation="vertical">

    <com.github.mikephil.charting.charts.LineChart
      android:id="@+id/mLineChart"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1" />

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">

      <TextView
        android:id="@+id/detailMinTimeTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50px"
        android:layout_weight="1"
        android:textColor="#B5B5B5"
        android:textSize="24px" />

      <TextView
        android:id="@+id/detailMaxTimeTv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="30px"
        android:layout_weight="1"
        android:gravity="right"
        android:textColor="#B5B5B5"
        android:textSize="24px" />
    </LinearLayout>
  </LinearLayout>
</LinearLayout>

这里主要是添加以一个RadioGroup和一个LineChart

接下来是MainActivity.class

private void addViewForGroup(final List<JsonData.HistoricalPrice> list) {
    for (int i = 0; i < list.size(); i++) {
      final RadioButton view = (RadioButton) LayoutInflater.from(MainActivity.this)
          .inflate(R.layout.item_gr_add_but_layout, mRadioGroup, false);
      view.setId(i);
      view.setText(list.get(i).getTitle());
      if (i==0){
        view.performClick();
        radioGroupTextChange(list.get(0).getData(), list.get(0).getTitle());
        mLineCharWidget = new LineChartWidget(MainActivity.this,
            list.get(0).getData(), mLineChart, setMinPrice(list.get(0).getData()));
      }
      mRadioGroup.addView(view);

    }
    mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
      @Override
      public void onCheckedChanged(RadioGroup group, int checkedId) {
        RadioButton button = (RadioButton) findViewById(checkedId);
        button.setText(list.get(checkedId).getTitle());

        for (int i = 0; i < list.size(); i++) {
          if (button.getText().toString().equals(list.get(i).getTitle())) {
            radioGroupTextChange(list.get(i).getData(), list.get(i).getTitle());
            if (mLineCharWidget == null) {
              mLineCharWidget = new LineChartWidget(MainActivity.this,
                  list.get(i).getData(), mLineChart, setMinPrice(list.get(i).getData()));
            } else {
              mLineCharWidget.updateLineChar(list.get(i).getData(), setMinPrice(list.get(i).getData()));
            }

          }
        }
      }
    });
  }

注意：这里的LineChartWidget是我自己封装的一个LineChart,包括LineChart初始化，数据的处理,已经手势的一些操作

简单的说一下思路，因为 Linechart的x,y都是自定义的，但是我这里只自定义的y轴，是把x隐藏起来的，x轴只显示最开始的点和结束的点，所以我这里有点投机，自己设置点两个textview来显示的

Linechart的点一设置都是统一所有点都设置的，但是需求上是得只在最低点显示，并还要绘制一个view先初始化 View,然后解析数据，

 JsonData jsonDetail = new Gson().fromJson(jsonStr.toString(), new TypeToken<JsonData>() {
    }.getType());
    if (jsonDetail.getHistorical_price() != null && jsonDetail.getHistorical_price().size() > 0) {
      setGroupLay(jsonDetail.getHistorical_price());
    }

再根据解析的数据动态添加RadioButton

初始化LineChart

private void initLineChar() {
    List<JsonData.HistoricalPrice.HistoricalPriceData.DataList> datalist
        = removeDuplicteData(mHistoricalPrice.getData_list());
    //设置手势滑动事件
    mLineChar.setOnChartGestureListener(this);
    //设置数值选择监听
    mLineChar.setOnChartValueSelectedListener(this);
    //后台绘制
    mLineChar.setDrawGridBackground(false);
    //设置描述文本
    mLineChar.getDescription().setEnabled(false);
    mLineChar.setTouchEnabled(true); // 设置是否可以触摸
    mLineChar.setDragEnabled(true);// 是否可以拖拽
    mLineChar.setScaleXEnabled(true); //是否可以缩放 仅x轴
    mLineChar.setScaleYEnabled(true); //是否可以缩放 仅y轴
    mLineChar.setPinchZoom(true); //设置x轴和y轴能否同时缩放。默认是否

    mLineChar.setDragDecelerationFrictionCoef(0.99f);
    mLineChar.getAxisRight().setEnabled(false);
    // 默认动画
    mLineChar.animateX(2500);

    setMakeList(removeDuplicteData(datalist));
    initMark(makeList, Long.valueOf(mHistoricalPrice.getStart_time()));
    initXAxis(datalist.size(), xAxisValuesStr);
    initYAxis();
    initLegend();
    setLineCharData(makeList);
  }

设置markView

private void setMakeList(List<JsonData.HistoricalPrice.HistoricalPriceData.DataList> datalist) {
    try {
      SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
      Date dBegin = format.parse(format.format(Long.valueOf(mHistoricalPrice.getStart_time()) * 1000));
      Date dEnd = format.parse(format.format(Long.valueOf(mHistoricalPrice.getEnd_time()) * 1000));
      float prices = 0;
      List<Date> listDate = getDatesBetweenTwoDate(dBegin, dEnd);
      if (datalist.size() >= listDate.size()) {
        makeList.clear();
        makeList.addAll(datalist);
      } else {
        for (int i = 0; i < listDate.size(); i++) {
          JsonData.HistoricalPrice.HistoricalPriceData.DataList data
              = new JsonData.HistoricalPrice.HistoricalPriceData.DataList();
          for (int j = 0; j < datalist.size(); j++) {
            if (TimeToString(DateToTimestamp(listDate.get(i))).equals(TimeToString(Long.valueOf(datalist.get(j).getPrice_drop_time())))) {
              data.setPrice_drop_time(datalist.get(j).getPrice_drop_time());
              data.setPrice_new(datalist.get(j).getPrice_new());
              prices = (datalist.get(j).getPrice_new());

            } else {
              data.setPrice_drop_time(DateToTimestamp(listDate.get(i)) + "");
              data.setPrice_new(prices);
            }
          }
          makeList.add(data);
        }
      }


    } catch (ParseException e) {
      e.printStackTrace();
    }

  }

这里是设置LineChart里面的数据

private void setData(ArrayList<Entry> values) {
    LineDataSet set1 = null;
    if (mLineChar.getData() != null && mLineChar.getData().getDataSetCount() > 0) {
      set1 = (LineDataSet) mLineChar.getData().getDataSetByIndex(0);
      set1.setValues(values);
      mLineChar.getData().notifyDataChanged();
      mLineChar.notifyDataSetChanged();
    } else {
      // 创建一个数据集,并给它一个类型
      if (set1 == null) {
        set1 = new LineDataSet(values, "价格曲线图");
        set1.setColor(Color.rgb(27, 198, 181));
        set1.setCircleColor(Color.BLACK);
        set1.setLineWidth(1f);
        set1.setCircleRadius(3f);
        set1.setDrawCircleHole(false);
        set1.setValueTextSize(9f);
        set1.setDrawFilled(true);
        set1.setFormLineWidth(1f);
        set1.setFormLineDashEffect(new DashPathEffect(new float[]{10f, 5f}, 0f));
        set1.setHighlightEnabled(true); //允许突出显示DataSet
        set1.setDrawHighlightIndicators(false); // 取消点击线上的点展示十字标识
        set1.setDrawValues(true); // 不展示线上面点的值
        //是否显示小圆点
        set1.setDrawCircles(false);
        //修改源码 自定义的参数，可以显示最低点的View
        set1.setLowDrawCircles(true);
        set1.setCircleColors(Color.rgb(27, 198, 181));//27, 198, 181
        //顶点设置值
        set1.setDrawValues(false);
        set1.setFillColor(Color.rgb(203, 242, 238));
      }
      //修改源码 自定义的参数，可以显示最低点的View
      set1.setLowNumbers(minData);
      ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
      //添加数据集
      dataSets.add(set1);
      //创建一个数据集的数据对象
      LineData data = new LineData(dataSets);
      //设置数据
      mLineChar.setData(data);
    }
  }

这里是在源码里新加的地方

 //修改源码 自定义的参数，可以显示最低点的View   
 set1.setLowDrawCircles(true);  
 set1.setLowNumbers(minData);

源码修改部分：

1.在LineDataSet添加2个参数，复写ILineDataSet新加的方法

 //是否显示最低点的小圆点

 private boolean mDrawLowCircle = false;

 //最低点对应的具体值

 private float mLowNumbers = 100f;

2.在ILineDataSet接口中添加2个方法

boolean isLowDrawCirclesEnabled();

float getLowNumbers();

3.修改源码LineChartRenderer这个类的 drawValues(Canvas c)方法中，这里是设置最低点显示的View,这个方法中添加判断：

//设置最低点显示的自定义view
if (dataSet.isLowDrawCirclesEnabled()) {
  if (entry.getY() == dataSet.getYMin()) {
    //设置在左边
    if (x < 100) {
      locationcode = 1;
    } else {  // 默认在右边
      locationcode = 0;
    }
    appCustomDrawValue(c, dataSet.getValueFormatter(), entry.getY(), entry, i, x,
        y - valOffset, Color.WHITE);
    break;
  }
}

private int locationcode = 0;
//设置最低点显示的text和text的背景框
private void appCustomDrawValue(Canvas c, IValueFormatter formatter, float value, Entry entry, int dataSetIndex, float x, float y, int color) {

    // Paint.FontMetrics fm = new Paint.FontMetrics();
    mValuePaint.setColor(Color.rgb(27, 198, 181));
    // mValuePaint.getFontMetrics(fm);
    y = (y + Utils.convertDpToPixel(30));
    switch (locationcode) {
      case 0:
        RectF rectF = new RectF((x - Utils.convertDpToPixel(35)), (y - Utils.convertDpToPixel(23)),
            (x + Utils.convertDpToPixel(5)), y);
        c.drawRoundRect(rectF, 10, 10, mValuePaint);
        mValuePaint.setColor(color);
        c.drawText("￥" + formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x - Utils.convertDpToPixel(15), y - Utils.convertDpToPixel(10), mValuePaint);
        break;
      case 1:
        RectF rectF1 = new RectF(x + Utils.convertDpToPixel(5), (y - Utils.convertDpToPixel(23)), x + Utils.convertDpToPixel(45), y);
        c.drawRoundRect(rectF1, 10, 10, mValuePaint);
        mValuePaint.setColor(color);
        c.drawText("￥" + formatter.getFormattedValue(value, entry, dataSetIndex, mViewPortHandler), x + Utils.convertDpToPixel(27), y - Utils.convertDpToPixel(10), mValuePaint);
        break;
    }
  }

在drawCircles(Canvas c)方法中添加判断：则可以显示最低点的小圆点了。

//显示最低点的小圆点
if (dataSet.isLowDrawCirclesEnabled()) {
  if (e.getY() == dataSet.getYMin()) {
    Bitmap circleBitmap = imageCache.getBitmap(j);
    c.drawBitmap(circleBitmap, mCirclesBuffer[0] - circleRadius, mCirclesBuffer[1] - circleRadius, null);
    break;

  }

}

好了，所有功能的关键部分已经讲完了。大家不懂的可以留言提问，或者自己下载源码看看：

github项目地址：https://github.com/Songyan992/LineChartStudy

源码下载地址：LineChartStudy_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# android  # 曲线图  # 自定义曲线图  # 实时曲线图  # Android实现自定义曲线图  # Android利用MPAndroidChart绘制曲线图表的基础教程  # Android 曲线图的绘制示例代码  # Android实现简易的柱状图和曲线图表实例代码  # Android 自定义View实现芝麻分曲线图效果  # Android 游戏开发中绘制游戏触摸轨迹的曲线图  # android实现可以滑动的平滑曲线图  # 自定义  # 都是  # 小圆点  # 线上  # 只显示  # 每一天  # 小圆  # 创建一个  # 是在  # 好了  # 第一个  # 是有  # 的说  # 下载地址  # 不懂  # 点了  # 只在  # 一所  # 则可  # 我自 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 如何在宝塔面板创建新站点？  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  怎么用AI帮你设计一套个性化的手机App图标？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  Python文件操作最佳实践_稳定性说明【指导】  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel如何处理和验证JSON类型的数据库字段  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何利用DOS批处理实现定时关机操作详解  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  如何在阿里云购买域名并搭建网站？  Laravel Octane如何提升性能_使用Laravel Octane加速你的应用  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  Android利用动画实现背景逐渐变暗  如何在腾讯云免费申请建站？  千库网官网入口推荐 千库网设计创意平台入口  青岛网站建设如何选择本地服务器？  iOS中将个别页面强制横屏其他页面竖屏  JS经典正则表达式笔试题汇总  如何在阿里云虚拟主机上快速搭建个人网站？  Windows Hello人脸识别突然无法使用  如何在建站宝盒中设置产品搜索功能？  高防服务器租用指南：配置选择与快速部署攻略  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  三星网站视频制作教程下载,三星w23网页如何全屏？  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  如何在香港免费服务器上快速搭建网站？  JavaScript如何操作视频_媒体API怎么控制播放  如何快速使用云服务器搭建个人网站？  制作企业网站建设方案,怎样建设一个公司网站？  如何快速重置建站主机并恢复默认配置？  如何快速搭建支持数据库操作的智能建站平台？  利用JavaScript实现拖拽改变元素大小  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  Laravel storage目录权限问题_Laravel文件写入权限设置  如何用AWS免费套餐快速搭建高效网站？  长沙企业网站制作哪家好,长沙水业集团官方网站？  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  Android滚轮选择时间控件使用详解  高性能网站服务器配置指南：安全稳定与高效建站核心方案  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  如何在宝塔面板中创建新站点？  Laravel如何处理CORS跨域请求？（配置示例）  油猴 教程,油猴搜脚本为什么会网页无法显示？  如何将凡科建站内容保存为本地文件？  深圳防火门网站制作公司,深圳中天明防火门怎么编码？  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  JS弹性运动实现方法分析  Laravel如何实现多对多模型关联？（Eloquent教程）  googleplay官方入口在哪里_Google Play官方商店快速入口指南