태그 보관물: 바차트

MPAndroidChart 를 사용한 바차트 출력

댓글 남기기

개요

앱에 차트를 출력해야 하는 경우가 있습니다. 직접 이미지 형태로 만들수도 있지만 그것자체가 상당한 노력과 시간이 소요됩니다. MPAndroidChart 라이브러리를 이용하면 다양한 차트를 손쉽게 출력할 수 있습니다. 이 글에서는 바차트에 한정해서 기본적으로 출력하는 방법과 몇가지 속성을 조정하는 방법을 알아보도록 하겠습니다. 버전은 3.1.0, 언어는 Kotlin 을 기준으로 합니다.

기능

위 링크에 접속해보면 샘플앱을 내려받을 수 있고 다양한 예제 코드를 살펴볼 수 있습니다. 일반적으로 사용하는 모든 차트 유형이 있다고 생각하시면 됩니다. 본인의 자료 형태에 맞는 유형을 선택해서 사용하면 됩니다. 샘플코드의 경우 최소한의 코드라서 원하는 형태로 출력하려면 여러가지 속성을 추가하고 조정해야 합니다.

바차트

바차트는 막대그래프라고 하는 형태인데 이 글에서는 가상의 월별 사용량을 출력하는 것을 알아보도록 하겠습니다. 실제 자료를 DB나 다른쪽에서 받아오는 부분은 이미 구현되어 있다고 가정하겠습니다. 다음과 같은 바차트를 출력해 보도록 하겠습니다.

바차트

차트 자료 연결

차트에 출력할 자료의 형태가 다음과 같다고 가정하겠습니다.

2020-113
2020-1212

layout 은 다음과 같습니다.

<com.github.mikephil.charting.charts.BarChart
    android:id="@+id/barChart"
    android:layout_width="match_parent"
    android:layout_height="0dp" />

여기에서 주의하실 사항은 실제 출력할 차트와 자료형을 일치 시켜야 한다는 것 입니다. com.github.mikephil.charting.charts.BarChart로 정의하고 LineChart 자료 유형을 연결하면 오류가 발생합니다. 즉, 차트의 유형과 자료로 사용할 형태가 다르면 안됩니다.

data class Chart(
    var label : String = ""
    , var countValue : Int = 0
)

val chartValue: ArrayList<BarEntry> = ArrayList()
val xAxisLabel: ArrayList<String> = ArrayList()

chartDataList?.forEachIndexed { index, item ->
    val barEntry = BarEntry(index.toFloat(), item.countValue.toFloat())
    chartValue.add(index, barEntry)
    xAxisLabel.add(item.label)
}

val barDataSet = BarDataSet(chartValue, "")
val barData = BarData(barDataSet)
barChart.data = barData

1-4 행은 Chart 클래스 정의 입니다. chartDataList 는 Chart 클래스의 MutableList 입니다(MutableList<Chart>).

6, 7행은 자료값과 출력할 레이블을 추가할 ArrayList 입니다.

9-13행은 반복하며 차트에 사용할 자료의 형태에 맞추어 추가하는 코드입니다.

차트 속성 변경

위의 코드만 가지고도 차트는 출력됩니다. 그러나 다음과 같은 문제가 있습니다.

  1. 하단 레이블이 원하는 형태가 아님
  2. 바 위쪽 숫자가 소수점으로 표시. 글자 크기가 작음
  3. 바의 색상이 모두 동일
  4. 차트의 범례와 설명이 나타남

다음과 같이 속성을 추가, 변경해서 목표로 한 형태의 차트를 만듭니다.

val colors = intArrayOf(
    Color.GREEN,
    Color.YELLOW,
    Color.GREEN,
    Color.BLUE,
    Color.GRAY,
    Color.BLACK
)

barDataSet.setColors(colors, 150)

위 코드는 바의 색상을 지정한 것입니다. setColors 메소드의 두번째 인수는 alpha 값(투명도)인데 0 이면 투명하게 보여 아무것도 출력되지 않은 것처럼 보입니다.

val valueFormatter: ValueFormatter = object : ValueFormatter() {
     override fun getFormattedValue(value: Float): String {
         return "" + value.toInt()
     }
 }

barDataSet.valueFormatter = valueFormatter
barDataSet.valueTextSize = 10.0f

barChart.legend.isEnabled = false;
barChart.description.isEnabled = false;

위의 코드는 출력할 값의 포맷을 지정해서 원하는 형태로 나타나도록 합니다(7행). 이 글에서는 단순히 정수로만 변환했습니다. 예를 들어 금액인 경우 원화 또는 달러 표시를 붙여 출력할 수도 있습니다. 그리고 글자의 크기를 적절하게 조정했습니다. 마지막에는 범례를 없애고 설명도 나타나지 않게 했습니다.

이 글에서는 MPAndroidChart 를 사용한 바차트 출력과 속성조정에 대해 알아 보았습니다. 다른 속성에 대한 것은 자료를 찾아 조정해 보시면 금방 원하시는 형태의 차트로 출력하실 수 있을겁니다.