[안드로이드] 코틀린 원형차트 예제 (feat. MPAAndroidChart 라이브러리)

[2021-04-13 업데이트]

 

 

예전에 별모양 차트에 관해서도 포스팅 기록이 남긴적이 있는데 이번에는 원형차트 예제 코드에 대해 포스팅을 할려고합니다.

 

먼저 MPAAndroidChart 라이브러리를 사용하므로 디펜던시를 추가해줍니다.

allprojects {
    repositories {
        google()
        jcenter()
        maven { url 'https://jitpack.io' }
    }
}

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

 

 

 

 

xml 입니다

 <com.github.mikephil.charting.charts.PieChart
            android:id="@+id/country_pc_piechart"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:layout_marginTop="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.495"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/country_li_linear2" />

 

세팅하는 코드입니다 

크게 xml, yValues(ArrayList<PieEntry>) -> dataSet(PieDataSet), pieData(PieData)  세 단계로 구현됩니다.

animateY() 함수를 통해 차트가 그려지는 애니메이션을 추가할 수 도 있습니다. 

with(viewModel) {
            countryResponse.observe(viewLifecycleOwner, Observer {
                with(binding.countryPcPiechart) {
                    setUsePercentValues(true)
                    description.isEnabled = false
                    setExtraOffsets(5f, 10f, 5f, 5f)
                    isDrawHoleEnabled = true
                    setHoleColor(Color.WHITE)
                    transparentCircleRadius = 61f

                    val yValues: ArrayList<PieEntry> = ArrayList()
                    with(yValues) {
                        add(PieEntry(it.city1p.toFloat(), it.city1n))
                        add(PieEntry(it.city2p.toFloat(), it.city2n))
                        add(PieEntry(it.city3p.toFloat(), it.city3n))
                        add(PieEntry(it.city4p.toFloat(), it.city4n))
                        add(PieEntry(it.city5p.toFloat(), it.city5n))
                    }

                    animateY(1000, Easing.EaseInOutCubic)

                    val dataSet: PieDataSet = PieDataSet(yValues, "")
                    with(dataSet) {
                        sliceSpace = 3f
                        selectionShift = 5f
                        setColors(*ColorTemplate.JOYFUL_COLORS)
                    }

                    val pieData: PieData = PieData(dataSet)
                    with(pieData) {
                        setValueTextSize(10f)
                        setValueTextColor(Color.BLACK)
                        val des = Description()
                        des.text = "도시별 확진자 상위 5곳"
                        description = des
                    }
                    data = pieData
                }
            })
        }

 

 

 

결과화면입니다.

 

애니메이션으로 이런식으로 그려집니다. (움짤을 했어야했는제 죄송합니다...)

 

 

역시 단순텍스트보다 시각화가 한눈에 보기 좋은 것 같습니다.

댓글과 공감은 큰 힘이됩니다. 감사합니다!