[Android] MPAndroidChart 라이브러리 사용하여 막대차트 그리기

https://github.com/PhilJay/MPAndroidChart

GitHub - PhilJay/MPAndroidChart: A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubb

A powerful 🚀 Android chart view / graph view library, supporting line- bar- pie- radar- bubble- and candlestick charts as well as scaling, panning and animations. - GitHub - PhilJay/MPAndroidChart:...

github.com

MPAndroidChart 를 사용하면 안드로이드에서 차트를 쉽게 표현할 수 있다.

라이브러리 페이지에 가보면 사용법이 자세히 명시되어 있지만 한 눈에 보기 힘들어

가볍게 정리해보려고 한다.

1️⃣ 사용해보기

Dependency 추가

build.gradle(Module)

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

settings.gradle

dependencyResolutionManagement {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

추가해준다.

layout

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <com.github.mikephil.charting.charts.BarChart
            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_margin="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

예시로 막대차트를 사용할 것이다.

차트 설정

// 바 차트 설정
private fun initBarChart(barChart: BarChart) {
    // 차트 회색 배경 설정 (default = false)
    barChart.setDrawGridBackground(false)
    // 막대 그림자 설정 (default = false)
    barChart.setDrawBarShadow(false)
    // 차트 테두리 설정 (default = false)
    barChart.setDrawBorders(false)

    val description = Description()
    // 오른쪽 하단 모서리 설명 레이블 텍스트 표시 (default = false)
    description.isEnabled = false
    barChart.description = description

    // X, Y 바의 애니메이션 효과
    barChart.animateY(1000)
    barChart.animateX(1000)

    // 바텀 좌표 값
    val xAxis: XAxis = barChart.xAxis
    // x축 위치 설정
    xAxis.position = XAxis.XAxisPosition.BOTTOM
    // 그리드 선 수평 거리 설정
    xAxis.granularity = 1f
    // x축 텍스트 컬러 설정
    xAxis.textColor = Color.RED
    // x축 선 설정 (default = true)
    xAxis.setDrawAxisLine(false)
    // 격자선 설정 (default = true)
    xAxis.setDrawGridLines(false)

    val leftAxis: YAxis = barChart.axisLeft
    // 좌측 선 설정 (default = true)
    leftAxis.setDrawAxisLine(false)
    // 좌측 텍스트 컬러 설정
    leftAxis.textColor = Color.BLUE

    val rightAxis: YAxis = barChart.axisRight
    // 우측 선 설정 (default = true)
    rightAxis.setDrawAxisLine(false)
    // 우측 텍스트 컬러 설정
    rightAxis.textColor = Color.GREEN

    // 바차트의 타이틀
    val legend: Legend = barChart.legend
    // 범례 모양 설정 (default = 정사각형)
    legend.form = Legend.LegendForm.LINE
    // 타이틀 텍스트 사이즈 설정
    legend.textSize = 20f
    // 타이틀 텍스트 컬러 설정
    legend.textColor = Color.BLACK
    // 범례 위치 설정
    legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
    legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER
    // 범례 방향 설정
    legend.orientation = Legend.LegendOrientation.HORIZONTAL
    // 차트 내부 범례 위치하게 함 (default = false)
    legend.setDrawInside(false)
}

차트를 사용하기 위해서는 우선적으로 각종 속성에 대해 설정해주어야 한다.

주석으로 정리해놓았다.

차트 데이터 설정

// 차트 데이터 설정
    private fun setData(barChart: BarChart) {

        // Zoom In / Out 가능 여부 설정
        barChart.setScaleEnabled(false)

        val valueList = ArrayList<BarEntry>()
        val title = "걸음 수"

        // 임의 데이터
        for (i in 0 until 5) {
            valueList.add(BarEntry(i.toFloat(), i * 100f))
        }

        val barDataSet = BarDataSet(valueList, title)
        // 바 색상 설정 (ColorTemplate.LIBERTY_COLORS)
        barDataSet.setColors(
            Color.rgb(207, 248, 246), Color.rgb(148, 212, 212), Color.rgb(136, 180, 187),
            Color.rgb(118, 174, 175), Color.rgb(42, 109, 130))

        val data = BarData(barDataSet)
        barChart.data = data
        barChart.invalidate()
    }

차트 설정이 끝나면 원하는 데이터를 넣어준다.

setColors를 통해 색상도 임의 변경할 수 있다.