高斋晓开卷,独共圣人语。这篇文章主要讲述Android图表 MPAndroidChart折线图相关的知识,希望能为你提供帮助。
1.介绍 MPAndroidChart GitHub地址
Demo 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;
}
设置图表数据 【Android图表 MPAndroidChart折线图】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轴数据比较多的话,
就要算一下了,
如果有不懂的地方可以给我留言或者发私信。
官方文档
完整的Demo下载
Demo GitHub地址
推荐阅读
- Android 7.0 ActivityManagerService 广播(Broadcast)相关流程分析
- Android测试的坑——屏幕翻转
- Android Service和Thread的关系
- Android注解使用之通过annotationProcessor注解生成代码实现自己的ButterKnife框架
- Android快速开发偷懒必备 支持DataBinding啦~爽炸,一行实现花式列表
- Android评论图片可移动顺序选择器
- React Native Android 应用层实战沦陷记
- Android RecycleView + CardView 控件简析
- android之网络编程