MPAndroidChart的LineChart（折線圖）的個人學習經驗

 本人學習MPAndroidChart的經歷可以說十分坎坷，對於沒有什么經驗的小白來說，真的不好入手，但總的來說其實也不是很難。

讓我們來略微了解一下LineChart(折線圖)的基本方法吧！

首先

第一步要使用MPAndroidChart這個Android圖標庫需要導入：

兩種方式：1.導入架包2.添加依賴

官網地址：https://github.com/PhilJay/MPAndroidChart

依賴導入

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

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

然后我們就開始創建UI布局啦！
第二步先創建一個lineChart.xml的布局文件
具體代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/linechart_with"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>
</LinearLayout>

是不是十分簡單
我們就只需要對這一個控件進行操作，我的理解就是這個控件就是一張畫布，可以對畫布進行自由發揮 
但是也有一定的約束，要發揮它的作用 實現圖表庫的作用實現數據可視化，方便用戶直觀的獲取數據。
第三步 創建一個LineChartActivity.java文件

public class LineChartActiviy extends AppCompatActivity {
    public LineChart lineChart;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linechartdemo);
        lineChart = (LineChart)findViewById(R.id.linechart_with);
    }
}

 

初始化代碼
初始化一個LineChart對象 
找到布局文件，找到對應的id,就可以很快樂的對他進行操作啦！

第四步我們來思考一下一個折線圖有啥 ？ 數據 ，折線，座標軸，描述差不過了我們先說單條折線。
第五步我們存數據
數據我們用List來存儲折線圖的數據
我們來說一下這個折線圖的數據 Entry類型的 作用就是來存儲折線圖數據

public Entry(float x, float y) {
    super(y);
    this.x = x;
}

 

第一個參數 float x，是折線圖中數據值的位置索引
第二個參數float y，是具體數據值
我們主要傳入數據的用法
創建一個List<Entry> mList = new ArrayList<>();存儲數據
有存數據的容器了就得把數據存進去
數據來源可以自己寫，網絡請求獲取，json文件解析數據等等。
一般來說初學者的話就是兩種手寫代碼，或者使用Random函數自動生成
各有各的好處，手寫代碼就是很直觀 ，每次的圖都一樣，用於測試展示都ok，
Random生成的數據每次都不一樣，出來的圖也不一樣，可以用來動態生成數據。如果需要特別一定范圍內的數據，一點更給生成的范圍
一般來說，初學者就用手寫的就練習
private float[] lineFloat = {1,2,3,4,5,6,2,2};
隨機給都是可以的
mList.add(new Entry(1f,lineFloat[1]));
創建新的Entry對象接收兩個float類型的參數，添加到List中
如果一條數據一條數據的寫真的很麻煩，但是我們可以使用for循環來簡化這個過程
for(int i,i<lineFloat.length,i++){
　　mList.add(new Entry(i,lineFloat[i]));
}
數據存到列表中了
第六步設置這條折線
初始化這條折線 這條折線是一個LineDataSet對象
看源碼

private List<Integer> mCircleColors = null;
public LineDataSet(List<Entry> yVals, String label) {
    super(yVals, label);

    // mCircleRadius = Utils.convertDpToPixel(4f);
    // mLineWidth = Utils.convertDpToPixel(1f);

    if (mCircleColors == null) {
        mCircleColors = new ArrayList<Integer>();
    }
    mCircleColors.clear();

    // default colors
    // mColors.add(Color.rgb(192, 255, 140));
    // mColors.add(Color.rgb(255, 247, 140));
    mCircleColors.add(Color.rgb(140, 234, 255));
}

 

先看我們需要傳入兩個參數 一個列表，一個String 的Label，
列表我們已經創建好了，就是mList，
Label我們可以理解為這條折線的名字
再看定義的一個List<Integer> 對象的mCircleColors
就是給了每個數據點的的顏色，默認的一個顏色

LineDataSet set = new LineDataSet(mList,"等級分布");//初始化這條折線

設置折線的寬度，顏色，是否有圓心，很多很多，就舉例代碼樣式

set.setLineWidth(3f);//折線的寬度
set.setCircleRadius(3.5f);//數據點的半徑
set.setMode();//折線的樣式 默認為折線，曲線也則改為LineDataSet.Mode.CUBIC_BEZIER

set.setCircleColor(Color.RED);//數據點的顏色
set.setDrawFilled(false);//是否對數據點圓心進行填充
set.setDrawCircleHole(false);//是否數據點圓是否為空心圓
set.setColor(Color.RED);//設置折線顏色
set.setValueTextSize(10f);//設置顯示數據的值

 

用到的都在這里啦！其他的可以自己去拓展
第七步管理數據集
初始化一個LineData對象，
LineData data = new LineData(set);
然后我們呢看源碼

public class LineData extends BarLineScatterCandleBubbleData<ILineDataSet> {

    public LineData() {
        super();
    }

    public LineData(ILineDataSet... dataSets) {
        super(dataSets);
    }

    public LineData(List<ILineDataSet> dataSets) {
        super(dataSets);
    }
}

 

就這么一點沒得看哦！
但是都是精華哦！
首先我們看有三個構造方法分別傳無參構造，ILineDataSet對象和List<ILineDataSet> 
很顯然就是把我們設置好的LineDataSet對象給傳進去，但是List<ILineDataSet>
說明了折線圖不止一條數據線，所以我們可以再創建數據折線線都當作參數給LineDataSet，以實現折線圖中的多條數據
接着我們開始設置這個LineData對象

data.setDrawValues(false);//折線上是否繪制數據
data.setValueTextColor(Color.RED);//數據的字體顏色
data.setValueTextSize(15f);//數據的字體大小

 

我們初級一般用到的就這三個就夠了
其實我們不去設置默認都ok，有需要的再去設置自己需要的效果

第八步 XY軸
一個坐標軸可是圖表的框架
但是這個框架根據需求，美觀性可以選擇性的調用和設置
我們知道一般是兩個軸X軸和Y軸
但是再MPAndroidChart中可不止，Y軸就有兩個
在左邊的Y軸我們給他起名（leftYAxis），右邊的就是（rightYAxis）
X軸就一個但是位置可以設置 ，上下都可以
定義

XAxis xAxis = lineChart.getXAxis();//初始化X軸
YAxis leftyAxis =lineChart.getAxisLeft();//初始化左邊Y軸
YAxis rightyAxis = lineChart.getAxisRight();//初始化右邊Y軸
xAxis.setEnabled(true);//是否調用x軸
xAxis.setPosition(XAxis.XAxisPosition.TOP);//設置X軸的位置
xAxis.setLabelCount(5);//設置x軸標簽的數目
xAxis.setTextSize(20f);//設置標簽的字體大小
xAxis.setTextColor(Color.BLUE);//設置標簽字體的顏色
xAxis.setDrawAxisLine(false);//是否繪制x軸的直線
xAxis.setDrawGridLines(false);//是否畫網格線
xAxis.setLabelCount(7);//設置X軸的標簽數量
//xAxis.setAxisMaximum(10f);//設置X軸標簽最大值
//xAxis.setAxisMinimum(0f);//設置X軸標簽最小值

 

XY軸設置都是互通的，當然方法也不止折線，目前用到的就是這些，
重點來了
自定義坐標軸標簽
為什么要自定義坐標軸標簽？
目的是為了滿足需求，默認的是0，1，2...
很low
我們定義為星期吧七天

public static final String[] week = {"周一","周二","周三","周五","周六","周日"};
7個標簽
怎么操作呢？？
有個方法自定義X軸的標簽顯示

xAxis.setValueFormatter(valueFormatter);
看源碼

public void setValueFormatter(ValueFormatter f) {

    if (f == null)
        mAxisValueFormatter = new DefaultAxisValueFormatter(mDecimals);
    else
        mAxisValueFormatter = f;
}

簡單說就是你給的參數是ValueFormatter類型的，為null的時候就給你新建一個自帶的，
不為null就是傳的參數
那我們就創建這個CalueFormatter類型

ValueFormatter valueFormatter = new ValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
        return ""+week[(int)value];
    }
};

 

根據參數value來取出List中對應的數據
value一定要強轉成（int）類型，我們取得是索引；
返回值是String，我們就用""+來實現String

到這里我們的任務只差最后一步
實現圖表
lineChart.setData(data);//在UI中繪制圖表
看源碼

public void setData(T data) {

    mData = data;
    mOffsetsCalculated = false;

    if (data == null) {
        return;
    }
}

 

就是繪制圖表
如果傳入的值為null就什么都沒有

簡簡單單一行，卻需要我們給他准備這么多，你的成功可能在旁人只能看到最后一步，可對你來說卻大量的准備最后水到成水渠的成功。
第一次寫博客，分享學習的坎坷。
最后附上源碼（兩條折線圖和運行效果）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/linechart_with"
        android:layout_width="match_parent"
        android:layout_height="400dp"/>

</LinearLayout>

 

 

 

 

public class LineChartActiviy extends AppCompatActivity {
    public LineChart lineChart;
    public static int[] moreline = {22,24,25,25,25,22};
    public static int[] lessline = {14,15,16,17,16,16};
    public static final String[] week = {"昨天","今天","明天","周五","周六","周日"};
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linechartdemo);
        lineChart = (LineChart)findViewById(R.id.linechart_with);
        setData(lineChart);
    }

    public static void setData(LineChart lineChart) {

        List<Entry> list = new ArrayList<>();
        List<Entry> list2 = new ArrayList<>();
        for (int i = 0; i < moreline.length; i++) {
            list.add(new Entry((float)i,moreline[i]));
            list2.add(new Entry((float)i,lessline[i]));
        }

        LineDataSet set = new LineDataSet(list,"");
        LineDataSet set2 = new LineDataSet(list2,"");



        Description description = lineChart.getDescription();
        description.setEnabled(false);
        lineChart.setDescription(description);


        set.setLineWidth(3f);
        set.setCircleRadius(3.5f);

        set.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        set.setCircleColor(Color.RED);
        set.setDrawFilled(false);
        set.setDrawCircleHole(false);
        set.setColor(Color.RED);
        set.setValueTextSize(10f);



        //set2.setDrawCircleHole(true);
        set2.setLineWidth(3f);
        set2.setCircleRadius(3.5f);
        set2.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        set2.setCircleColor(Color.BLUE);
        set2.setDrawFilled(false);
        set2.setDrawCircleHole(false);
        set2.setColor(Color.BLUE);
        set2.setValueTextSize(10f);

        LineData data = new LineData(set,set2);
        data.setDrawValues(false);
        data.setValueTextColor(Color.RED);
        data.setValueTextSize(15f);




        XAxis xAxis = lineChart.getXAxis();
        xAxis.setEnabled(true);
        xAxis.setPosition(XAxis.XAxisPosition.TOP);
        xAxis.setLabelCount(5);
        xAxis.setTextSize(20f);
        xAxis.setTextColor(Color.BLUE);
        xAxis.setDrawAxisLine(false);
        xAxis.setDrawGridLines(false);
        xAxis.setAxisMaximum(10f);
        xAxis.setAxisMinimum(0f);
        xAxis.setLabelCount(7);

        ValueFormatter valueFormatter = new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                return ""+week[(int)value];
            }
        };
        xAxis.setValueFormatter(valueFormatter);

        YAxis leftyAxis =lineChart.getAxisLeft();
        leftyAxis.setDrawAxisLine(false);
        leftyAxis.setLabelCount(4);
        leftyAxis.setDrawLabels(false);
        YAxis rightyAxis = lineChart.getAxisRight();
        rightyAxis.setEnabled(false);
        lineChart.setData(data);

    }


}

 

本文如果在觀看的過程中看到錯誤

和缺漏的，請與我來聯系我很感謝！我表示感謝您能來看我的文章！