youl

youl

푸하하-자아자 ˘◡˘

[Android] MPAndroidChart 라이브러리 사용

2 분 소요

Intro

👩 이번 시간에는 안드로이드에서 다양한 차트 뷰를 만들 수 있는 MPAndroidChart 라이브러리를 활용해 원형차트(piechart)를 구현해보고자 한다.

차트와 관련된 다양한 예제가 위 링크 깃 허브에 존재하니 함께 확인해보길 바란다.

🙋‍♀️Setup

  • 우선 해당 라이브러리를 사용하기 위해 다음의 코드를 gradle에 추가해야 한다.
  buildscript {
    repositories {
        google()
        jcenter()
        # maven 추가!
        maven { url "https://jitpack.io"}
    }
  }
  allprojects {
    repositories {
        jcenter()
        # maven 추가!
        maven { url "https://jitpack.io" }
    }
  }


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

여기까지가 준비과정 끝이다!

그렇다면 이제 본격적으로 파이차트를 구현해보자!

🙋‍♀️ piechar_activity.xml

다음 코드를 통해서 라이브러리 속 PieChart를 가져와 xml에 요소를 추가할 것이다.

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/piechart"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

🙋‍♀️ PieChartActivity.kt

👩 우선 그래프에 필수적인 데이터 요소를 어떻게 구성해야 하는지 살펴보자.

  • 그래프를 구성할 요소들의 리스트
    • 해당 dataset은 PieEntry로 구성된 ArrayList이다.

  • 위 dataset과 label을 함께 설정해 PieDataSet 요소를 만든다.

  • 해당 PieDataSet을 사용해 그래프 data 속성에 적용할 PieData를 구성한다.

  • xml에 속 piechart를 가져와 data를 적용해준다.


👩 여기까지만 진행한다면 가장 기본적인 파이차트를 사용할 수 있을 것이다.

간단하지 않은가?? 코드를 확인하며 다시 한 번 그 과정을 알아보자!

class PieChartActivity : AppCompatActivity() {
    private lateinit var binding: PiechartActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = PiechartActivityBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        setTitle("PieChat")

        # 그래프 색 설정 시, 필요
        val colorItem = arrayListOf<Int>(Color.parseColor("#403660"), Color.parseColor("#6F5BA7"), Color.parseColor("#B19BF1"))

        # 1. 그래프 구성 data 요소
        val dataSet = ArrayList<PieEntry>()
        dataSet.add(PieEntry(10f, "soccer"))
        dataSet.add(PieEntry(20f, "basketball"))
        dataSet.add(PieEntry(50f, "baseball"))
        dataSet.add(PieEntry(10f, "handball"))
        dataSet.add(PieEntry(10f, "swimming"))

        # PieDataSet
        val pieDataSet = PieDataSet(dataSet,"practice")
        pieDataSet.apply {
           # 그래프 속 들어갈 dataset에 색깔들 적용!
            colors = colorItem
            valueTextColor = Color.WHITE
            valueTextSize = 16f
        }

        # PieData
        val pieData = PieData(pieDataSet)
        binding.piechart.apply {
            # 파이차트에 data 설정
            data = pieData
            # 그 외 설정들!
            centerText = "Percentage of Exercise"
            description.isEnabled = false
            setEntryLabelColor(Color.WHITE)
            setUsePercentValues(true)
            setEntryLabelColor(Color.BLACK)
            animateY(1400, Easing.EaseInOutQuad)
            animate()
        }
    }
}

👩 파이차트를 위한 데이터 설정은 위 코드와 같이 간단하다.

이제 원하는 형태로 그래프의 모양을 수정하고, 다양한 기능을 추가하거나 삭제하면 된다.

위에서 적용한 속성들을 간단히 정리하자면 다음과 같다.

  • setUsePercentValues: 들어온 값을 percentage를 적용해 표시
  • setEntryLabelColor: 파이차트 각 요소 text 색 설정
  • valueTextColor: 파이차트 각 요소 비율 text 색 설정
  • centerText: 파이차트 중앙에 들어오는 text
  • description: 파이차트 오른쪽 하단에 들어가는 차트 제목
  • animateX: 애니메이션 효과 설정
    • animate()와 함께 사용!

이 외에도 정말 다양한 설정이 가능하다!

👩 위 코드를 적용한 결과를 한 번 살펴보자! 파이차트

🙋‍♀️ 기본 원 차트

👩 해당 코드는 필자가 필요해 작성한 아무 속성도 적용하지 않은 기본 원 차트에 대한 코드이다.

class PieChartActivity : AppCompatActivity() {
    private lateinit var binding: PiechartActivityBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = PiechartActivityBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
        setTitle("PieChat")

        val colorItem = arrayListOf<Int>(Color.parseColor("#403660"), Color.parseColor("#6F5BA7"), Color.parseColor("#B19BF1"))

        val dataSet = ArrayList<PieEntry>()
        dataSet.add(PieEntry(10f, "soccer"))
        dataSet.add(PieEntry(20f, "basketball"))
        dataSet.add(PieEntry(50f, "baseball"))
        dataSet.add(PieEntry(10f, "handball"))
        dataSet.add(PieEntry(10f, "swimming"))

        val pieDataSet2 = PieDataSet(dataSet, "practice")
        pieDataSet2.apply{
            colors = colorItem
            valueTextColor = Color.BLACK
            valueTextSize = 16f
            setDrawValues(false)
        }

        val pieData2 = PieData(pieDataSet2)
        binding.piechart2.apply{
            data = pieData2
            description.isEnabled = false
            setUsePercentValues(true)
            # 그래프 회전 x
            isRotationEnabled = false
            # 그래프 각 요소 설명 x (ex. baseball, soccer...)
            setDrawEntryLabels(false)
            # 요소 클릭 시, 확대 기능 x
            setTouchEnabled(false)
            # 하단 왼쪽 요소 설명 x
            legend.isEnabled = false
            # 파이차트 중간 hole 크기
            holeRadius = 75F
            setEntryLabelColor(Color.BLACK)
        }
    }
}

기본결과

(사진의 하단에 위치한 차트가 위 코드의 결과이다!)

그렇다면 이번 게시글은 여기서 마무리하겠다!

이만!

끝! ~(˘▾˘~)

✍ GIT REPO

📃참고

  • https://goodgoodminki.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%BD%94%ED%8B%80%EB%A6%B0-%EC%9B%90%ED%98%95-%EA%B7%B8%EB%9E%98%ED%94%84-%ED%8C%8C%EC%9D%B4-%EA%B7%B8%EB%9E%98%ED%94%84-Android-Koltin-Circle-Graph-Pie-Graph
  • https://meyouus.tistory.com/23 *https://github.com/PhilJay/MPAndroidChart

댓글남기기

참고