Android | 图表MPAndroidChart使用介绍

项目中遇到的ui需要做周、月、季度、年度的线性图表，之前没有接触过图表开发，百度一搜基本都是MPAndroidChart，而且文章内容，实现的结果都很相近，基于此自己摸索中前行，实现了需求，先上几张目标图。

Week.png

Month.png

3-Year.png

项目中已经实现，闲下来将这部分功能提取出来，进行知识点巩固和文章记录。

1.添加依赖

项目Module gradle->dependencies中添加

 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

Project gradle->allprojects->repositories中添加

maven { url 'https://jitpack.io' }

如图：

gradle.png

2.绘制线性图表

 //是否显示描述的字
lineChart.getDescription().setEnabled(false);
//设置背景颜色（这里设置了透明，紫色是activity的背景）
lineChart.setBackgroundColor(Color.alpha(0));
//是否与图表交互
lineChart.setTouchEnabled(false);
//是否有缩放功能(true - 没有缩放功能，false - x轴和y轴都可以放大)
lineChart.setPinchZoom(true);
//是否有网格的横线
lineChart.getAxisRight().setEnabled(false);
//是否有左下角折线颜色对应的信息描述
lineChart.getLegend().setEnabled(false);
//是否绘制图表边框的线
lineChart.setDrawBorders(false);

3.设置x轴属性及标签

XAxis xAxis = lineChart.getXAxis();
//设置轴启用或禁用 如果禁用以下的设置全部不生效
xAxis.setEnabled(true);
//设置x轴位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
 //设置x轴文字颜色
xAxis.setTextColor(getResources().getColor(R.color.white));
//是否显示网格线
xAxis.setDrawGridLines(true);
//设置网格线样式  竖着的虚线  
// (lineLength: 整个虚线中一个单位的长度)
// (spaceLength: 整个虚线中两个单位的间隔)
// (phase: 虚线起始位置)
xAxis.enableGridDashedLine(10f, 30f, 0f);
//设置标签居中
xAxis.setCenterAxisLabels(true);
//是否绘制轴线
xAxis.setDrawAxisLine(false);
//是否显示标签文字
xAxis.setDrawLabels(true);
//x轴标签间隔
xAxis.setGranularity(1f);
//设置x轴标签
xAxis.setValueFormatter(new WeekAxisValueFormatter(lineChart,mWeek));
//设置x轴最大值
xAxis.setAxisMaximum((float)mWeek.length);

4.设置y轴属性

YAxis leftAxis = lineChart.getAxisLeft();
leftAxis.setEnabled(false);

因为这个ui来说y轴是不需要任何东西的，所以直接设置false就好了。

5.填充数据

 //填充数据，在这里换成自己的数据源
List valsComp1 = new ArrayList<>();
List valsComp2 = new ArrayList<>();
valsComp1.add(new Entry(0, 10));
valsComp1.add(new Entry(1, 30));
valsComp1.add(new Entry(2, 55));
valsComp1.add(new Entry(3, 40));
valsComp1.add(new Entry(4, 70));
valsComp1.add(new Entry(5, 65));
valsComp1.add(new Entry(6, 50));
valsComp1.add(new Entry(7, 40));

valsComp2.add(new Entry(0, 30));
valsComp2.add(new Entry(1, 60));
valsComp2.add(new Entry(2, 20));
valsComp2.add(new Entry(3, 40));
valsComp2.add(new Entry(4, 80));
valsComp2.add(new Entry(5, 90));
valsComp2.add(new Entry(6, 70));
valsComp2.add(new Entry(7, 80));

6.设置数据折线的相关属性

//一个LineDataSet，相当于重新画一组折线
LineDataSet setComp1 = new LineDataSet(valsComp1,"");
setComp1.setDrawValues(false);
//设置折线粗细
setComp1.setLineWidth(3);
//设置是否填充（效果图中颜色渐变效果）
setComp1.setDrawFilled(true);
//设置折线颜色
setComp1.setColor(getResources().getColor(R.color.orange));
//设置填充的drawable(这里的drawable是一个从上到下渐变透明的shape)
setComp1.setFillDrawable(getResources().getDrawable(R.drawable.shape_linechart_orange_bg));
//是否绘制折线的点
setComp1.setDrawCircles(false);
//设置模式
setComp1.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);

LineDataSet setComp2 = new LineDataSet(valsComp2, "");
setComp2.setDrawValues(false);
setComp2.setLineWidth(3);
setComp2.setDrawFilled(true);
setComp2.setColor(getResources().getColor(R.color.linechart_green));
setComp2.setFillDrawable(getResources().getDrawable(R.drawable.shape_linechart_green_bg));
setComp2.setDrawCircles(false);
setComp2.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);

List dataSets = new ArrayList<>();
dataSets.add(setComp1);
dataSets.add(setComp2);

LineData lineData = new LineData(dataSets);

//给图表设置数据源
lineChart.setData(lineData);
//刷新图表
lineChart.invalidate();

setMode(LineDataSet.Mode mode):设置模式有四种
1.CUBIC_BEZIER 立方曲线
2.LINEAR 直线
3.STEPPED 阶梯
4.HORIZONTAL_BEZIER 水平曲线

至此实现的效果是这样的

chart.png

详情后续继续更新，今天先到这里~