[안드로이드 스튜디오 코틀린] MPAndroidChart - Radar Chart 사용하기

 

 

안드로이드 차트 만드는 유명한 라이브러리인

 

https://github.com/PhilJay/MPAndroidChart

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

 

 

MPChart에서 Radar Chart 사용하는 예제입니다.

 

 

 

 

이렇게 두 개의 데이터가 있는 Radar Chart를 만들어보겠습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. settings.gradle.kt 에 아래 코드 추가

 

 

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

 

 

(settinsg.gradle.kts 파일이라면 아래처럼 추가해주세요)

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. build.gradle.kt

 

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

 

(build.gradle.kts 라면 아래처럼 추가)

implementation ("com.github.PhilJay:MPAndroidChart:v3.1.0")

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. activity_main.xml 에 chart UI를 만들어줍니다

 

 

<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.RadarChart
        android:id="@+id/radarChart"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

위처럼 만들어줍니다. 어차피 실행 전 까지 UI를 미리 볼 수 없어서 대략적인 크기만 잡아줍니다.

 

 

 

 

 

 

 

이렇게 아무 것도 안보임

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. MainActivity.kt

 

제일 중요한 차트 설정과 데이터를 넣어주는 부분입니다.

 

 

private fun setRadarChart() {
    binding.radarChart.apply {
        // 차트 설정
        description.isEnabled = false
        webColor = Color.GRAY
        webColorInner = Color.GRAY
        legend.isEnabled = false
        setTouchEnabled(false)

        // x축 설정
        val labels = arrayOf("사과", "딸기", "바나나", "키위", "체리", "수박", "자두", "귤")
        xAxis.valueFormatter = IndexAxisValueFormatter(labels)
        xAxis.typeface = Typeface.create(Typeface.DEFAULT, Typeface.BOLD)
        xAxis.textColor = Color.BLACK
        xAxis.textSize = 12f
        xAxis.spaceMin = 1f
        xAxis.spaceMax = 1f

        // 데이터 추가
        val entries : ArrayList<RadarEntry> = ArrayList()
        entries.add(RadarEntry(6f))
        entries.add(RadarEntry(7f))
        entries.add(RadarEntry(4f))
        entries.add(RadarEntry(4f))
        entries.add(RadarEntry(4f))
        entries.add(RadarEntry(4f))
        entries.add(RadarEntry(6f))
        entries.add(RadarEntry(6f))

        val everEntries : ArrayList<RadarEntry> = ArrayList()
        everEntries.add(RadarEntry(6f))
        everEntries.add(RadarEntry(6f))
        everEntries.add(RadarEntry(3f))
        everEntries.add(RadarEntry(2f))
        everEntries.add(RadarEntry(5f))
        everEntries.add(RadarEntry(4f))
        everEntries.add(RadarEntry(7f))
        everEntries.add(RadarEntry(7f))

        val dataSet = RadarDataSet(entries, "")
        dataSet.color = Color.GRAY
        dataSet.fillColor = ContextCompat.getColor(context, R.color.blue) // Fragment에서 사용한다면 -> getColor(requireContext(), R.color.blue)
        // dataset 속 채우기
        dataSet.setDrawFilled(true)
        // dataset 숫자 없애기
        dataSet.setDrawValues(false)
        dataSet.fillAlpha = 180
        dataSet.lineWidth = 1f

        val everDataSet = RadarDataSet(everEntries, "")
        everDataSet.color = Color.GRAY
        everDataSet.fillColor = ContextCompat.getColor(context, R.color.gray)
        everDataSet.setDrawFilled(true)
        everDataSet.setDrawValues(false)
        everDataSet.fillAlpha = 150
        everDataSet.lineWidth = 1f

        // 제일 앞에 보여 주고 싶은 차트를 데이터 맨 뒤로 가게 해야 함
        val radarData = RadarData(everDataSet, dataSet)
        data = radarData
        yAxis.axisMaximum = 7f
        yAxis.axisMinimum = 0f
        // y축 숫자 없애기
        yAxis.setDrawLabels(false)
        invalidate()
    }
}

 

 

이렇게 함수를 만들어 넣어주면 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

제일 중요한 점은 두 가지 DataSet을 넣어 줄 때,

 

val radarData = RadarData(everDataSet, dataSet)

 

앞에 보여주고 싶은 데이터는 RadarData에 넣을 때 맨 뒤로 가게  만들어 줘야 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

- 기타 여러가지 설정

 

 

 

 

 

(1). legand = 범례

legend.isEnabled = true

 

val dataSet = RadarDataSet(entries, "사람")
val everDataSet = RadarDataSet(everEntries, "원숭이")

 

 

 

 

 

위처럼 차트의 범례를 나타낼 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

(2). 차트의 숫자 값 

 

dataSet.setDrawValues(true)

 

이렇게 주게 되면

 

 

이렇게 숫자가 보이도록 설정할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

+ 마찬가지로

yAxis.setDrawLabels(true)

를 true로 주면 

 

y축의 값이 나오도록 설정할 수 있습니다.