MPAndroidChart 라이브러리를 활용한 BarChart 그리기

Intro

이번 주에 개발을 하다가 그래프를 그려야 하는 상황에 있어 구글링을 해 보았는데 관련 라이브러리들 중 가장 대표적인 것이 MPAndroidChart 라이브러리였다.

MPAndroidChart를 사용하기 위해 이곳 저곳 포스팅을 돌아다니며 얻은 지식들을 정리해보고자 한다.

이번 포스팅에서는 MPAndroidChart의 다양한 그래프 중에서도 BarChart에 대해 알게 된 내용들을 정리하고자 한다.

다른 차트에 대한 사용 및 라이브러리 관련 글은 아래 링크를 참조하시면 됩니다.

https://github.com/PhilJay/MPAndroidChart

PhilJay/MPAndroidChart

gradle

implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

가장 먼저 module 수준의 gradle의 dependency로 위 라이브러리를 추가하고 Sync Now 를 해준다.

layout

사용할 차트가 위치할 영역에 레이아웃을 추가해준다.

<com.github.mikephil.charting.charts.BarChart
                android:id="@+id/chart"
                android:layout_width="match_parent"
                android:layout_height="240dp"
                android:layout_marginStart="16dp"
                android:layout_marginTop="16dp"
                android:layout_marginEnd="16dp"
                android:layout_marginBottom="16dp"/>

kotlin

해당 차트에 정보를 넣기 위해 데이터들을 만들어주자.

 val entries = ArrayList<BarEntry>()
        entries.add(BarEntry(1.2f,20.0f))
        entries.add(BarEntry(2.2f,70.0f))
        entries.add(BarEntry(3.2f,30.0f))
        entries.add(BarEntry(4.2f,90.0f))
        entries.add(BarEntry(5.2f,70.0f))
        entries.add(BarEntry(6.2f,30.0f))
        entries.add(BarEntry(7.2f,90.0f))

entries.add(BarEntry(1.2f,20.0f))만 놓고 보자면
BarEntry(1.2f라는 좌표에, 20.0f만큼의 그래프 영역을 그린다)

일단 잘 표시되는지 확인해보기 위해 BarEntry의 값들을 고정값으로 넣어주었다.

이제 차트를 셋팅해보자

이것저것 건드려보며 주석으로 정리해보았다.

chart.run {
            description.isEnabled = false //차트 옆에 별도로 표기되는 description이다. false로 설정하여 안보이게 했다.
            setMaxVisibleValueCount(7) // 최대 보이는 그래프 개수를 7개로 정해주었다.
            setPinchZoom(false) // 핀치줌(두손가락으로 줌인 줌 아웃하는것) 설정
            setDrawBarShadow(false)//그래프의 그림자
            setDrawGridBackground(false)//격자구조 넣을건지
            axisLeft.run { //왼쪽 축. 즉 Y방향 축을 뜻한다.
                axisMaximum = 101f //100 위치에 선을 그리기 위해 101f로 맥시멈을 정해주었다
                axisMinimum = 0f // 최소값 0
                granularity = 50f // 50 단위마다 선을 그리려고 granularity 설정 해 주었다.
                //위 설정이 20f였다면 총 5개의 선이 그려졌을 것
                setDrawLabels(true) // 값 적는거 허용 (0, 50, 100)
                setDrawGridLines(true) //격자 라인 활용
                setDrawAxisLine(false) // 축 그리기 설정
                axisLineColor = ContextCompat.getColor(context,R.color.colorAxis) // 축 색깔 설정
                gridColor = ContextCompat.getColor(context,R.color.colorAxis) // 축 아닌 격자 색깔 설정
                textColor = ContextCompat.getColor(context,R.color.colorSemi50Black) // 라벨 텍스트 컬러 설정
                textSize = 14f //라벨 텍스트 크기
            }
            xAxis.run {
                position = XAxis.XAxisPosition.BOTTOM//X축을 아래에다가 둔다.
                granularity = 1f // 1 단위만큼 간격 두기
                setDrawAxisLine(true) // 축 그림
                setDrawGridLines(false) // 격자
                textColor = ContextCompat.getColor(context,R.color.colorSemi70Black) //라벨 색상
                valueFormatter = MyXAxisFormatter() // 축 라벨 값 바꿔주기 위함
                textSize = 14f // 텍스트 크기
            }
            axisRight.isEnabled = false // 오른쪽 Y축을 안보이게 해줌.
            setTouchEnabled(false) // 그래프 터치해도 아무 변화없게 막음
            animateY(1000) // 밑에서부터 올라오는 애니매이션 적용
            legend.isEnabled = false //차트 범례 설정

        }

데이터셋 추가 및 차트 띄우기

이것도 주석으로 간단한 설명을 보탰다.

        var set = BarDataSet(entries,"DataSet")//데이터셋 초기화 하기
        set.color = ContextCompat.getColor(context!!,R.color.colorChartRed)

        val dataSet :ArrayList<IBarDataSet> = ArrayList()
        dataSet.add(set)
        val data = BarData(dataSet)
        data.barWidth = 0.3f//막대 너비 설정하기
        chart.run {
            this.data = data //차트의 데이터를 data로 설정해줌.
            setFitBars(true)
            invalidate()
        }

위에서 언급한 valueFormatter를 inner class로 등록해주자.

inner class MyXAxisFormatter : ValueFormatter(){
        private val days = arrayOf("1차","2차","3차","4차","5차","6차","7차")
        override fun getAxisLabel(value: Float, axis: AxisBase?): String {
            return days.getOrNull(value.toInt()-1) ?: value.toString()
        }
    }

해당 내용들을 응용해서 차트 안에 서로 다른 2개의 데이터 셋에 대해 표시되도록 구현을 해보았다.

 

위를 응용하여 차트를 완성한 화면