[Android, Kotlin] 안드로이드에서 line chart 만들기

 

이번에 공부한 내용은 android studio에서 차트(그래프)를 그리는 방법에 대해 공부해 보았다.

이번 포스팅에 차트 만들기에 대해 공부했던 내용을 정리해보려 한다.

사실 작년에도 차트를 사용했던 경험이 있었지만, 이번에 다시 사용해야 하는 경우가 생겼기에 이번 기회에 정리해 보려 한다.(작년에 공부했던 내용을 거의 다 까먹어서 처음부터 다시 공부했었다 >:( )

 

차트를 만드는 방법은 다양하지만 기본적으로는 다른 분들이 만들어준 차트 라이브러리를 사용하는 것이 가장 편할 것이다.

그냥 android chart library라고 검색해도 다른 분들이 이미 만들고 사용 중인 라이브러리가 다수 존재한다.

아니면 자신이 직접 custom 해서 만들고 싶으면 android에서 제공하는 canvas를 이용해 만들어야 하는데, canvas는 필자가 잘 모르는 내용이기에 다른 글을 참고해서 만들면 될 듯하다.

이번에 차트를 만들면서 필자가 사용한 라이브러리는 차트를 그려본 사람들은 대부분 알고 있을 라이브러리인 mpAndroidChart라는 라이브러리를 사용해서 차트를 만들어 보았다.

 

https://github.com/PhilJay/MPAndroidChart

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

이 차트 라이브러리에서 다양한 차트 형식을 지원하기 때문에 아주 유용하게 사용할 수 있다.

이번에 사용한 차트는 제목에서도 언급했듯이 line chart를 사용해 보겠다.

 

차트마다 요구하는 항목이 모두 다르기에 이에 주의해서 사용하자.

 

이제 본격적으로 line chart(선 그래프)를 만들어 보자.

 

1. 라이브러리 추가

mpAndroidChart를 사용하기 위해 라이브러리를 추가해야 한다.

setting.gradle.kts(kotlin dsl)

repositories {
    maven { setUrl("https://jitpack.io") }
}

setting.gradle(groovy dsl)

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

 

app 단위 build.gradle(2023. 09. 27 기준)

// mp android chart
implementation("com.github.PhilJay:MPAndroidChart:v3.1.0")

 

2. xml에 chart 생성하기

라이브러리 dependency를 추가했다면, 이제는 xml에 차트를 만들어 보겠다.

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

 

위의 코드를 추가해 주면 lineChart를 사용할 수 있을 것이다.

 

그런데 어떨 때에는 차트로 보여줘야 할 데이터가 많을 때에는 width가 match_parent로 구성된 chart로는 각각의 데이터들을 확인하기 어려울 수 있다.(각 데이터 간의 간격이 width가 좁은 만큼 좁아지기 때문에 확인하기 힘들다.)

 

그래서 mp android chart는 차트는 x축을 기준으로(가로) 스크롤을 할 수 있는 기능을 제공한다.(세로(y축)도 가능하다.)

이 스크롤 기능을 사용하려면, kotlin 코드뿐만 아니라 xml의 코드도 약간 손 봐줘야(?) 한다.

kotlin 코드는 나중에 차트 설정을 수정할 때 다루도록 하고 xml에서 바꿔야 할 부분은

scrollView를 추가하고 chart의 width를 자신이 원하는 만큼 늘려주면 된다.

<HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        android:scrollbars="horizontal">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <!-- add your chart code. -->
        </LinearLayout>
    </HorizontalScrollView>

가로로 스크롤돼야 하기에 horizontalScrollView를 사용했다.

또한 scrollView 안에는 LinearLayout을 넣어주는 것을 잊지 말자.

 

그리고 linearLayout에 chart를 넣을 때 또 주의해야 할 점이 있는데 width를 match_parent로 설정하면 chart의 width가 화면에 딱 맞게 맞춰지기 때문에 scroll이 발생하지 않을 것이다.

스크롤이 되게 하려면 xml의 화면을 넘길 만큼 width를 아주 크게 설정해 주어야 할 것이다.

 

차트 생성이 모두 완료되었으면 이제는 코드 부분에서 차트 데이터 추가 및 차트 수정을 해야 할 차례이다.

 

3. chart 생성 및 수정

chart를 수정하기 전에 먼저 chart로 보여줄 data들을 만들어주어야 한다.

chart에 데이터를 삽입하기 위해 chart에 각 데이터의 좌표를 지정하는 arrayList를 만들어 주자.

val chartEntry = arrayListOf<Entry>()

Entry()로 x축과 y축을 설정할 수 있다.(Entry(x =?, y =?) x, y는 float형이다.)

 

이제 자신이 생성한 list에서 chart로 보여줄 부분을 chartArray의 y축으로 넣어 준다.

그리고 x축은 0부터 순서대로 증가해야 하기 때문에(x가 같으면 한 부분에 데이터가 모두 모이는 광경을 볼 수 있을 것이다 ㅎㅎ) for문 등 반복문을 이용해야 편하다.

list.forEachIndexed { index, listItem ->
    chartEntry.add(Entry(x=index.toFloat(), y=/*차트에 보여줄 데이터*/.toFloat()))
}

forEachIndexed를 이용하면 index와 list의 item들을 모두 보여주기 때문에 유용하게 사용할 수 있다.

저 작업까지 완료하면 chart에 보여줄 데이터를 만드는 작업은 완료한 것이다!

 

이제 진짜로 chart를 만들어 보자.

lineChart를 만들기 위해 lineChart만을 위한(?) dataSet이 필요하다.

val chartDataSet = LineDataSet(chartData, "")

뒤의 string parameter는 label로 딱히 중요한 부분은 아니기 때문에 빈 문자열로 적어주어도 상관없다.

다음에는 생성한 dataSet을 이용해 chart에 data를 설정해 주고 chart를 invalidate 해주면 기본적인 차트 생성은 끝난다.

binding.yourChartName.apply {
    data = LineData(chartDataSet)
    invalidate()
}

 

차트 생성을 완료했으니 이제 차트 속성을 변경하는 방법을 알아보자.

차트의 속성은 크게 3가지로 나눌 수 있을 것 같다.

x축, y축, chart item이 있겠다.

x, y는 각각 축에 대한 설정을 변경할 수 있다.(y축의 경우에는 오른쪽 축, 왼쪽 축으로 이름 지어져 있다.)

chart item에서는 dataSet에서 설정한 item들이 보이는 속성을 변경할 수 있다.

 

x축부터 시작해 보겠다.

x축 수정 방법은 chart 안에서 xAxis를 불러와서 수정할 수 있다.

binding.yourChartName.xAxis.apply {
    /*x축 속성 변경*/
}

이번에 필자가 사용했던 속성들만 설명해 주겠다.

원래는 매우 다양한 속성들이 존재하지만, 필자도 잘 모르는 항목도 많고 분량이 많이 길어질 듯해서 필자가 사용한 속성들만 알려 주도록 하겠다.

 

그러면 먼저 사용한 예제 코드를 보겠다.

xAxis.apply {
    position = XAxis.XAxisPosition.BOTTOM
    valueFormatter = IndexAxisValueFormatter(xAxisTitleData)
    setLabelCount(xAxisTitleData.size, true)
}

• position: x축의 표시 위치를 설정한다. 기본값은 TOP이다.
• valueFormatter: chart data마다의 label을 설정할 수 있는 항목이다. 필자는 IndexAxisValueFormatter를 사용했지만 개발자가 직접 커스텀할 수도 있다.
• setLabelCount: chart의 label의 개수를 제한할 수 있다. 두 번째 parameter는 force로 true로 설정하면 label을 반드시 보여준다.

 

다음은 y축의 속성을 볼 차례이다.

그런데 필자는 y축에 관련된 항목은 하나도 손대지 않았기 때문에 이 부분은 생략하고 참고 자료로 대체하겠다,

https://namget.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-MPAndroidChart-LineChart-%EC%86%8D%EC%84%B1-%EC%A0%95%EB%A6%AC-Example

[안드로이드] MPAndroidChart LineChart 속성 정리 (Example)

이 포스팅에서 다양한 차트 속성을 다룰 수 있다.

 

마지막으로 chart item 속성을 변경하는 작업이다.

chartDataSet.apply {
    lineWidth = 3f
    circleRadius = 6f
    color = resources.getColor(R.color.black, null)
    setCircleColor(R.color.button_unselected)
    mode = LineDataSet.Mode.CUBIC_BEZIER
    valueTextSize = 10f
}

• lineWidth: lineChart의 line의 두께를 변경한다.
• circleRadius: chart에서는 항목이 둥근 원으로 나오는데, 원의 크기를 늘려준다.
• mode: lineChart의 mode를 설정한다. 필자가 사용한 mode는 cubic_bezier로 chart data 간의 line을 자연스럽게(둥글게) 설정할 수 있다.(linear, stepped, cubic_bezier, horizontal_bezier 총 4개의 mode가 존재한다.)
• valueTextSize: chart data가 보여주는 value text의 크기를 변경한다.

 

4. 작업 결과

간단하게 필자가 만든 차트 샘플 사진을 보여 주겠다.

 

정리

 

---

간단하게 차트를 만들 수 있는 mpAndroidChart를 이용해 보았는데 상당히 편리한 라이브러리인 것은 확실하다.

하지만 차트 속성이 매우 다양해서 모든 속성을 완벽히 활용하는 것은 상당히 어려울 것 같다.

다양한 차트를 지원하기 때문에 상황에 맞는 차트를 이용하면 될 것 같다.

 

잘못된 정보나 더 많은 정보를 알고 계신 분들의 댓글 환영합니다.

 

참고한 글

https://velog.io/@hyehyes/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-MPAndroidChart%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-LineChart-%EC%82%AC%EC%9A%A9

[안드로이드] MPAndroidChart를 활용한 LineChart 사용

https://programmmingphil.tistory.com/16

MPAndroidChart 가로 꺾은선 그래프