热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

详解Android图表MPAndroidChart折线图

1.介绍 MPAndroidChart GitHub地址  MPAndroidChart的强大之处就不在多说了,目前最新

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 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 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);

布局文件

4.遇到的问题

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

5.写在最后

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

官方文档

完整的Demo下载

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


推荐阅读
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • 在Docker中,将主机目录挂载到容器中作为volume使用时,常常会遇到文件权限问题。这是因为容器内外的UID不同所导致的。本文介绍了解决这个问题的方法,包括使用gosu和suexec工具以及在Dockerfile中配置volume的权限。通过这些方法,可以避免在使用Docker时出现无写权限的情况。 ... [详细]
  • EPICS Archiver Appliance存储waveform记录的尝试及资源需求分析
    本文介绍了EPICS Archiver Appliance存储waveform记录的尝试过程,并分析了其所需的资源容量。通过解决错误提示和调整内存大小,成功存储了波形数据。然后,讨论了储存环逐束团信号的意义,以及通过记录多圈的束团信号进行参数分析的可能性。波形数据的存储需求巨大,每天需要近250G,一年需要90T。然而,储存环逐束团信号具有重要意义,可以揭示出每个束团的纵向振荡频率和模式。 ... [详细]
  • 云原生边缘计算之KubeEdge简介及功能特点
    本文介绍了云原生边缘计算中的KubeEdge系统,该系统是一个开源系统,用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建,并为网络应用程序提供基础架构支持。同时,KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外,KubeEdge还支持跨平台工作,在私有、公共和混合云中都可以运行。同时,KubeEdge还提供数据管理和数据分析管道引擎的支持。最后,本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]
  • 学习笔记(34):第三阶段4.2.6:SpringCloud Config配置中心的应用与原理第三阶段4.2.6SpringCloud Config配置中心的应用与原理
    立即学习:https:edu.csdn.netcourseplay29983432482?utm_sourceblogtoedu配置中心得核心逻辑springcloudconfi ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • Centos7.6安装Gitlab教程及注意事项
    本文介绍了在Centos7.6系统下安装Gitlab的详细教程,并提供了一些注意事项。教程包括查看系统版本、安装必要的软件包、配置防火墙等步骤。同时,还强调了使用阿里云服务器时的特殊配置需求,以及建议至少4GB的可用RAM来运行GitLab。 ... [详细]
  • 【Windows】实现微信双开或多开的方法及步骤详解
    本文介绍了在Windows系统下实现微信双开或多开的方法,通过安装微信电脑版、复制微信程序启动路径、修改文本文件为bat文件等步骤,实现同时登录两个或多个微信的效果。相比于使用虚拟机的方法,本方法更简单易行,适用于任何电脑,并且不会消耗过多系统资源。详细步骤和原理解释请参考本文内容。 ... [详细]
  • 20211101CleverTap参与度和分析工具功能平台学习/实践
    1.应用场景主要用于学习CleverTap的使用,该平台主要用于客户保留与参与平台.为客户提供价值.这里接触到的原因,是目前公司用到该平台的服务~2.学习操作 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 安卓select模态框样式改变_微软Office风格的多端(Web、安卓、iOS)组件库——Fabric UI...
    介绍FabricUI是微软开源的一套Office风格的多端组件库,共有三套针对性的组件,分别适用于web、android以及iOS,Fab ... [详细]
  • 使用在线工具jsonschema2pojo根据json生成java对象
    本文介绍了使用在线工具jsonschema2pojo根据json生成java对象的方法。通过该工具,用户只需将json字符串复制到输入框中,即可自动将其转换成java对象。该工具还能解析列表式的json数据,并将嵌套在内层的对象也解析出来。本文以请求github的api为例,展示了使用该工具的步骤和效果。 ... [详细]
  • 关于我们EMQ是一家全球领先的开源物联网基础设施软件供应商,服务新产业周期的IoT&5G、边缘计算与云计算市场,交付全球领先的开源物联网消息服务器和流处理数据 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
author-avatar
丿氵小柒柒2502894463
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有