PieChartまとめ（MPAndroidChart）

# はじめに
円フラフを作成する機会がありましたので、PieChartの使い方を自分ようにまとめます。

# Gradle
```build.gradle
// Project
allprojects {
    repositories {
        google()
        jcenter()
        repositories {
            maven { url 'https://jitpack.io' }
        }
    }
}

// Module
dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:3.1.0'
}
```

# 使い方
`activity_main.xml`にmy_piechartというIDでPieChartを定義。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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"
    >

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/my_piechart"
        android:layout_width="400dp"
        android:layout_height="400dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>
```

`MainActivity`では、データを作成し、my_piechartにセットするコードを書く。

```MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val sampleData: List<Int> = listOf(10, 20, 20, 30)
        val sampleLabel: List<String> = listOf("緑", "青", "赤", "灰")
        val pieEntryList: List<PieEntry> = sampleData.zip(sampleLabel).map {
            PieEntry(it.first.toFloat(), it.second)
        }
        val pieDataSet = PieDataSet(pieEntryList, "ラベル")
        pieDataSet.colors = listOf(Color.GREEN, Color.BLUE, Color.RED, Color.GRAY)
        val pieData = PieData(pieDataSet)

        my_piechart.data = pieData
    }
}
```
実行してみると、
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/42bfea6b-872d-d254-875a-0cece4505efa.png  width=300>
このような円グラフを作成することができました。
MPAndoridCharでは、`Entry(PieEntry)`、`DataSet(PieDataSet)`、`Data(PieData)`のデータを使って表示させている。
それぞの解釈は、
`PieEntry`は円グラフを構成する一つの要素
`PieDataSet`は1つの円グラフのまとまり
`PieData`はすべての円グラフのまとまり
円グラフだと想像しづらいですが、
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/bc09ab56-b98a-8f4a-75f2-c7ecc8bec39f.png  width=50%>
このように複数のグラフを表示させる時はイメージが付きやすいと思います。


## カスタマイズ
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/6bf29b25-9fba-561d-c0ee-a18f25701a90.gif  width=50%>

```MainActivity.kt
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // データがない時の文言を設定
        my_piechart.setNoDataText("更新ボタンを押してください")

        update_button.setOnClickListener {
            createPieChart()
        }
    }

    private fun createPieChart() {
        val sampleData: List<Int> = listOf(
            (1..100).random(), (1..100).random(), (1..100).random(), (1..100).random()
        )
        val sampleLabel: List<String> = listOf("緑", "青", "赤", "灰")
        val pieEntryList: List<PieEntry> = sampleData.zip(sampleLabel).map {
            PieEntry(it.first.toFloat(), it.second)
        }
        val pieDataSet = PieDataSet(pieEntryList, "ラベルの種類")
        pieDataSet.colors = listOf(Color.GREEN, Color.BLUE, Color.RED, Color.GRAY)
        val pieData = PieData(pieDataSet)
        pieData.setValueTextSize(20f)

        // アニメーション追加
        my_piechart.animateY(1000, Easing.EaseInOutCubic)

        // グラフの説明文
        val desc = Description()
        desc.text = "円グラフサンプル"
        my_piechart.description = desc

        // 中心の円を無くす
        my_piechart.holeRadius = 0f
        // 中心の円の外枠の半透明な部分を無くす
        my_piechart.transparentCircleRadius = my_piechart.holeRadius

        // ラベル群を縦のリストにする
        my_piechart.legend.orientation = Legend.LegendOrientation.VERTICAL
        // ラベル群を中央配置
        my_piechart.legend.verticalAlignment = Legend.LegendVerticalAlignment.CENTER
        my_piechart.data = pieData
    }
}
```

他にもたくさん機能があるので、興味ある方は公式Documentを参照してください