MPChart 折線圖 (多個折線)

很多人想要在App上加入一些數據分析圖表，光想要怎麼做就很頭痛八，感謝神人推出MPChart套件可以使用，就讓我們一起來看吧！

先來介紹MPChart 是什麼？

官網:

MPAndroidChart is a powerful & easy to use chart library for Android. It runs on API level 8 and upwards.

As an additional feature, this library allows cross-platform development between Android and iOS as an iOS version of this library is also available

簡單來說它就是一個"圖表"Library供android 跟 ios使用。

Wow,那不就很強大，對於想要在視覺化呈現你的數字、資料，我想這個真的必會！

優點：

八種不同的圖表類型

1.  縮放XY軸(藉由手勢觸碰、滑動)
2.  組合圖表
3. 可訂制XY軸的值
4.  圖表儲存
5.  動畫產生值
6. 可訂製的圖表(字體、顏色、背景、手勢、圖點)
7.  會隨著你的值縮放圖表

圖表類型：

1.     長條圖
2.     折線圖
3.     圓餅圖
4.    散點圖
5.    泡泡圖
6.    直方圖
7.    雷達圖
8.    組合圖

其實官方的網站都有講到這裡附上，那接下來就來實作我們的折線圖

一、首先，在你的專案加入此Lib

        在build.gradle裡加入

    dependencies {compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'}

二、開始在你的layout加入CustomerView，這裡我們要做折線圖

    <com.github.mikephil.charting.charts.LineChart

    android:id="@+id/chart"   

android:layout_width="match_parent"    android:layout_height="match_parent"   

android:layout_margin="10dp" />

三、在Activiy定義、設置圖表style、設置圖表功能、設置圖表值並實作出來

定義：LineChart mchart = (LineChart)findViewById(R.id.chart);

設置圖表style：

        mChart.setDescription(mDataSource.getDescription());//在chart上的右下角加描述

        mChart.setDescriptionTextSize(30);

        mChart.setUnit("%"); //設置Y轴上的单位

        mChart.setAlpha(0.8f);//設置透明度

        mChart.setBorderColor(Color.rgb(213, 216, 214));//設置網格底下的那條線的颜色

        mChart.setBackgroundColor(Color.rgb(255, 255, 255));//設置背景顏色

設置圖表功能:

        mChart.setHighlightEnabled(true);//設置焦點顯示        

         mChart.setTouchEnabled(true);//設置是否可以觸摸，如為false，則不能拖動，縮放等

        mChart.setDragEnabled(true);//設置是否可以拖拽，缩放

        mChart.setScaleEnabled(true);//設置是否在圖點上顯示值

        mChart.setPinchZoom(true); //設置是否能變大變小

設置圖表值：

     我想這個是大家最想知道的

     首先我利用ArrayList去存我的XY(橫、縱軸)值

     List<Entry> entries = new ArrayList<>();

{

    x = {1,2,3};

    y = {3,2,1}

    for (int i = 0; i < x.size(); ++i) {

        Entry e = new Entry(x[i], y[i]);

        entries.add(e);

    }

}

LineDataSet dataSet = new LineDataSet(entries, "");
//折線的顏色
dataSet.setColor(Color.GRAY);
dataSet.setLineWidth(3.0f);
//線下方填滿
dataSet.setDrawFilled(true);
dataSet.setFillColor(Color.parseColor("#FFFD464E"));
//圈圈外圍大小跟顏色
dataSet.setDrawCircles(true);
dataSet.setCircleColor(Color.WHITE);
dataSet.setCircleRadius(8.0f);
//圈圈裡面洞大小跟顏色
dataSet.setDrawCircleHole(true);
dataSet.setCircleColorHole(Color.GRAY);
dataSet.setCircleHoleRadius(4.0f);
//要不要在點上面顯示數值
dataSet.setDrawValues(false);

     注意的是這裡的Entry是MPChart lib裡的class， Entry(float x, float y)

     ，所以要記得把X和Y轉型成 Float！

最後就把數值實作在MPChart裡，就大功告成

  mchart.setData(lineData);

最後教大家怎麼在一張圖放置多個折線

還記得我一開始教大家怎麼存取我們的XY值嗎?!

    List<Entry> entries = new ArrayList<>();

{

    x = {1,2,3};

    y = {3,2,1}

    for (int i = 0; i < x.size(); ++i) {

        Entry e = new Entry(x[i], y[i]);

        entries.add(e);

    }

} 

LineDataSet dataSet = new LineDataSet(entries, "");

那我們現在要創建一個LineDataSet的ArrayList去存取我們多個折線的值

ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();

dataSets.add(dataSet);

dataSets.add(dataSet2);
dataSets.add(dataSet3);
....以此類推
這樣就可以放多個折線

今天就到一段落，這裡不放Code,網路上很多，如果有問題也可以互相切搓