MPAndroidChartでグラフ表示

とあるAndroid案件でデータを集計してグラフ表示することになりました。 MPAndroidChartという…

とあるAndroid案件でデータを集計してグラフ表示することになりました。

MPAndroidChartというライブラリを使用したのですが、
最新版(v3.0.1)の記事があまりなかったのでまとめてみます
https://github.com/PhilJay/MPAndroidChart
※コードはkotlinです。

準備

compile 'com.github.PhilJay:MPAndroidChart:v3.0.1'

1.棒グラフ

/**
* 棒グラフを作成する
*/
private fun createBarChart() {
/**
* インプットデータ作成
*/
val input = listOf(BarEntry(1f, 50f, "Green"), BarEntry(2f, 20f, "Yellow"), BarEntry(3f, 90f, "Red"), BarEntry(4f, 40f, "Blue"))
val set = BarDataSet(input, "凡例の説明文")
set.colors = ColorTemplate.MATERIAL_COLORS.toList()
set.isHighlightEnabled = true //タップで拡大

val data = BarData(set)

/**
* データの書式
*/
data.setValueFormatter(PercentFormatter()) //フォーマット
data.setValueTextSize(12f) //テキストサイズ
data.setValueTextColor(Color.WHITE) //色
data.isHighlightEnabled = true

bar_chart.data = data

/**
* グラフのUI設定
*/
bar_chart.legend.isEnabled = true //凡例の表示

/**
* 横軸
*/
val xAxis = bar_chart.xAxis
xAxis.position = XAxis.XAxisPosition.BOTTOM

/**
* 縦軸(右)
*/
val rAxis = bar_chart.axisRight
rAxis.isEnabled = false
rAxis.mAxisMaximum = 80f
rAxis.mAxisMinimum = 10f

/**
* 縦軸(左)
*/
val lAxis = bar_chart.axisLeft
lAxis.textColor = Color.MAGENTA

/**
* 説明文
*/
val description = Description()
description.text = "グラフの説明文"
bar_chart.description = description

bar_chart.invalidate()

// アニメーション
bar_chart.animateY(2000, Easing.EasingOption.EaseInBounce)
}

Screenshot_20161129-214424

2.円グラフ

/**
* 円グラフを作成する
*/
private fun createPieChart() {
/**
* インプットデータ作成
*/
val input = listOf(PieEntry(10f, "Green"), PieEntry(20f, "Yellow"), PieEntry(30f, "Red"), PieEntry(10f, "Blue"))
val set = PieDataSet(input, "凡例の説明文")
set.colors = ColorTemplate.MATERIAL_COLORS.toList()
set.isHighlightEnabled = true //タップで拡大

val data = PieData(set)

/**
* データの書式
*/
data.setValueFormatter(PercentFormatter()) //フォーマット
data.setValueTextSize(12f) //テキストサイズ
data.setValueTextColor(Color.WHITE) //色
data.isHighlightEnabled = true

pie_chart.data = data

/**
* グラフのUI設定
*/
pie_chart.isDrawHoleEnabled = true //中心部に穴を開ける
pie_chart.holeRadius = 40f //穴の比率
pie_chart.setHoleColor(Color.LTGRAY) //穴の中の色
pie_chart.transparentCircleRadius = 60f //透過させる半径
pie_chart.isRotationEnabled = false //ドラッグで回転を許可しない
pie_chart.legend.isEnabled = true //凡例の表示

/**
* 説明文
*/
val description = Description()
description.text = "グラフの説明文"
pie_chart.description = description

pie_chart.invalidate()

// 表示アニメーション
pie_chart.animateXY(2000, 2000, Easing.EasingOption.EaseInBack, Easing.EasingOption.EaseInBounce)
}

Screenshot_20161129-214510

適当にアニメーションをつけたため、少し気持ち悪い動きをします

まとめ
DataとDataSetの考え方を理解するのが少し大変でしたが、
Wikiも充実してるため、やりたいことは大概できそうです。
https://github.com/PhilJay/MPAndroidChart/wiki
iOSに移植されたライブラリもあるようなので、マルチデバイスでグラフを表示する際にはぜひ導入してみてください