Kotlin으로 MP Android Chart를 사용한 간단한 차트 만들기

요약


과거 간단한 막대 그림을 만들었던 Kotlin화.
apply를 사용함으로써 조금은 이해하기 쉬워진 것 같습니다.
Java로 쓴 건 이전 기사 참조해주세요.
P Android Chart로 간단한 막대 그림 만들기

축소, 하이라이트, 스크롤을 확대하지 않는 디스플레이 도표를 만들고 싶습니다.

한 일


기본적으로 자바 때와 같다.
·project level build.gradle
build.gradle
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

・your app build.gradle
build.gradle
dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.0.3'
}
• 자원 파일에 BarChart 추가
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/bar_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

• 그래프의 색상은 colors입니다.xml에 추가
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="material_blue">#64b5f6</color>
    <color name="material_green">#81c784</color>
    <color name="material_yellow">#fff176</color>
</resources>
차트 표시 설정
mainActivity.kt
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val chart = bar_chart
        //表示データ取得
        chart.data = BarData(getBarData())

        //Y軸(左)の設定
        chart.axisLeft.apply {
            axisMinimum = 0f
            axisMaximum = 100f
            labelCount = 5
            setDrawTopYLabelEntry(true)
            setValueFormatter { value, axis -> "" + value.toInt()}
        }

        //Y軸(右)の設定
        chart.axisRight.apply {
            setDrawLabels(false)
            setDrawGridLines(false)
            setDrawZeroLine(false)
            setDrawTopYLabelEntry(true)
        }

        //X軸の設定
        val labels = arrayOf("","国語","数学","英語") //最初の””は原点の値
        chart.xAxis.apply {
            valueFormatter = IndexAxisValueFormatter(labels)
            labelCount = 3 //表示させるラベル数
            position = XAxis.XAxisPosition.BOTTOM
            setDrawLabels(true)
            setDrawGridLines(false)
            setDrawAxisLine(true)
        }

        //グラフ上の表示
        chart.apply {
            setDrawValueAboveBar(true)
            description.isEnabled = false
            isClickable = false
            legend.isEnabled = false //凡例
            setScaleEnabled(false)
            animateY(1200, Easing.EasingOption.Linear)
        }
    }

    private fun getBarData(): ArrayList<IBarDataSet> {
        //表示させるデータ
        val entries = ArrayList<BarEntry>().apply {
            add(BarEntry(1f, 60f))
            add(BarEntry(2f, 80f))
            add(BarEntry(3f, 70f))
        }

        val dataSet = BarDataSet(entries, "bar").apply {
            //整数で表示
            valueFormatter = IValueFormatter { value, _, _, _ -> "" + value.toInt() }
            //ハイライトさせない
            isHighlightEnabled = false
            //Barの色をセット
            setColors(intArrayOf(R.color.material_blue, R.color.material_green, R.color.material_yellow), this@MainActivity)
        }

        val bars = ArrayList<IBarDataSet>()
        bars.add(dataSet)
        return bars
    }
}

좋은 웹페이지 즐겨찾기