MPAndroidChart庫使用詳解——LineChart

介紹：

MPAndroidChart是一款基於Android的開源圖庫，具有着很好的擴展性，兼容Android 2.2 ( API 8 ) 和以上

• 支持線狀圖、柱狀圖、散點圖、燭狀圖、氣泡圖、餅狀圖和蜘蛛網狀圖
• 支持縮放、拖動(平移)、選擇和動畫

一、引入AS項目

這裏以github上目前最新版本V3.0.1爲例：
在Project級別的build.gradle中添加如下代碼：

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

在app級別的build.gradle中添加如下代碼：

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'
}

二、使用

使用 LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart or RadarChart可以在xml中定義通過id獲得，也可以通過Java代碼直接創建，下面我們分別來看這兩種創建方式：
1.通過xml佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dip">

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</RelativeLayout>

然後，通過id獲得：

LineChart  chart = (LineChart) findViewById(R.id.chart);

2.通過Java代碼創建

// programmatically create a LineChart
 LineChart chart = new LineChart(Context);

這裏需要注意的是，如果沒有在佈局中定義需要加入到佈局中

// get a layout defined in xml
RelativeLayout rl = (RelativeLayout) findViewById(R.id.relativeLayout);
 rl.add(chart); // add the programmatically created chart

三、chart樣式

當創建好一個chart後，就可以爲該chart設置樣式，包括chart的縮放，chart視圖窗口的邊距和加載動畫，X/Y軸標籤的樣式、顯示的位置、座標軸的寬度、是否可用等，圖例的位置、文字大小等等。
下面是一些可以直接在chart上面設置style的方法：

• setDragEnabled(boolean b);//啓用/禁用平移圖表，默認爲true

• setDoubleTapToZoomEnabled(boolean b);//雙擊縮放 ，默認true

• setTouchEnabled(boolean b);//開啓/禁用所有可能和chart的觸摸交互,默認爲true

• setScaleEnabled(boolean b);//啓用/禁用縮放圖表上的兩個軸,默認爲true

• setDrawGridBackground(boolean b);//開啓chart繪圖區後面的背景矩形將進行繪製

• setDrawBorders(boolean b);//啓用/禁用繪製圖表邊框

1、setDescription(Description d)用來設置圖表描述

//上面左圖具有描述設置，默認有描述
Description description = new Description();
description.setText("圖表描述");//描述文字
//description.setPosition(50f,50f);//文字位置，默認圖表右下角
 description.setTextColor(Color.BLUE);//描述文字字體顏色
 chart.setDescription(description);//設置圖表描述


//右圖，隱藏圖表描述
 chart.getDescription().setEnabled(false);//隱藏圖表描述

2.enableGridDashedLine(float lineLength, float spaceLength, float phase) : 啓用網格線的虛線模式中得出，比如像這樣“ - - - - - - ”

• “lineLength”控制虛線段的長度
• “spaceLength”控制線之間的空間
• “phase”controls the starting point.

四、X/Y軸繪製

AxisBase是XAxis和YAxis的父類，XY軸兩者有着相似的地方，這裏着重來看X軸

4.1、X軸

XAxis xAxis = lineChart.getXAxis();//獲取x軸
//xAxis.setDrawAxisLine(true);//繪製X軸，默認爲true
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設置x軸位置，有四個屬性。可以說是上下兩個位置，只不過軸標籤分爲軸線內外，感興趣的可以自己試試

//禁用x軸，設置爲false後該軸任何部分都不會繪製,所以即使再設置xAxis.setDrawAxisLine(true);也不會被繪製
//xAxis.setEnabled(false);
xAxis.setDrawGridLines(true);//繪製網格線，默認爲true
xAxis.setGridColor(Color.BLUE);//設置該軸的網格線顏色。
xAxis.setGridLineWidth(5f);// 設置該軸網格線的寬度。

4.1.1、網格線設置

左圖爲在X軸上繪製網格線並對網格線顏色寬度進行設置，代碼如下：

 XAxis xAxis = chart.getXAxis();
 xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設置x軸位置
 xAxis.setDrawGridLines(true);//繪製網格線,默認值可以不寫
 xAxis.setGridLineWidth(5f);// 設置該軸網格線的寬度。
 xAxis.setAxisLineColor(Color.GREEN);//設置軸線的軸的顏色。

右圖爲不繪製網格線

XAxis xAxis = chart.getXAxis();
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設置x軸位置
xAxis.setDrawGridLines(true);//不繪製網格線

4.1.2 軸線設置

在4.1.1右圖的代碼上面加上下面的代碼就如上圖所示：

xAxis.setAxisLineColor(Color.GREEN);//設置軸線的軸的顏色。
xAxis.setAxisLineWidth(5f);//設置該軸軸行的寬度。

4.13 軸標籤設置
4.1.2圖示中的軸標籤”數據0，數據1，數據2…”設置如下：(這裏我們的軸標籤總共有6個)

xAxis.setDrawGridLines(false);//繪製網格線
xAxis.setDrawLabels(true);//繪製該軸標籤
xAxis.setTextColor(Color.RED);// 設置軸標籤的顏色。
xAxis.setTextSize(11f);//設置軸標籤的文字大小。
//xAxis.setTypeface(Typeface tf);// 設置軸標籤的 Typeface。

通過setValueFormatter來轉換軸標籤，

 xAxis.setValueFormatter(new IAxisValueFormatter() {
        @Override
        public String getFormattedValue(float value, AxisBase axis) {
                int i = (int)value;
                return "數據"+i;
            }
        });

同樣可以在這裏對數據進行別的處理，比如保留一位小數。
我們來看如何讓X軸顯示多少個標籤(注意這裏所有的點都顯示)，
比如：我們一共有6個座標點對映着6個X軸標籤

如上圖，我們設置：

xAxis.setLabelCount(2);//設置x軸顯示的標籤個數

但是，需要注意的是，這裏的個數它並不是一個絕對意義上的值，是在總標籤數可以整除設置標籤數的情況下。當所設置的標籤數導致間隔不能均分的情況下chart會按照自己的一種方式來展示

那麼，我們該如何設置當前窗口只展示固定的座標點個數，剩餘的通過滑動展現出來？這個時候可以使用chart的一個方法：chart.setVisibleXRangeMaximum(float f),該方法表示最大的展示區域,即顯示不超過改值的點。需要注意的是必須在setData(data);後才生效

4.14設置數據

設置數據是通過chart.setData(T data)方法設置的。對於這裏的T也即是LineData，LineData有三個構造方法：

 public LineData() {
        super();
 }

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

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

ILineDataSet是一個數據集接口，我們可以通過它的實現類LineDataSet來設置。
LineDataSet的構造爲：LineDataSet(List yVals, String label)。
LineDataSet可以理解爲我們需要繪製的那條數據線，yVals爲座標數據集，label代表該折線的名稱。
Entry代表一個座標點
下面我們整體串一下：
第一步：先創建座標點的數據集(這裏模擬6個隨機數作爲y座標值)

 ArrayList<Entry> poitList= new ArrayList<Entry>();
 for (int i= 0;i<6;i++){
           float mult = 30 / 2f;
            float val = (float) (Math.random() * mult) + 50;
            poitList.add(new Entry(i,val));
   }

第二步:將數據集綁定到LineDataSet 上

LineDataSet dataSet= new LineDataSet(poitList, "data 1");
dataSet.setAxisDependency(YAxis.AxisDependency.LEFT);
dataSet.setHighLightColor(Color.RED); // 設置點擊某個點時，橫豎兩條線的顏色
dataSet.setDrawValues(true);//在點上顯示數值 默認true
dataSet.setValueTextSize(12f);//數值字體大小，同樣可以設置字體顏色、自定義字體等

YAxis.AxisDependency.LEFT代表Y軸的左軸，等會再來說

第三步：將dataSet設置給LineData

LineData data = new LineData(dataSet);

如果想要繪製多條折線，可以按照第二步創建第二條數據的集合然後再一起設置給LineData。比如：

LineDataSet dataSet1= new LineDataSet(poitList1, "data 1");
LineDataSet dataSet2= new LineDataSet(poitList2, "data 2");
LineData data = new LineData(dataSet1,dataSet2);

第四步：給chart設置

chart.setData(data);

4.2、Y軸

對於Y軸默認是有兩根軸的,如上左圖。
右圖設置如下：

YAxis leftAxis = chart.getAxisLeft();//獲取左軸
 // YAxis rightAxis = chart.getAxisRight();//獲取右軸
 chart.getAxisRight().setEnabled(false);//隱藏右軸  默認顯示

 //設置Y軸最大最小值，不設置chart會自己計算
 leftAxis.setAxisMinimum(0f);//設置最小值
 leftAxis.setAxisMaximum(70f);//設置最大值
 leftAxis.setDrawGridLines(true);//繪製網格線 默認爲true

4.3.限制線

兩個軸支持 LimitLines 來呈現特定信息，如邊界或限制線。LimitLines 加入到 YAxis 在水平方向上繪製，添加到 XAxis 在垂直方向繪製。 如何通過給定的軸添加和刪除 LimitLines：

• addLimitLine(LimitLine l) : 給該軸添加一個新的 LimitLine 。
• removeLimitLine(LimitLine l) : 從該軸刪除指定 LimitLine 。
• 還有其他的方法進行 添加/刪除操作。

// 設置x軸的LimitLine
LimitLine yLimitLine = new LimitLine(58f,"yLimit 測試");
yLimitLine.setLineColor(Color.RED);
yLimitLine.setTextColor(Color.RED);
leftAxis.addLimitLine(yLimitLine);

 // 設置x軸的LimitLine，index是從0開始的
 LimitLine xLimitLine = new LimitLine(4f,"xL 測試");
 xLimitLine.setLineColor(Color.GREEN);
 xLimitLine.setTextColor(Color.GREEN);
 xAxis.addLimitLine(xLimitLine)