[Kotlin][Android] 그래프 만들기

이번 예제는 MPAndroidChart 라이브러리를 사용해서 그래프를 만들어보겠습니다.

 

MPAndroidChart 란?

안드로이드 차트 기능을 제공하는 라이브러리 입니다.

 

[참고]

github.com/PhilJay/MPAndroidChart

---

라이브러리 추가

 

먼저, build.gradle 파일 안에 Glide라는 라이브러리를 사용하기 위해 아래 화면처럼

추가해주시고 위에 Sync Now 버튼을 누르시면 라이브러리가 적용됩니다.

 

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

 

위에 코드만 추가하고 실행할 경우 아래 사진과 같은 에러가 발생합니다.

이 에러는 아래 코드를 추가하면 해결이 됩니다.

 

 

첫번쨰 gradle 파일에 아래 화면처럼 maven 값을 추가해주시고 위에 Sync Now 버튼을 누르시면 에러가 해결됩니다.

 

 

 

maven { url = uri("https://jitpack.io") }

 

---

다음 예제에 사용할 화면을 만들어보겠습니다.

 

<activity_main.xml>

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:id="@+id/barChart"
        android:layout_height="400dp"
        android:layout_width="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

 

---

다음 예제에 사용할 코드를 작성하겠습니다.

 

1. 차트 샘플 데이터 생성

스틱코드를 활용한다면, 클래스에서 'chc' 까지만 작성했을 때 '차트 샘플 데이터 생성' 이벤트가 나타납니다.

 

 

'차트 샘플 데이터 생성' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

 

 

2. 차트 UI 생성

스틱코드를 활용한다면, 클래스에서 'chu' 까지만 작성했을 때 '차트 UI 생성 생성' 이벤트가 나타납니다.

 

 

'차트 UI 생성 생성' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

아래 에러가 나는 부분은 그래프 밑 글자 설정하는 부분이며 다음 코드를 추가하면 해결됩니다.

 

 

스틱코드를 활용한다면, 클래스에서 'chl' 까지만 작성했을 때 '차트 밑에 표시되는 글자 설정' 이벤트가 나타납니다.

 

 

'차트 밑에 표시되는 글자 설정' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

 

 

3. 차트 UI 출력

스틱코드를 활용한다면, 클래스에서 'chp' 까지만 작성했을 때 '데이터셋 추가 및 그래프 UI 출력' 이벤트가 나타납니다.

 

 

'데이터셋 추가 및 그래프 UI 출력' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

 

 

<최종코드>

import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet
import com.github.mikephil.charting.components.AxisBase
import com.github.mikephil.charting.formatter.ValueFormatter
import com.github.mikephil.charting.components.XAxis
import androidx.core.content.ContextCompat
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.data.BarEntry
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        var barChart: BarChart = findViewById(R.id.barChart) // barChart 생성

        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))

        barChart.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 단위마다 선을 그리려고 설정.
                setDrawLabels(true) // 값 적는거 허용 (0, 50, 100)
                setDrawGridLines(true) //격자 라인 활용
                setDrawAxisLine(false) // 축 그리기 설정
                axisLineColor = ContextCompat.getColor(context,R.color.design_default_color_secondary_variant) // 축 색깔 설정
                gridColor = ContextCompat.getColor(context,R.color.design_default_color_on_secondary) // 축 아닌 격자 색깔 설정
                textColor = ContextCompat.getColor(context,R.color.design_default_color_primary_dark) // 라벨 텍스트 컬러 설정
                textSize = 13f //라벨 텍스트 크기
            }
            xAxis.run {
                position = XAxis.XAxisPosition.BOTTOM //X축을 아래에다가 둔다.
                granularity = 1f // 1 단위만큼 간격 두기
                setDrawAxisLine(true) // 축 그림
                setDrawGridLines(false) // 격자
                textColor = ContextCompat.getColor(context,R.color.design_default_color_primary_dark) //라벨 색상
                textSize = 12f // 텍스트 크기
                valueFormatter = MyXAxisFormatter() // X축 라벨값(밑에 표시되는 글자) 바꿔주기 위해 설정
            }
            axisRight.isEnabled = false // 오른쪽 Y축을 안보이게 해줌.
            setTouchEnabled(false) // 그래프 터치해도 아무 변화없게 막음
            animateY(1000) // 밑에서부터 올라오는 애니매이션 적용
            legend.isEnabled = false //차트 범례 설정
        }

        var set = BarDataSet(entries,"DataSet") // 데이터셋 초기화
            set.color = ContextCompat.getColor(applicationContext!!,R.color.design_default_color_primary_dark) // 바 그래프 색 설정

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

    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()
        }
    }
}

---

프로젝트를 실행하면 아래 사진같이 그래프가 나오는것을 확인할 수 있습니다.

 

 

 

[스틱코드 참고]

[Kotlin][Android] 그래프 만들기 - stickode.com/detail.html?no=2145