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
    }
}

実行してみると、

このような円グラフを作成することができました。
MPAndoridCharでは、Entry(PieEntry)、DataSet(PieDataSet)、Data(PieData)のデータを使って表示させている。
それぞの解釈は、
PieEntryは円グラフを構成する一つの要素
PieDataSetは1つの円グラフのまとまり
PieDataはすべての円グラフのまとまり
円グラフだと想像しづらいですが、

このように複数のグラフを表示させる時はイメージが付きやすいと思います。

カスタマイズ

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を参照してください