1.介绍

MPAndroidChart GitHub地址 

MPAndroidChart的强大之处就不在多说了，目前最新的版本是3.0.1，在新版本中很多方法都被弃用了，这个要注意一下，在网上查到的大多数资料都是关于旧版本的，今天来实现一下折线图，把过程记录下来，分享给大家。

效果图：

2.引入开源库

在项目根目录的build.gradle文件中加入如下代码

allprojects {
  repositories {
    maven { url "https://jitpack.io" }
  }
}

在app根目录的buil.gradle文件中加入依赖

dependencies {
  compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}

3.实现

在项目中，我把图表相关的功能抽取成了一个工具类ChartUtils。

初始化图表

initChart方法用来设置图表的功能和显示的样式，方法中注释了缩放和动画的代码，如果要使用动画，则不需要调用图表的invalidate方法。

/**
 * 初始化图表
 *
 * @param chart 原始图表
 * @return 初始化后的图表
 */
public static LineChart initChart(LineChart chart) {
  // 不显示数据描述
  chart.getDescription().setEnabled(false);
  // 没有数据的时候，显示“暂无数据”
  chart.setNoDataText("暂无数据");
  // 不显示表格颜色
  chart.setDrawGridBackground(false);
  // 不可以缩放
  chart.setScaleEnabled(false);
  // 不显示y轴右边的值
  chart.getAxisRight().setEnabled(false);
  // 不显示图例
  Legend legend = chart.getLegend();
  legend.setEnabled(false);
  // 向左偏移15dp，抵消y轴向右偏移的30dp
  chart.setExtraLeftOffset(-15);

  XAxis xAxis = chart.getXAxis();
  // 不显示x轴
  xAxis.setDrawAxisLine(false);
  // 设置x轴数据的位置
  xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
  xAxis.setTextColor(Color.WHITE);
  xAxis.setTextSize(12);
  xAxis.setGridColor(Color.parseColor("#30FFFFFF"));
  // 设置x轴数据偏移量
  xAxis.setYOffset(-12);

  YAxis yAxis = chart.getAxisLeft();
  // 不显示y轴
  yAxis.setDrawAxisLine(false);
  // 设置y轴数据的位置
  yAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART);
  // 不从y轴发出横向直线
  yAxis.setDrawGridLines(false);
  yAxis.setTextColor(Color.WHITE);
  yAxis.setTextSize(12);
  // 设置y轴数据偏移量
  yAxis.setXOffset(30);
  yAxis.setYOffset(-3);
  yAxis.setAxisMinimum(0);

  //Matrix matrix = new Matrix();
  // x轴缩放1.5倍
  //matrix.postScale(1.5f, 1f);
  // 在图表动画显示之前进行缩放
  //chart.getViewPortHandler().refresh(matrix, chart, false);
  // x轴执行动画
  //chart.animateX(2000);
  chart.invalidate();
  return chart;
}

设置图表数据

setChartData方法用来设置图表显示的数据，以及折线的属性。

/**
 * 设置图表数据
 *
 * @param chart 图表
 * @param values 数据
 */
public static void setChartData(LineChart chart, List<Entry> values) {
  LineDataSet lineDataSet;

  if (chart.getData() != null && chart.getData().getDataSetCount() > 0) {
    lineDataSet = (LineDataSet) chart.getData().getDataSetByIndex(0);
    lineDataSet.setValues(values);
    chart.getData().notifyDataChanged();
    chart.notifyDataSetChanged();
  } else {
    lineDataSet = new LineDataSet(values, "");
    // 设置曲线颜色
    lineDataSet.setColor(Color.parseColor("#FFFFFF"));
    // 设置平滑曲线
    lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
    // 不显示坐标点的小圆点
    lineDataSet.setDrawCircles(false);
    // 不显示坐标点的数据
    lineDataSet.setDrawValues(false);
    // 不显示定位线
    lineDataSet.setHighlightEnabled(false);

    LineData data = new LineData(lineDataSet);
    chart.setData(data);
    chart.invalidate();
  }
}

更新图表

notifyDataSetChanged方法用来更新图表，可以动态的显示x轴标签。

/**
 * 更新图表
 *
 * @param chart   图表
 * @param values  数据
 * @param valueType 数据类型
 */
public static void notifyDataSetChanged(LineChart chart, List<Entry> values,
                    final int valueType) {
  chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {
    @Override
    public String getFormattedValue(float value, AxisBase axis) {
      return xValuesProcess(valueType)[(int) value];
    }
  });

  chart.invalidate();
  setChartData(chart, values);
}

x轴数据处理

xValuesProcess方法用于处理x轴数据。

x轴可以显示三种类型的数据，分别是今日数据、本周数据、本月数据。

/**
 * x轴数据处理
 *
 * @param valueType 数据类型
 * @return x轴数据
 */
private static String[] xValuesProcess(int valueType) {
  String[] week = {"周日", "周一", "周二", "周三", "周四", "周五", "周六"};

  if (valueType == dayValue) { // 今日
    String[] dayValues = new String[7];
    long currentTime = System.currentTimeMillis();
    for (int i = 6; i >= 0; i--) {
      dayValues[i] = TimeUtils.dateToString(currentTime, TimeUtils.dateFormat_day);
      currentTime -= (3 * 60 * 60 * 1000);
    }
    return dayValues;

  } else if (valueType == weekValue) { // 本周
    String[] weekValues = new String[7];
    Calendar calendar = Calendar.getInstance();
    int currentWeek = calendar.get(Calendar.DAY_OF_WEEK);

    for (int i = 6; i >= 0; i--) {
      weekValues[i] = week[currentWeek - 1];
      if (currentWeek == 1) {
        currentWeek = 7;
      } else {
        currentWeek -= 1;
      }
    }
    return weekValues;

  } else if (valueType == monthValue) { // 本月
    String[] monthValues = new String[7];
    long currentTime = System.currentTimeMillis();
    for (int i = 6; i >= 0; i--) {
      monthValues[i] = TimeUtils.dateToString(currentTime, TimeUtils.dateFormat_month);
      currentTime -= (4 * 24 * 60 * 60 * 1000);
    }
    return monthValues;
  }
  return new String[]{};
}

在Activity中使用

ChartUtils.initChart(chart);
ChartUtils.notifyDataSetChanged(chart, getData(), ChartUtils.dayValue);

布局文件

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4.遇到的问题

• 在设置x轴水平方向平移时，xAxis.setXOffset()方法不起作用，这让我研究了好长时间，最后无奈使用图表平移方法chart.setExtraLeftOffset()来抵消y轴的平移，已经提交到了Issues上，有解答会在博客中更新。
• 目前y轴数据只能通过设置最大值、最小值、显示个数的方式来显示数据（如果不设置会自动计算），还没有找到自定义显示数据的方法，有了解的小伙伴可以留言告诉我啊。
• 自定义x轴数据的时候记得要算好对应的值，Demo中只用到了7个点，所以比较简单，但是x轴数据比较多的话，就要算一下了，如果有不懂的地方可以给我留言或者发私信。

5.写在最后

在实现的过程中，MPAndroidChart的Issues帮了不少忙，有很多人和我遇到了同样的问题，原来没有查阅Issues的习惯，又get新技能一枚。

官方文档

完整的Demo下载

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

# mpandroidchart折线图  # android开源折线图表  # android折线图开源库  # MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图  # Android MPAndroidChart开源库图表之折线图的实例代码  # Android自定义View实现折线图效果  # Android绘制动态折线图  # Android HelloChart开源库图表之折线图的实例代码  # Android开发之天气趋势折线图  # Android自定义控件实现折线图  # Android自定义可左右滑动和点击的折线图  # Android自定义View简易折线图控件（二）  # Android开发RecyclerView实现折线图效果  # 暂无  # 数据处理  # 自定义  # 都是  # 本周  # 今日  # 还没有  # 成了  # 偏移量  # 不需要  # 和我  # 之处  # 很多人  # 不可以  # 不懂  # 下了  # 会在  # 坐标点  # 我把  # 要注意 

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

相关推荐： html5audio标签播放结束怎么触发事件_onended回调方法【教程】  iOS验证手机号的正则表达式  CSS3怎么给轮播图加过渡动画_transition加transform实现【技巧】  今日头条微视频如何找选题 今日头条微视频找选题技巧【指南】  高性价比服务器租赁——企业级配置与24小时运维服务  PythonWeb开发入门教程_Flask快速构建Web应用  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何在IIS中配置站点IP、端口及主机头？  网页制作模板网站推荐,网页设计海报之类的素材哪里好？  如何用AI一键生成爆款短视频文案？小红书AI文案写作指令【教程】  如何用低价快速搭建高质量网站？  常州企业网站制作公司,全国继续教育网怎么登录？  个人摄影网站制作流程,摄影爱好者都去什么网站？  Laravel如何使用Eloquent进行子查询  大连 网站制作,大连天途有线官网？  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  🚀拖拽式CMS建站能否实现高效与个性化并存？  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel怎么清理缓存_Laravel optimize clear命令详解  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  浅谈redis在项目中的应用  Laravel如何使用Spatie Media Library_Laravel图片上传管理与缩略图生成【步骤】  三星网站视频制作教程下载,三星w23网页如何全屏？  googleplay官方入口在哪里_Google Play官方商店快速入口指南  高端企业智能建站程序：SEO优化与响应式模板定制开发  Laravel观察者模式如何使用_Laravel Model Observer配置  C语言设计一个闪闪的圣诞树  装修招标网站设计制作流程,装修招标流程？  英语简历制作免费网站推荐,如何将简历翻译成英文？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  laravel怎么在请求结束后执行任务（Terminable Middleware）_laravel Terminable Middleware请求结束任务执行方法  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  大学网站设计制作软件有哪些,如何将网站制作成自己app？  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  新三国志曹操传主线渭水交兵攻略  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  Laravel如何创建自定义中间件？（Middleware代码示例）  如何在阿里云ECS服务器部署织梦CMS网站？  Laravel怎么配置不同环境的数据库_Laravel本地测试与生产环境动态切换【方法】  Microsoft Edge如何解决网页加载问题 Edge浏览器加载问题修复  如何自定义建站之星网站的导航菜单样式？  如何在宝塔面板中修改默认建站目录？  canvas 画布在主流浏览器中的尺寸限制详细介绍  jQuery 常见小例汇总  制作企业网站建设方案,怎样建设一个公司网站？  LinuxCD持续部署教程_自动发布与回滚机制  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  Laravel如何优雅地处理服务层_在Laravel中使用Service层和Repository层  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭