昨日夜觀天象嗡载，今日忽見北斗星隕落惩琉，《Android 折線圖表》應運而生闷供。
single.png
many.png
一.本篇采用MPAndroidChart烟央，大體實現(xiàn)步驟可分為兩步：
1.配置基本屬性（包括X,Y軸）
2.設置折線數(shù)據(jù)并添加
二.
第一步，配置基本屬性歪脏。
1.依賴：
當前工程Build.gradle里： implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
項目Build.gradle里：
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
2.配置圖表控件的基本屬性：
/**
* 設置Chart的一些基本配置
*/
private void initChart() {
//配置基本信息
lineChart.getDescription().setEnabled(false); //設置描述
lineChart.setTouchEnabled(true); //設置是否可以觸摸
lineChart.setDragDecelerationFrictionCoef(0.9f); //設置滾動時的速度快慢
lineChart.setDragEnabled(true); // 是否可以拖拽
lineChart.setScaleXEnabled(false); //設置X軸是否能夠放大
lineChart.setScaleYEnabled(false); //設置Y軸是否能夠放大
//lineChart.setScaleEnabled(true); // 是否可以縮放 x和y軸, 默認是true
lineChart.setDrawGridBackground(false);//設置圖表內(nèi)格子背景是否顯示疑俭，默認是false
lineChart.setHighlightPerDragEnabled(true);//能否拖拽高亮線(數(shù)據(jù)點與坐標的提示線)，默認是true
lineChart.setBackgroundColor(Color.WHITE); //設置背景顏色
//配置X軸屬性
xAxis = lineChart.getXAxis();
//xAxis.setLabelRotationAngle(25f); //設置旋轉(zhuǎn)偏移量
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //設置X軸的位置
//設置標簽文本格式
xAxis.setTextSize(10f);
//設置標簽文本顏色
xAxis.setTextColor(Color.rgb(255, 192, 56));
//是否繪制軸線
xAxis.setDrawAxisLine(true);
//是否繪制網(wǎng)格線
xAxis.setDrawGridLines(false);
//設置是否一個格子顯示一條數(shù)據(jù)婿失，如果不設置這個屬性钞艇，就會導致X軸數(shù)據(jù)重復并且錯亂的問題
xAxis.setGranularity(1f);
//配置Y軸信息
leftAxis = lineChart.getAxisLeft();
leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); //設置Y軸的位置
leftAxis.setDrawGridLines(true); //設置左邊的網(wǎng)格線顯示
leftAxis.setGranularityEnabled(false);//啟用在放大時限制y軸間隔的粒度特性。默認值：false豪硅。
leftAxis.setTextColor(Color.rgb(255, 192, 56)); //設置Y軸文字顏色
YAxis rightAxis = lineChart.getAxisRight(); //獲取右邊的Y軸
rightAxis.setEnabled(false); //設置右邊的Y軸不顯示
//設置圖例（也就是曲線的標簽）
Legend legend = lineChart.getLegend();//設置比例圖
legend.setEnabled(false); //因為自帶的圖例太丑哩照，而且操作也不方便，樓主選擇自定義懒浮，設置不顯示比例圖
}
第二步葡秒，設置折線數(shù)據(jù)。
首先嵌溢，自定義我們的X軸適配器：
public class MyXFormatter implements IAxisValueFormatter {
private List<String> list;
public MyXFormatter(List<String> values) {
this.list = values;
}
private static final String TAG = "MyXFormatter";
@Override
public String getFormattedValue(float value, AxisBase axis) {
// "value" represents the position of the label on the axis (x or y)
Log.d(TAG, "----->getFormattedValue: " + value) ;
if (value<list.size()){
return list.get((int) (value));
}else {
return null;
}
}
}
然后眯牧，設置折線數(shù)據(jù)。單條折線的數(shù)據(jù)方法設置如下：
/**
* 設置單條折線的數(shù)據(jù)
* count 單條折線的數(shù)據(jù)量
*/
private void setSingleDatas(int count) {
//設置單條折線的X軸數(shù)據(jù)
singleNameList = new ArrayList<>();
for (int i = 0; i < count; i++) {
int j = i+1;
singleNameList.add(j + "月");
}
//將X軸數(shù)據(jù)傳入自定義的X軸ValueFormatter
MyXFormatter formatter = new MyXFormatter(singleNameList);
xAxis.setValueFormatter(formatter);
//設置單條折現(xiàn)的Y軸數(shù)據(jù)
ArrayList<Entry> yList = new ArrayList<Entry>();
for (int i = 0; i < count; i++) {
float value = (float) (Math.random()*100);
yList.add(new Entry(i,value));
}
LineDataSet lineDataSet = new LineDataSet(yList, "單條折線"); //設置單條折線
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
//設置折線的屬性
lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); //設置左右兩邊Y軸節(jié)點描述
lineDataSet.setValueTextColor(ColorTemplate.getHoloBlue()); //設置節(jié)點文字顏色
lineDataSet.setDrawCircles(false); //設置是否顯示節(jié)點的小圓點
lineDataSet.setDrawValues(false); //設置是否顯示節(jié)點的值
lineDataSet.setHighLightColor(Color.rgb(244, 117, 117));//當點擊節(jié)點時赖草，將會出現(xiàn)與節(jié)點水平和垂直的兩條線学少，可以對其進行定制.此方法為設置線條顏色
lineDataSet.setHighlightEnabled(true);//設置是否顯示十字線
lineDataSet.setColor(Color.BLUE); //設置線條顏色
lineDataSet.setCircleColor(Color.WHITE); //設置節(jié)點的圓圈顏色
lineDataSet.setLineWidth(1f); //設置線條寬度
lineDataSet.setCircleRadius(4f);//設置每個坐標點的圓大小
lineDataSet.setDrawCircleHole(false);//是否定制節(jié)點圓心的顏色，若為false秧骑，則節(jié)點為單一的同色點版确，若為true則可以設置節(jié)點圓心的顏色
lineDataSet.setValueTextSize(9f); //設置 DataSets 數(shù)據(jù)對象包含的數(shù)據(jù)的值文本的大小（單位是dp）乎折。
//設置折線圖填充
lineDataSet.setDrawFilled(false); //Fill填充绒疗，可以將折線圖以下部分用顏色填滿
lineDataSet.setFillAlpha(65); ////設置填充區(qū)域透明度，默認值為85
lineDataSet.setFillColor(ColorTemplate.getHoloBlue());//設置填充顏色
lineDataSet.setFormLineWidth(1f);
lineDataSet.setFormSize(15.f);
dataSets.add(lineDataSet);
LineData data = new LineData(dataSets);
lineChart.setData(data); //添加數(shù)據(jù)
}
多條折線的數(shù)據(jù)設置方法如下：
/**
* 設置多條折線的數(shù)據(jù)
* @param chartData //線條x軸的個數(shù)
* @param count //線條的個數(shù)
*/
private void setManyDatas(int chartData, int count) {
singleNameList = new ArrayList<>();
for (int i = 0; i < chartData; i++) {
int j = i+1;
singleNameList.add(j + "月");
}
MyXFormatter formatter = new MyXFormatter(singleNameList);
xAxis.setValueFormatter(formatter);
initChartColors(); //設置線條顏色集合
initChartNames(count); //設置不同線條名字的集合
ArrayList<ILineDataSet> dataSets = new ArrayList<>(); //線條數(shù)據(jù)集合
for (int i = 0; i < count; i++) {
//設置單條折現(xiàn)的Y軸數(shù)據(jù)
ArrayList<Entry> yList = new ArrayList<Entry>();
for (int j = 0; j < chartData; j++) {
float value = (float) (Math.random()*100);
yList.add(new Entry(j,value));
}
LineDataSet lineDataSet = new LineDataSet(yList, nameList.get(i)); //設置單條折線
//設置折線的屬性
lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); //設置左右兩邊Y軸節(jié)點描述
lineDataSet.setValueTextColor(ColorTemplate.getHoloBlue()); //設置節(jié)點文字顏色
lineDataSet.setDrawCircles(false); //設置是否顯示節(jié)點的小圓點
lineDataSet.setDrawValues(false); //設置是否顯示節(jié)點的值
lineDataSet.setHighLightColor(Color.rgb(244, 117, 117));//當點擊節(jié)點時骂澄，將會出現(xiàn)與節(jié)點水平和垂直的兩條線吓蘑，可以對其進行定制.此方法為設置線條顏色
lineDataSet.setHighlightEnabled(true);//設置是否顯示十字線
lineDataSet.setColor(colours.get(i)); //設置線條顏色
lineDataSet.setCircleColor(Color.WHITE); //設置節(jié)點的圓圈顏色
lineDataSet.setLineWidth(1f); //設置線條寬度
lineDataSet.setCircleRadius(4f);//設置每個坐標點的圓大小
lineDataSet.setDrawCircleHole(false);//是否定制節(jié)點圓心的顏色，若為false坟冲，則節(jié)點為單一的同色點磨镶，若為true則可以設置節(jié)點圓心的顏色
lineDataSet.setValueTextSize(9f); //設置 DataSets 數(shù)據(jù)對象包含的數(shù)據(jù)的值文本的大小（單位是dp）健提。
//設置折線圖填充
lineDataSet.setDrawFilled(false); //Fill填充琳猫，可以將折線圖以下部分用顏色填滿
lineDataSet.setFillAlpha(65); ////設置填充區(qū)域透明度，默認值為85
lineDataSet.setFillColor(ColorTemplate.getHoloBlue());//設置填充顏色
lineDataSet.setFormLineWidth(1f);
lineDataSet.setFormSize(15.f);
dataSets.add(lineDataSet);
}
LineData data = new LineData(dataSets);
lineChart.setData(data); //添加數(shù)據(jù)
}
/**
* 設置線條名字集合
* @param count
*/
private void initChartNames(int count) {
nameList = new ArrayList<>();
for (int i = 0; i < count; i++) {
int j = i+1;
String name = "線條" + j;
nameList.add(name);
}
}
/**
* 提前設置顏色集合
*/
private void initChartColors() {
//顏色集合
colours = new ArrayList<>();
colours.add(Color.GREEN);
colours.add(Color.BLUE);
colours.add(Color.RED);
colours.add(Color.CYAN);
colours.add(Color.BLACK);
colours.add(Color.GRAY);
}
由上代碼私痹，相信看官老爺們不難看出脐嫂，單條折線和多條折線的實現(xiàn)思路其實有異曲同工之妙统刮。都是創(chuàng)建了一個ArrayList<ILineDataSet>集合，添加LineDataSet 對象并設置屬性账千。最后將此集合通過LineData的構(gòu)造方法网沾，調(diào)用圖表對象的.setData()方法進行添加的。
補充：
圖例蕊爵，也就是這玩意
image.png
最好自己定義，寫個GirdView就可以了桦山。還能自動換行攒射，美滋滋。官方的不多說恒水，丑而且自動換行有問題会放。
三.踩坑之處：
1.自定義X軸數(shù)據(jù)。
這里有一個不得不說的要點钉凌，我們在自定義X軸數(shù)據(jù)咧最，創(chuàng)建自己的IAxisValueFormatter實現(xiàn)類時，一定要注意提前設置 X軸的這個屬性：
//設置是否一個格子顯示一條數(shù)據(jù)
xAxis.setGranularity(1f);
如果不設置這個屬性御雕，就會導致X軸數(shù)據(jù)重復并且錯亂矢沿，原因是IAxisValueFormatter實現(xiàn)類的的方法getFormattedValue（float value, AxisBase axis）中的value返回錯亂。
2.數(shù)據(jù)刷新酸纲。
如果你實現(xiàn)了自己的圖表控件捣鲸，并且有多種類型的數(shù)據(jù)需要重復設置，需要刷新圖表控件時闽坡，若有X軸經(jīng)常顯示錯亂的問題栽惶，不妨多調(diào)用一次lineChart.setData(data);方法。
四.到此疾嗅，就已經(jīng)實現(xiàn)了折線圖表的功能外厂。隨手分享，喜歡的朋友可以關(guān)注微信公眾號MiHomes代承，后續(xù)會有更多更好的博客推送給您汁蝶。
MiHomes.png
另：歡迎指出不足，會進行更正
