안드로이드 스튜디오 그래프 구현 - MPAndroidChart

1. 라이브러리 가져오기

아래 라이브러리를 사용할 것이다.

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

build.gradle(project)

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

build.gradle(app)

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

 

2. 레이아웃 구성하기

수평 그래프를 사용할 것이므로 HorizontalBarChart를 사용했다.
수직 그래프를 사용하고 싶으면 앞에 Horizontal을 빼면 된다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.github.mikephil.charting.charts.HorizontalBarChart
        android:id="@+id/barChart"
        android:layout_width="250dp"
        android:layout_height="270dp"/>
</LinearLayout>

 

3. 그래프 구성하기

lateinit var barData : BarData

val values = mutableListOf<BarEntry>() //(인덱스, 값)
val percent = ArrayList<Float>() // 값
percent.add(100f)
percent.add(40f)
percent.add(30.5f)
percent.add(20f)
percent.add(10f)
percent.add(20f)
percent.add(20f)

for (i in 0..6) {
    val index = i.toFloat()
    values.add(BarEntry(index, percent[i]))
}

 
index는 x값, percent는 y값이다.
percent는 임의의 값을 대입하였고 x는 0 .. 6을 대입하였다.
 
 

val set = BarDataSet(values, "방문 비율")         // 차트 데이터 리스트 삽입
    .apply {
        color = Color.parseColor("#4C00C4") // 그래프 색상 지정
        setDrawValues(true) // 그래프 값 표시
        valueTextColor = Color.BLACK
        valueTextSize = 10f
    }

차트에 데이터 리스트를 삽입하는 코드이다.
첫번째 인자에는  (인덱스, 값)의 리스트, 두 번째 인자에는 범례로 표시할 글자를 대입한다.
그래프 색은 단일색으로 지정했다. 그래프 값을 표시하고 글자 색상과 크기를 정했다.
 

barData = BarData(set)
    .apply {
        barWidth = 0.6f // 막대 너비
        setValueFormatter(PercentFormatter()) // '%' 붙이기
    }

막대 그래프 너비를 지정하였다.
PercentFormatter()를 사용해 값 뒤에 %가 붙도록 했다.
 

val barChart: BarChart = binding.barChart // 차트 선언
barChart.data = barData

레이아웃의 barChart와 연결해 주고 데이터를 대입한다.
 

barChart.run {
    setTouchEnabled(false) // 터치 금지
    setDrawBarShadow(true) // 그래프 그림자
//            setVisibleXRange(0f,4f) // x좌표 기준 보여줄 그래프 개수 조정

    description.isEnabled = false // description label 비활성화
    legend.isEnabled = false // 범례 비활성화
    extraRightOffset = 40f; // 수치값 잘리지 않도록 오른쪽에 공간 부여
}

bar shadow로 그래프에 그림자를 부여해 퍼센트가 얼마나 찼는지 보여주었다.
값의 수치값을 표시할 때 100%이면 공간이 부족해 잘리는 현상이 발생했다.
이를 막기 위해 extraRightOffset으로 오른쪽에 공간을 부여했다.
setVisibleXRange(0f, 3f)는 지정한 x범위만큼 그래프를 보여주는데, 여기서는 4개를 보여준다.
 
 
위의 과정까지 마무리하면 그래프가 이렇게 나온다.

barChart.run{
	xAxis.run { // x 축
        isEnabled = true // x축 값 표시
        textColor = Color.parseColor("#4C00C4") //라벨 색깔
        position = XAxis.XAxisPosition.BOTTOM // 라벨 위치
        setDrawGridLines(false) // 격자구조
        setDrawAxisLine(false)
    }
}

isEnabled = false로 하면 x축 값이 표시되지 않는다.
position을 Bottom으로 해 x축 아래에 x축 값이 표시되도록 했다.
setDrawAxisLine(true)로 하면 범위마다 x축 선이 표시된다.
 

barChart.run{
    axisLeft.run { // 왼쪽 y축
        isEnabled = true
        axisMinimum = 0f // this replaces setStartAtZero(true)
        axisMaximum = 100f

    }
    axisRight.run { //오른쪽 y축
        isEnabled = true // y축 오른쪽 값 표시
        axisMinimum = 0f
        axisMaximum = 100f
    }
}

왼쪽 y축과 오른쪽 y축의 범위를 각각 지정하였다.
isEnabled = false로 지정하면 y축 범위 값과 범위 선이 사라진다.
 
 

라벨 부여하기

x축에 0~6 값 대신 라벨을 붙일 것이다.

val type = ArrayList<String>()
type.add("친구와")
type.add("연인과")
type.add("동생과")
type.add("가족과")
type.add("반려동물과")
type.add("아이와")
type.add("혼자")


valueFormatter = IndexAxisValueFormatter(type) // 동행자 라벨 붙이기

 
깔끔하게 그래프를 커스텀하고 싶어서 y축이 안 보이도록 설정했다.

axisLeft.run 
{ // 왼쪽 y축
    isEnabled = false
    axisMinimum = 0f // this replaces setStartAtZero(true)
    axisMaximum = 100f

}
axisRight.run { //오른쪽 y축
    isEnabled = false // y축 오른쪽 값 표시
    axisMinimum = 0f
    axisMaximum = 100f
}

 
아래의 결과물이 나온다.

 
 

느낀점

처음에는 기본 차트 구현도 어려웠다.
유튜브로 따라하고, 스스로 다양한 코드를 추가하고 주석 처리하며 기능을 익혔다.
만든 분의 깃허브를 바로 참조하는 것보단, 유튜브로 기본 그래프를 구현해보는 걸 추천한다.
 

참고한 사이트

https://class-programming.tistory.com/121
https://www.youtube.com/watch?v=rihr_oBj5mA&ab_channel=GameAppStudio