项目中遇到的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<Entry> valsComp1 = new ArrayList<>();
List<Entry> 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<ILineDataSet> 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
详情后续继续更新，今天先到这里~
