【Kotlin/Android】MPAndroidChartでラベルをカスタマイズする方法!IAxisValueFormatter

【Kotlin/Android】MPAndroidChartでラベルをカスタマイズする方法!IAxisValueFormatter

この記事からわかること

  • Android Studio/KotlinMPAndroidChartを使用したグラフ実装方法
  • ラベル文言カスタマイズする方法
  • ラベルのデザインサイズカラーフォント変更方法
  • AxisValueFormatterの使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

MPAndroidChartでグラフのX軸とY軸に表示されるラベルのカスタマイズ方法をまとめていきます。

【Kotlin/Android】MPAndroidChartでラベルをカスタマイズする方法!IAxisValueFormatter

グラフのX軸のカスタマイズ

X軸(縦側)に配置されるラベルをカスタマイズするにはxAxisからXAxis型を参照して設定していきます。

// ------ X軸------
// x軸のラベルをbottomに表示
lineChart.xAxis.position = XAxis.XAxisPosition.BOTTOM
// X軸最大値
lineChart.xAxis.axisMaximum = 4f
// X軸最小値
lineChart.xAxis.axisMinimum = 0f
// X軸ラベルの表示個数
lineChart.xAxis.labelCount = 5
// X軸左側ラベルの表示個数を強制
lineChart.xAxis.setLabelCount(5, true)
// X軸ラベルを表示(デフォルト)
lineChart.xAxis.isEnabled = true
// X軸ラベルカラー
lineChart.xAxis.textColor = Color.WHITE
// X軸ラベル間隔
lineChart.xAxis.granularity = 1.0f
// X軸ラベルフォント
lineChart.xAxis.typeface = Typeface.DEFAULT_BOLD
// ラベルのテキストサイズを設定
lineChart.xAxis.textSize = 12f

グラフのY軸のカスタマイズ

Y軸(横側)に配置されるラベルは右側と左側があり、それぞれカスタマイズするにはaxisLeftaxisRightからYAxis型を参照して設定していきます。プロパティやメソッドは同じなので右側を操作したい場合はaxisRightに変更するだけです。

// ------ Y軸左側 ------
// Y軸左側最大値
lineChart.axisLeft.axisMaximum = 100f
// Y軸左側最小値
lineChart.axisLeft.axisMinimum = 0f
// Y軸左側ラベルの表示個数
lineChart.axisLeft.labelCount = 10
// Y軸左側ラベルの表示個数を強制
lineChart.axisLeft.setLabelCount(5, true)
// Y軸左側ラベルを表示(デフォルト)
lineChart.axisLeft.isEnabled = true
// Y軸左側ラベルカラー
lineChart.axisLeft.textColor = Color.WHITE
// Y軸左側ラベル間隔
lineChart.axisLeft.granularity = 10.0f
// Y軸左側ラベルフォント
lineChart.axisLeft.typeface = Typeface.DEFAULT_BOLD
// Y軸左側ラベルテキストサイズ
lineChart.axisLeft.textSize = 12f

// ------ Y軸右側 ------
// Y軸右側ラベルを非表示
lineChart.axisRight.isEnabled = false

ラベルの値を自由に変更するには?

グラフのX軸とY軸に配置されるラベルはグラフデータに基づいて自動的に表示されます。しかし例えば横軸を時間などにしたい場合など、任意の値に変更したい場合に対応できるようにMPAndroidChartではValueFormatterクラスが用意されています。

使用方法は簡単でValueFormatterオブジェクトを生成しvalueFormatterプロパティにセットするだけです。ValueFormatterクラスではgetFormattedValueメソッドの実装が必要で、この返り値がラベルに表示される文字列になります。

lineChart.xAxis.valueFormatter = object : ValueFormatter() {
    override fun getFormattedValue(value: Float): String {
        return "${value.toInt()} 日"
    }
}
【Kotlin/Android】MPAndroidChartでラベルをカスタマイズする方法!IAxisValueFormatter

またMPAndroidChartはiOSのDGChartsと同じ開発者であり、基本的な操作やAPIなども比較的同じように実装されているのでラベルの実装も似たような振る舞いになっています。

右下のDescription Labelを非表示にする

デフォルトでグラフの右下にDescription Labelと表示されいますが、これを非表示にするにはdescriptionを操作します。

// 右下のDescription Labelを非表示
lineChart.description.isEnabled = false
// テキストを変更する
lineChart.description.text = "Hello"

最小値と最大値のみにラベルを付与する

グラフのラベルの最小値と最大値のみにラベルを表示したい場合getFormattedValue内でlineChartxAxisからグラフに適応されている最小値と最大値を取得できるのでその値と一致する時のみラベル文字列を返すようにすればOKです。

lineChart.xAxis.valueFormatter = object : ValueFormatter() {
    override fun getFormattedValue(value: Float): String {
        return when (value) {
            lineChart.xAxis.axisMinimum -> "開始"
            lineChart.xAxis.axisMaximum -> "終了"
            else -> super.getFormattedValue(value)
        }
    }
}
【Kotlin/Android】MPAndroidChartでラベルをカスタマイズする方法!IAxisValueFormatter

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index