Android图表 MPAndroidChart折线图

2024-05-06 09:18

本文主要是介绍Android图表 MPAndroidChart折线图,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.介绍

MPAndroidChart GitHub地址

Demo GitHub地址

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

效果图:

折线图

2.引入开源库

  • 在项目根目录的build.gradle文件中加入如下代码
allprojects {repositories {maven { url "https://jitpack.io" }}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 在app根目录的buil.gradle文件中加入依赖
dependencies {compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}
  • 1
  • 2
  • 3

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轴向右偏移的30dpchart.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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

设置图表数据

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();}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

更新图表

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() {@Overridepublic String getFormattedValue(float value, AxisBase axis) {return xValuesProcess(valueType)[(int) value];}});chart.invalidate();setChartData(chart, values);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

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[]{};
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

在Activity中使用

ChartUtils.initChart(chart);
ChartUtils.notifyDataSetChanged(chart, getData(), ChartUtils.dayValue);
  • 1
  • 2

布局文件

<com.github.mikephil.charting.charts.LineChartandroid:id="@+id/chart"android:layout_width="match_parent"android:layout_height="match_parent" />
  • 1
  • 2
  • 3
  • 4

4.遇到的问题

  • 在设置x轴水平方向平移时,xAxis.setXOffset()方法不起作用,这让我研究了好长时间,最后无奈使用图表平移方法chart.setExtraLeftOffset()来抵消y轴的平移,已经提交到了Issues上,有解答会在博客中更新。

  • 目前y轴数据只能通过设置最大值、最小值、显示个数的方式来显示数据(如果不设置会自动计算),还没有找到自定义显示数据的方法,有了解的小伙伴可以留言告诉我啊。

  • 自定义x轴数据的时候记得要算好对应的值,Demo中只用到了7个点,所以比较简单,但是x轴数据比较多的话,就要算一下了,如果有不懂的地方可以给我留言或者发私信。

5.写在最后

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

官方文档

完整的Demo下载

Demo GitHub地址

这篇关于Android图表 MPAndroidChart折线图的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/963985

相关文章

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

Python如何在Word中生成多种不同类型的图表

《Python如何在Word中生成多种不同类型的图表》Word文档中插入图表不仅能直观呈现数据,还能提升文档的可读性和专业性,本文将介绍如何使用Python在Word文档中创建和自定义各种图表,需要的... 目录在Word中创建柱形图在Word中创建条形图在Word中创建折线图在Word中创建饼图在Word

Android如何获取当前CPU频率和占用率

《Android如何获取当前CPU频率和占用率》最近在优化App的性能,需要获取当前CPU视频频率和占用率,所以本文小编就来和大家总结一下如何在Android中获取当前CPU频率和占用率吧... 最近在优化 App 的性能,需要获取当前 CPU视频频率和占用率,通过查询资料,大致思路如下:目前没有标准的

Java实战之利用POI生成Excel图表

《Java实战之利用POI生成Excel图表》ApachePOI是Java生态中处理Office文档的核心工具,这篇文章主要为大家详细介绍了如何在Excel中创建折线图,柱状图,饼图等常见图表,需要的... 目录一、环境配置与依赖管理二、数据源准备与工作表构建三、图表生成核心步骤1. 折线图(Line Ch

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结:一、Service 的两种类型:1. 前台服务(必须亮身份牌)2. 后台服务(偷偷干

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》:本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中,尤

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象(DAO)和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类(Entity)3.创建数据访问对象(DAO

C#图表开发之Chart详解

《C#图表开发之Chart详解》C#中的Chart控件用于开发图表功能,具有Series和ChartArea两个重要属性,Series属性是SeriesCollection类型,包含多个Series对... 目录OverviChina编程ewSeries类总结OverviewC#中,开发图表功能的控件是Char