Android MPAndroidChart超漂亮圖表框架

Blog如有不對，敬請斧正
喜歡Android的可以關注我，日常更新Android干貨

簡介

MPAndroidChart是GitHub中大名鼎鼎的一個開源框架，可以快速制作開發中需要的圖表，如:折線圖、柱形圖、餅圖、雷達圖，

Github專案地址:https://github.com/PhilJay/MPAndroidChart

API開發檔案:https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/

簡單列舉一些，大家感受一下它的強大

配置

只需2步
1、

 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
 
 repositories {
    maven { url 'https://jitpack.io' }
}

2、

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

記得點擊 Sync Now
記得點擊 Sync Now
記得點擊 Sync Now

示例

我這里用折線圖、條形圖、雷達圖，來給大家演示一下，

1、 activity_main.xml

要點:

在Layout中通常使用

com.github.mikephil.charting.charts.xxxx

引入組件，

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
        <com.github.mikephil.charting.charts.LineChart
            android:layout_marginTop="10dp"
            android:id="@+id/lc_1"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <com.github.mikephil.charting.charts.BarChart
            android:layout_marginTop="10dp"
            android:id="@+id/bc_1"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <com.github.mikephil.charting.charts.RadarChart
            android:layout_marginTop="10dp"
            android:id="@+id/rc_1"
            android:layout_width="match_parent"
            android:layout_height="250dp" />
</LinearLayout>

2、 MainActivity
要點:

1、利用 ArrayList< Entry >()添加資料 ，Entry()是MPAndroidChart定義好的類，通過 Entry(x,y)，增加X軸和Y軸的資料，Entry可能會改變，如條形圖的就是對應的是BarEntry

2、利用ArrayList()創建
new xxxDataSet(list,"radar")，拿折線圖來說，第二個引數是這條折線的’名稱’，一個xxxDataSet 就代表一條折線，

3、xxxData data= new xxxData() 的addDataSet(set) 方法將上面的資料添加，添加兩個xxxDataSet就有兩條折線了，

4、利用創建組件的 setData(data)添加資料，顯示資料

 ArrayList< Entry >()---->
 new xxxDataSet(list,"radar")---->
 xxxData data= new xxxData()---->
組件.setData()

MainActivity

package com.example.xianyu;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.data.RadarData;
import com.github.mikephil.charting.data.RadarDataSet;
import com.github.mikephil.charting.data.RadarEntry;
import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {
    com.github.mikephil.charting.charts.LineChart mylineChart;
    com.github.mikephil.charting.charts.BarChart mybarchart;
    com.github.mikephil.charting.charts.RadarChart myradarchart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initLineChart();
        initBarChart();
        initRadarChart();
    }

    private void initRadarChart() {
        myradarchart = findViewById(R.id.rc_1);

        List<RadarEntry> list = new ArrayList<RadarEntry>();
        RadarEntry da1 = new RadarEntry(0);
        RadarEntry da2 = new RadarEntry(5);
        RadarEntry da3 = new RadarEntry(10);
        RadarEntry da4 = new RadarEntry(15);
        RadarEntry da5 = new RadarEntry(20);
        list.add(da1);
        list.add(da2);
        list.add(da3);
        list.add(da4);
        list.add(da5);

        RadarData radarData = new RadarData();

        RadarDataSet radarDataSet = new RadarDataSet(list,"radar");
        radarData.addDataSet(radarDataSet);
        myradarchart.setData(radarData);
    }

    public void initLineChart(){
        mylineChart = findViewById(R.id.lc_1);

        List<Entry> entry = new ArrayList<Entry>();
        Entry c1e1 = new Entry(10, 0);
        Entry c1e2 = new Entry(20, 5);
        Entry c1e3 = new Entry(30, 10);
        Entry c1e4 = new Entry(40, 15);

        entry.add(c1e1);
        entry.add(c1e2);
        entry.add(c1e3);
        entry.add(c1e4);

       LineDataSet  data = new  LineDataSet(entry,"linechart");

       LineData lineData = new LineData(data);
       mylineChart.setData(lineData);
    }


   public void initBarChart(){
     mybarchart = findViewById(R.id.bc_1);
        List<BarEntry> list = new ArrayList<BarEntry>();
        BarEntry da1 = new BarEntry(0,5);
       BarEntry da2 = new BarEntry(5,6);
       BarEntry da3 = new BarEntry(10,10);
       BarEntry da4 = new BarEntry(15,12);
       BarEntry da5 = new BarEntry(20,15);
        list.add(da1);
       list.add(da2);
       list.add(da3);
       list.add(da4);
       list.add(da5);    
       BarData data= new BarData();
       BarDataSet set = new BarDataSet(list,"barchar");
       data.addDataSet(set);
       data.addDataSet(set);
       mybarchart.setData(data);
   }
    }

實作圖:

現在做出來的效果使用的是默認的圖表樣式，如需開發自定義，更靈活，還需要學習api檔案中components 包，它包含了X軸、Y軸、基線等類的get和set方法，方便快速設定X、Y軸樣式，

總結

非常好用，快學起來叭！