項目中遇到的ui需要做周赚瘦、月粟誓、季度、年度的線性圖表起意，之前沒有接觸過圖表開發(fā)鹰服，百度一搜基本都是MPAndroidChart，而且文章內(nèi)容，實現(xiàn)的結(jié)果都很相近悲酷，基于此自己摸索中前行套菜，實現(xiàn)了需求，先上幾張目標(biāo)圖设易。
Week.png
Month.png
3-Year.png
項目中已經(jīng)實現(xiàn)逗柴，閑下來將這部分功能提取出來，進(jìn)行知識點鞏固和文章記錄顿肺。
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);
//設(shè)置背景顏色（這里設(shè)置了透明戏溺，紫色是activity的背景）
lineChart.setBackgroundColor(Color.alpha(0));
//是否與圖表交互
lineChart.setTouchEnabled(false);
//是否有縮放功能(true - 沒有縮放功能，false - x軸和y軸都可以放大)
lineChart.setPinchZoom(true);
//是否有網(wǎng)格的橫線
lineChart.getAxisRight().setEnabled(false);
//是否有左下角折線顏色對應(yīng)的信息描述
lineChart.getLegend().setEnabled(false);
//是否繪制圖表邊框的線
lineChart.setDrawBorders(false);
3.設(shè)置x軸屬性及標(biāo)簽
XAxis xAxis = lineChart.getXAxis();
//設(shè)置軸啟用或禁用 如果禁用以下的設(shè)置全部不生效
xAxis.setEnabled(true);
//設(shè)置x軸位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//設(shè)置x軸文字顏色
xAxis.setTextColor(getResources().getColor(R.color.white));
//是否顯示網(wǎng)格線
xAxis.setDrawGridLines(true);
//設(shè)置網(wǎng)格線樣式 豎著的虛線
// (lineLength: 整個虛線中一個單位的長度)
// (spaceLength: 整個虛線中兩個單位的間隔)
// (phase: 虛線起始位置)
xAxis.enableGridDashedLine(10f, 30f, 0f);
//設(shè)置標(biāo)簽居中
xAxis.setCenterAxisLabels(true);
//是否繪制軸線
xAxis.setDrawAxisLine(false);
//是否顯示標(biāo)簽文字
xAxis.setDrawLabels(true);
//x軸標(biāo)簽間隔
xAxis.setGranularity(1f);
//設(shè)置x軸標(biāo)簽
xAxis.setValueFormatter(new WeekAxisValueFormatter(lineChart,mWeek));
//設(shè)置x軸最大值
xAxis.setAxisMaximum((float)mWeek.length);
4.設(shè)置y軸屬性
YAxis leftAxis = lineChart.getAxisLeft();
leftAxis.setEnabled(false);
因為這個ui來說y軸是不需要任何東西的屠尊，所以直接設(shè)置false就好了旷祸。
5.填充數(shù)據(jù)
//填充數(shù)據(jù)，在這里換成自己的數(shù)據(jù)源
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.設(shè)置數(shù)據(jù)折線的相關(guān)屬性
//一個LineDataSet讼昆，相當(dāng)于重新畫一組折線
LineDataSet setComp1 = new LineDataSet(valsComp1,"");
setComp1.setDrawValues(false);
//設(shè)置折線粗細(xì)
setComp1.setLineWidth(3);
//設(shè)置是否填充（效果圖中顏色漸變效果）
setComp1.setDrawFilled(true);
//設(shè)置折線顏色
setComp1.setColor(getResources().getColor(R.color.orange));
//設(shè)置填充的drawable(這里的drawable是一個從上到下漸變透明的shape)
setComp1.setFillDrawable(getResources().getDrawable(R.drawable.shape_linechart_orange_bg));
//是否繪制折線的點
setComp1.setDrawCircles(false);
//設(shè)置模式
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);
//給圖表設(shè)置數(shù)據(jù)源
lineChart.setData(lineData);
//刷新圖表
lineChart.invalidate();
setMode(LineDataSet.Mode mode):設(shè)置模式有四種
1.CUBIC_BEZIER 立方曲線
2.LINEAR 直線
3.STEPPED 階梯
4.HORIZONTAL_BEZIER 水平曲線
至此實現(xiàn)的效果是這樣的
chart.png
詳情后續(xù)繼續(xù)更新托享，今天先到這里~
