【Kotlin/Android】MPAndroidChartでグラフを実装する方法!

この記事からわかること
- Android Studio/KotlinでMPAndroidChartを使用したグラフの実装方法
- 棒グラフや折れ線グラフの実装方法
- 機能やデザインを設定するには?
- ポインタをアイコンに変更するには?
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
MPAndroidChartとは?
MPAndroidChartはAndroidアプリで簡単に折れ線グラフや円グラフ、棒グラフなどの図を実装することのできるライブラリです。MPAndroidChart自体はJavaで開発されているようですが、Kotlinと互換性があるのでどちらの言語でも問題なく機能を利用することが可能です。
またMPAndroidChart
はiOSのDGCharts
と同じ開発者であり、基本的な操作やAPIなども比較的同じように実装されているようでした。
導入方法
Android StudioでMPAndroidChartを使用するためには「settings.gradle」に maven { url 'https://jitpack.io' }
を追加します。
続いて「build.grade(Module)」にimplementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
を追加します。。
折れ線グラフの実装方法
MPAndroidChartを使用して折れ線グラフを実装してみます。どのグラフでも基本的に以下の流れでグラフを作成していきます。
MPAndroidChartでグラフを実装する流れ
- レイアウトファイルにViewを追加
- 元データの準備
- 元データをEntry型に変換したリストを準備
- グラフ線やポインタなどの機能、デザインなどを設定
- ラベルやグラフなどの機能、デザインなどを設定
- グラフのデータに格納
まずはレイアウトファイルにViewを追加します。折れ線グラフであればcom.github.mikephil.charting.charts.LineChart
になります。
続いてグラフに表示させるためのデータをFloat
型で用意し、X軸とY軸に表示させる値を定義するEntry
型の配列を作成し、LineChart
のdata
プロパティに設定すればグラフが表示されるようになります。

グラフのデザインを変更する

グラフのデザインを変更するにはLineDataSet
のプロパティを操作します。
グラフ自体の機能を設定する
デフォルトではグラフの点をタップするとフォーカスが写ったり、ピンチやダブルタップでズームできるようになっています。これらを無効にするにはLineChart
のプロパティを操作します。
他にもデータ数が多い場合に一部分だけを最初にズームした状態にするためのsetVisibleXRangeMaximum
などがあります。※印がついている設定はlineChart.data
プロパティにデータを格納した後でないと動作しないので注意してください。
またanimateプロパティを設定することでグラフ描画時にアニメーションがついて描画されます。
ラベルのカスタマイズ
グラフに表示しているラベルをカスタマイズするにはLineChart
のプロパティを操作します。
データのポインタを画像(Image)にする
データのポインタを画像(Image)に変更するにはEntry(float x, float y, Drawable icon)
を使用します。

明示的にアイコン表示しないようにするにはsetDrawIcons
にfalse
を指定します。
一度に表示するデータ数が多い場合は非表示になってしまうのでsetMaxVisibleValueCount
で明示的に表示させたい個数を指定することができます。デフォルト値は100
です。
自分で用意した画像を使用する際は大きさを変更しないとグラフのポインタのサイズを大幅にズレてしまうので画像をリサイズして使用します。
タップした際にデータを取得する
表示されているグラフでタップした箇所のデータを取得するにはsetOnChartGestureListener
メソッドにOnChartGestureListener
型のオブジェクトを渡し各メソッドからタップなどのジェスチャーでMotionEvent型で情報を取得することが可能になります。
グラフをリセットする
グラフに表示しているデータをリセットしたい場合はclearValues
メソッドとclear
メソッドを使用します。これでグラフの設定も初期化されnotifyDataSetChanged
でデータの変更をUIへと反映させinvalidate
で再描画をさせています。
実際に使用して開発したアプリのソースコードを公開中
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。