【MPAndroidChart】各種グラフの実装方法まとめ【Androidアプリ開発】

ライブラリ「MPAndroidChart」を利用して、各種グラフを実装する方法を説明しています。

本記事では、 ライブラリ「MPAndroidChart」 を使用して表示できるグラフのうち、以下のグラフについて実装例を示していきます。

• LineChart（線グラフ）
• BarChart（棒グラフ）
• BubbleChart（バブルチャート）
• PieChart（円グラフ）
• RadarChart（レーダーチャート）
• ScatterChart（散布図）

ライブラリ「MPAndroidChart」 の使用が初めての方は、先に以下の記事をご覧ください。ライブラリ導入までの手順を説明しています。

実装方法

LineChart（線グラフ）

タグ

レイアウト（xml）に以下のタグを追加します。

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

実行結果

ソースコード

以下のような処理を追加します。
アプリ起動時に表示する場合は、onCreate内に追加します。

• Entryにデータを入れる
  データごとにListで定義します。示している例では2つのデータを表示するため、value1、value2という2つのEntryを定義しています。Entryでは、x軸・y軸を指定します。
• DataSetにEntryを入れる
  Entryをcahrtコンポーネントに設定するための形式に変換します。同時にデータごとに色を変えています。
• chartコンポーネントにセットする
  2つのデータを表示するためListにしていますが、1つの場合はListにせずそのまま設定しても良いです。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

    //chartのコンポーネントを取得
    val chart: LineChart = findViewById(R.id.line_chart);

    //グラフのデータを設定
    val value1: ArrayList<Entry> = ArrayList()
    value1.add(Entry(0F, 100F))
    value1.add(Entry(1F, 150F))
    value1.add(Entry(2F, 120F))

    val value2: ArrayList<Entry> = ArrayList()
    value2.add(Entry(0F, 50F))
    value2.add(Entry(1F, 300F))
    value2.add(Entry(2F, 250F))

    //chartに設定
    val dataSet1 = LineDataSet(value1, "sample1")
    dataSet1.color = Color.RED
    val dataSet2 = LineDataSet(value2, "sample2")
    dataSet2.color = Color.BLUE

    val dataSets: MutableList<ILineDataSet> = ArrayList()
    dataSets.add(dataSet1)
    dataSets.add(dataSet2)

    chart.data = LineData(dataSets)
    chart.invalidate() // refresh
}

BarChart（棒グラフ）

タグ

レイアウト（xml）に以下のタグを追加します。

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/bar_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

実行結果

ソースコード

LineChartとほとんど変わりないので、細かい説明は省きます。違いは、BarEntryやBarDataSetなどのようにBarChart（棒グラフ）用の定義に変わってるところです。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

    //chartのコンポーネントを取得
    val chart: BarChart = findViewById(R.id.bar_chart);

    //グラフのデータを設定
    val value1: ArrayList<BarEntry> = ArrayList()
    value1.add(BarEntry(0F, 100F))
    value1.add(BarEntry(1F, 150F))
    value1.add(BarEntry(2F, 200F))

    val value2: ArrayList<BarEntry> = ArrayList()
    value2.add(BarEntry(0F, 50F))
    value2.add(BarEntry(1F, 100F))
    value2.add(BarEntry(2F, 150F))

    //chartに設定
    val dataSet1 = BarDataSet(value1, "sample1")
    dataSet1.color = Color.RED
    val dataSet2 = BarDataSet(value2, "sample2")
    dataSet2.color = Color.BLUE

    val dataSets: MutableList<IBarDataSet> = ArrayList()
    dataSets.add(dataSet1)
    dataSets.add(dataSet2)

    chart.data = BarData(dataSets)
    chart.invalidate() // refresh
}

BubbleChart（バブルチャート）

タグ

レイアウト（xml）に以下のタグを追加します。

<com.github.mikephil.charting.charts.BubbleChart
    android:id="@+id/bubble_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

実行結果

ソースコード

これもBubbleChart（バブルチャート）用の定義に置き換わっているだけです。BubbleChartの場合は、x軸・y軸・sizeが必要なので、BubbleEntryの引数で指定しています。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

    //chartのコンポーネントを取得
    val chart: BubbleChart = findViewById(R.id.bubble_chart);

    //グラフのデータを設定
    val value1: ArrayList<BubbleEntry> = ArrayList()
    value1.add(BubbleEntry(0F, 100F, 10F))
    value1.add(BubbleEntry(1F, 150F, 20F))
    value1.add(BubbleEntry(2F, 200F, 30F))

    val value2: ArrayList<BubbleEntry> = ArrayList()
    value2.add(BubbleEntry(0F, 50F, 10F))
    value2.add(BubbleEntry(1F, 100F, 20F))
    value2.add(BubbleEntry(2F, 150F, 30F))

    //chartに設定
    val dataSet1 = BubbleDataSet(value1, "sample1")
    dataSet1.color = Color.RED
    val dataSet2 = BubbleDataSet(value2, "sample2")
    dataSet2.color = Color.BLUE

    val dataSets: MutableList<IBubbleDataSet> = ArrayList()
    dataSets.add(dataSet1)
    dataSets.add(dataSet2)

    chart.data = BubbleData(dataSets)
    chart.invalidate() // refresh
}

PieChart（円グラフ）

タグ

レイアウト（xml）に以下のタグを追加します。

<com.github.mikephil.charting.charts.PieChart
    android:id="@+id/pie_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

実行結果

ソースコード

PieChart（円グラフ） は1つのグラフにデータを設定していきますので、PieEntryの定義は1つだけです。同じグラフ内で色を変えないといけないので、Listで色を定義して設定しています。示している例では、RED→BLUEの順なので、項目1は赤、項目2は青で表示されます。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

    //chartのコンポーネントを取得
    val chart: PieChart = findViewById(R.id.pie_chart);

    //グラフのデータを設定
    val value: ArrayList<PieEntry> = ArrayList()
    value.add(PieEntry(1F, "項目1"))
    value.add(PieEntry(1F, "項目2"))

    //表示する色を設定
    val color: ArrayList<Int> = ArrayList()
    color.add(Color.RED)
    color.add(Color.BLUE)

    //chartに設定
    val dataSet = PieDataSet(value, "sample")
    dataSet.colors = color
    chart.data = PieData(dataSet)
    chart.invalidate() // refresh
}

RadarChart（レーダーチャート）

タグ

レイアウト（xml）に以下のタグを追加します。

<com.github.mikephil.charting.charts.RadarChart
    android:id="@+id/radar_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

実行結果

ソースコード

RadarChart（レーダーチャート） は、RadarEntryに設定したデータの数によって形が自動で変わります。示している例では、1つのデータにつき値が3つなので三角形となります。値をさらに1つ追加すると4つになりますので、四角形になります。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

    //chartのコンポーネントを取得
    val chart: RadarChart = findViewById(R.id.radar_chart);

    //グラフのデータを設定
    val value1: ArrayList<RadarEntry> = ArrayList()
    value1.add(RadarEntry(0F))
    value1.add(RadarEntry(1F))
    value1.add(RadarEntry(2F))

    val value2: ArrayList<RadarEntry> = ArrayList()
    value2.add(RadarEntry(3F))
    value2.add(RadarEntry(5F))
    value2.add(RadarEntry(6F))

    //chartに設定
    val dataSet1 = RadarDataSet(value1, "sample1")
    dataSet1.color = Color.RED
    val dataSet2 = RadarDataSet(value2, "sample2")
    dataSet2.color = Color.BLUE

    val dataSets: MutableList<IRadarDataSet> = ArrayList()
    dataSets.add(dataSet1)
    dataSets.add(dataSet2)

    chart.data = RadarData(dataSets)
    chart.invalidate() // refresh
}

ScatterChart（散布図）

タグ

レイアウト（xml）に以下のタグを追加します。

<com.github.mikephil.charting.charts.ScatterChart
    android:id="@+id/scatter_chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

実行結果

ソースコード

ScatterChart（散布図） なので、設定した通りの座標に点が表示されます。

override fun onCreate(savedInstanceState: Bundle?) {
    …省略

   //chartのコンポーネントを取得
   val chart: ScatterChart = findViewById(R.id.scatter_chart);

   //グラフのデータを設定
   val value1: ArrayList<Entry> = ArrayList()
   value1.add(Entry(0F, 100F))
   value1.add(Entry(1F, 200F))
   val value2: ArrayList<Entry> = ArrayList()
   value2.add(Entry(0F, 150F))
   value2.add(Entry(1F, 250F))

   //chartに設定
   val dataSet1 = ScatterDataSet(value1, "sample1")
   dataSet1.color = Color.RED
   val dataSet2 = ScatterDataSet(value2, "sample2")
   dataSet2.color = Color.BLUE

   val dataSets: MutableList<IScatterDataSet> = ArrayList()
   dataSets.add(dataSet1)
   dataSets.add(dataSet2)

   chart.data = ScatterData(dataSets)
   chart.invalidate() // refresh
}

横軸・縦軸の項目名を付ける

以下はx軸に項目名を付ける例です。この処理を追加します。
y軸に設定する場合は、YAxisを使用します。

// x軸の項目名を設定
val quarters = arrayOf("項目1", "項目2", "項目3")
val formatter: ValueFormatter = object : ValueFormatter() {
    override fun getAxisLabel(value: Float, axis: AxisBase): String {
        return quarters[value.toInt()]
    }
}
val xAxis: XAxis = chart.xAxis
xAxis.granularity = 1f
xAxis.valueFormatter = formatter

まとめ

MPAndroidChartで各種グラフを表示する方法を紹介しました。

どのグラフも実装の考え方に大きな違いはありません。

• 画面に〇〇_chartを追加する
• データを定義する
• 定義したデータをchartに設定する形式に変換する
• chartにデータを設定する

もっと詳しく知りたい場合は、githubのドキュメントに書いてあります。