昨日夜觀天象，今日忽見北斗星隕落，《Android 折線圖表》應(yīng)運(yùn)而生。

single.png

many.png

一.本篇采用MPAndroidChart，大體實(shí)現(xiàn)步驟可分為兩步：

1.配置基本屬性(包括X,Y軸)

2.設(shè)置折線數(shù)據(jù)并添加

復(fù)制代碼

二. 第一步，配置基本屬性。

1.依賴：

當(dāng)前工程Build.gradle里： implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'

項(xiàng)目Build.gradle里：

allprojects {

repositories {

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

}

}

復(fù)制代碼

2.配置圖表控件的基本屬性：

/**

* 設(shè)置Chart的一些基本配置

*/

private void initChart() {

//配置基本信息

lineChart.getDescription().setEnabled(false); //設(shè)置描述

lineChart.setTouchEnabled(true); //設(shè)置是否可以觸摸

lineChart.setDragDecelerationFrictionCoef(0.9f); //設(shè)置滾動(dòng)時(shí)的速度快慢

lineChart.setDragEnabled(true); // 是否可以拖拽

lineChart.setScaleXEnabled(false); //設(shè)置X軸是否能夠放大

lineChart.setScaleYEnabled(false); //設(shè)置Y軸是否能夠放大

//lineChart.setScaleEnabled(true); // 是否可以縮放 x和y軸, 默認(rèn)是true

lineChart.setDrawGridBackground(false);//設(shè)置圖表內(nèi)格子背景是否顯示，默認(rèn)是false

lineChart.setHighlightPerDragEnabled(true);//能否拖拽高亮線(數(shù)據(jù)點(diǎn)與坐標(biāo)的提示線)，默認(rèn)是true

lineChart.setBackgroundColor(Color.WHITE); //設(shè)置背景顏色

//配置X軸屬性

xAxis = lineChart.getXAxis();

//xAxis.setLabelRotationAngle(25f); //設(shè)置旋轉(zhuǎn)偏移量

xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //設(shè)置X軸的位置

//設(shè)置標(biāo)簽文本格式

xAxis.setTextSize(10f);

//設(shè)置標(biāo)簽文本顏色

xAxis.setTextColor(Color.rgb(255, 192, 56));

//是否繪制軸線

xAxis.setDrawAxisLine(true);

//是否繪制網(wǎng)格線

xAxis.setDrawGridLines(false);

//設(shè)置是否一個(gè)格子顯示一條數(shù)據(jù)，如果不設(shè)置這個(gè)屬性，就會(huì)導(dǎo)致X軸數(shù)據(jù)重復(fù)并且錯(cuò)亂的問題

xAxis.setGranularity(1f);

//配置Y軸信息

leftAxis = lineChart.getAxisLeft();

leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART); //設(shè)置Y軸的位置

leftAxis.setDrawGridLines(true); //設(shè)置左邊的網(wǎng)格線顯示

leftAxis.setGranularityEnabled(false);//啟用在放大時(shí)限制y軸間隔的粒度特性。默認(rèn)值：false。

leftAxis.setTextColor(Color.rgb(255, 192, 56)); //設(shè)置Y軸文字顏色

YAxis rightAxis = lineChart.getAxisRight(); //獲取右邊的Y軸

rightAxis.setEnabled(false); //設(shè)置右邊的Y軸不顯示

//設(shè)置圖例(也就是曲線的標(biāo)簽)

Legend legend = lineChart.getLegend();//設(shè)置比例圖

legend.setEnabled(false); //因?yàn)樽詭У膱D例太丑，而且操作也不方便，樓主選擇自定義，設(shè)置不顯示比例圖

}

復(fù)制代碼

第二步，設(shè)置折線數(shù)據(jù)。

首先，自定義我們的X軸適配器：

public class MyXFormatter implements IAxisValueFormatter {

private List list;

public MyXFormatter(List 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

return list.get((int) (value));

}else {

return null;

}

}

}

復(fù)制代碼

然后，設(shè)置折線數(shù)據(jù)。單條折線的數(shù)據(jù)方法設(shè)置如下：

/**

* 設(shè)置單條折線的數(shù)據(jù)

* count 單條折線的數(shù)據(jù)量

*/

private void setSingleDatas(int count) {

//設(shè)置單條折線的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);

//設(shè)置單條折現(xiàn)的Y軸數(shù)據(jù)

ArrayList yList = new ArrayList();

for (int i = 0; i < count; i++) {

float value = (float) (Math.random()*100);

yList.add(new Entry(i,value));

}

LineDataSet lineDataSet = new LineDataSet(yList, "單條折線"); //設(shè)置單條折線

ArrayList dataSets = new ArrayList<>();

//設(shè)置折線的屬性

lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); //設(shè)置左右兩邊Y軸節(jié)點(diǎn)描述

lineDataSet.setValueTextColor(ColorTemplate.getHoloBlue()); //設(shè)置節(jié)點(diǎn)文字顏色

lineDataSet.setDrawCircles(false); //設(shè)置是否顯示節(jié)點(diǎn)的小圓點(diǎn)

lineDataSet.setDrawValues(false); //設(shè)置是否顯示節(jié)點(diǎn)的值

lineDataSet.setHighLightColor(Color.rgb(244, 117, 117));//當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí)，將會(huì)出現(xiàn)與節(jié)點(diǎn)水平和垂直的兩條線，可以對其進(jìn)行定制.此方法為設(shè)置線條顏色

lineDataSet.setHighlightEnabled(true);//設(shè)置是否顯示十字線

lineDataSet.setColor(Color.BLUE); //設(shè)置線條顏色

lineDataSet.setCircleColor(Color.WHITE); //設(shè)置節(jié)點(diǎn)的圓圈顏色

lineDataSet.setLineWidth(1f); //設(shè)置線條寬度

lineDataSet.setCircleRadius(4f);//設(shè)置每個(gè)坐標(biāo)點(diǎn)的圓大小

lineDataSet.setDrawCircleHole(false);//是否定制節(jié)點(diǎn)圓心的顏色，若為false，則節(jié)點(diǎn)為單一的同色點(diǎn)，若為true則可以設(shè)置節(jié)點(diǎn)圓心的顏色

lineDataSet.setValueTextSize(9f); //設(shè)置 DataSets 數(shù)據(jù)對象包含的數(shù)據(jù)的值文本的大小(單位是dp)。

//設(shè)置折線圖填充

lineDataSet.setDrawFilled(false); //Fill填充，可以將折線圖以下部分用顏色填滿

lineDataSet.setFillAlpha(65); 設(shè)置填充區(qū)域透明度，默認(rèn)值為85

lineDataSet.setFillColor(ColorTemplate.getHoloBlue());//設(shè)置填充顏色

lineDataSet.setFormLineWidth(1f);

lineDataSet.setFormSize(15.f);

dataSets.add(lineDataSet);

LineData data = new LineData(dataSets);

lineChart.setData(data); //添加數(shù)據(jù)

}

復(fù)制代碼

多條折線的數(shù)據(jù)設(shè)置方法如下：

/**

* 設(shè)置多條折線的數(shù)據(jù)

* @param chartData //線條x軸的個(gè)數(shù)

* @param count //線條的個(gè)數(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(); //設(shè)置線條顏色集合

initChartNames(count); //設(shè)置不同線條名字的集合

ArrayList dataSets = new ArrayList<>(); //線條數(shù)據(jù)集合

for (int i = 0; i < count; i++) {

//設(shè)置單條折現(xiàn)的Y軸數(shù)據(jù)

ArrayList yList = new ArrayList();

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)); //設(shè)置單條折線

//設(shè)置折線的屬性

lineDataSet.setAxisDependency(YAxis.AxisDependency.LEFT); //設(shè)置左右兩邊Y軸節(jié)點(diǎn)描述

lineDataSet.setValueTextColor(ColorTemplate.getHoloBlue()); //設(shè)置節(jié)點(diǎn)文字顏色

lineDataSet.setDrawCircles(false); //設(shè)置是否顯示節(jié)點(diǎn)的小圓點(diǎn)

lineDataSet.setDrawValues(false); //設(shè)置是否顯示節(jié)點(diǎn)的值

lineDataSet.setHighLightColor(Color.rgb(244, 117, 117));//當(dāng)點(diǎn)擊節(jié)點(diǎn)時(shí)，將會(huì)出現(xiàn)與節(jié)點(diǎn)水平和垂直的兩條線，可以對其進(jìn)行定制.此方法為設(shè)置線條顏色

lineDataSet.setHighlightEnabled(true);//設(shè)置是否顯示十字線

lineDataSet.setColor(colours.get(i)); //設(shè)置線條顏色

lineDataSet.setCircleColor(Color.WHITE); //設(shè)置節(jié)點(diǎn)的圓圈顏色

lineDataSet.setLineWidth(1f); //設(shè)置線條寬度

lineDataSet.setCircleRadius(4f);//設(shè)置每個(gè)坐標(biāo)點(diǎn)的圓大小

lineDataSet.setDrawCircleHole(false);//是否定制節(jié)點(diǎn)圓心的顏色，若為false，則節(jié)點(diǎn)為單一的同色點(diǎn)，若為true則可以設(shè)置節(jié)點(diǎn)圓心的顏色

lineDataSet.setValueTextSize(9f); //設(shè)置 DataSets 數(shù)據(jù)對象包含的數(shù)據(jù)的值文本的大小(單位是dp)。

//設(shè)置折線圖填充

lineDataSet.setDrawFilled(false); //Fill填充，可以將折線圖以下部分用顏色填滿

lineDataSet.setFillAlpha(65); 設(shè)置填充區(qū)域透明度，默認(rèn)值為85

lineDataSet.setFillColor(ColorTemplate.getHoloBlue());//設(shè)置填充顏色

lineDataSet.setFormLineWidth(1f);

lineDataSet.setFormSize(15.f);

dataSets.add(lineDataSet);

}

LineData data = new LineData(dataSets);

lineChart.setData(data); //添加數(shù)據(jù)

}

/**

* 設(shè)置線條名字集合

* @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);

}

}

/**

* 提前設(shè)置顏色集合

*/

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);

}

復(fù)制代碼

由上代碼，相信看官老爺們不難看出，單條折線和多條折線的實(shí)現(xiàn)思路其實(shí)有異曲同工之妙。都是創(chuàng)建了一個(gè)ArrayList集合，添加LineDataSet 對象并設(shè)置屬性。最后將此集合通過LineData的構(gòu)造方法，調(diào)用圖表對象的.setData()方法進(jìn)行添加的。

補(bǔ)充：

圖例，也就是這玩意

image.png

最好自己定義，寫個(gè)GirdView就可以了。還能自動(dòng)換行，美滋滋。官方的不多說，丑而且自動(dòng)換行有問題。

三.踩坑之處：

1.自定義X軸數(shù)據(jù)。 這里有一個(gè)不得不說的要點(diǎn)，我們在自定義X軸數(shù)據(jù)，創(chuàng)建自己的IAxisValueFormatter實(shí)現(xiàn)類時(shí)，一定要注意提前設(shè)置 X軸的這個(gè)屬性：

//設(shè)置是否一個(gè)格子顯示一條數(shù)據(jù)

xAxis.setGranularity(1f);

復(fù)制代碼

如果不設(shè)置這個(gè)屬性，就會(huì)導(dǎo)致X軸數(shù)據(jù)重復(fù)并且錯(cuò)亂，原因是IAxisValueFormatter實(shí)現(xiàn)類的的方法getFormattedValue(float value, AxisBase axis)中的value返回錯(cuò)亂。

2.數(shù)據(jù)刷新。

如果你實(shí)現(xiàn)了自己的圖表控件，并且有多種類型的數(shù)據(jù)需要重復(fù)設(shè)置，需要刷新圖表控件時(shí)，若有X軸經(jīng)常顯示錯(cuò)亂的問題，不妨多調(diào)用一次lineChart.setData(data);方法。

四.到此，就已經(jīng)實(shí)現(xiàn)了折線圖表的功能。隨手分享，喜歡的朋友可以關(guān)注微信公眾號MiHomes，后續(xù)會(huì)有更多更好的博客推送給您。

另：歡迎指出不足，會(huì)進(jìn)行更正

總結(jié)

以上是生活随笔為你收集整理的折线图表android,Android 折线图表MPAndroidChart的实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。