[Android] 차트(Chart) 그리기 : MPAndroidChart

오늘은 MPAndroidChart 라이브러리를 이용해서 쉽게 그래프 그리는 방법을 설명하겠습니다.

버전이 계속 업데이트가 되어서 여러 속성 예시가 있었고 계속 적용해보느라 시간이 예상보다 오래걸렸던 작업이었습니다. 가장 최신 버전으로 그래프를 그려보았고, 그래프는 나중에도 계속 사용하게 될 것 같아서 나와 모두에게 도움이 되고자 정리합니다!

 

 

MPAndroidChart 라이브러리

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

 

build.gradle

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

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

사용한 버전은 가장 최신 버전으로 v3.1.0 입니다. repositories까지 sych해야 오류가 나지 않는다는 점 참고하시길!

 

 

fragment_statistic.xml

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/statistic_chart"
        android:layout_width="match_parent"
        android:layout_height="220dp"
        android:background="@color/lightGray"/>

원하는 곳에 컴포넌트를 넣어주세요! 저는 Fragment에 LineChart를 그렸습니다.

 

 

StatisticFragment.kt

    private var chartData = ArrayList<Entry>()  // 데이터 배열
    private var lineDataSet = ArrayList<ILineDataSet>()  // 데이터 배열 → 데이터 셋
    private var lineData: LineData = LineData()
    lateinit var chart: LineChart

 

해야할 것은 2가지 입니다.

1. 데이터 처리

    // 차트 데이터 초기화 메서드
    private fun initChartData() {
        // 더미데이터
        chartData.add(Entry(-240f, 0f))
        ...
        chartData.add(Entry((1200).toFloat(), 0f))

        var set = LineDataSet(chartData, "set1")
        lineDataSet.add(set)
        lineData = LineData(lineDataSet)
        
        set.lineWidth = 2F
        set.setDrawValues(false)
        set.highLightColor = Color.TRANSPARENT
        set.mode = LineDataSet.Mode.STEPPED
    }

차트에 넣을 데이터를 처리를 해야 합니다.

1. Entry 객체로 이루어진 배열을 생성하여 데이터를 삽입합니다. (Entry(x:Float, y:Float) - 라이브러리에서 주어진 클래스)
2. 이 데이터 배열을 LineDataSet에 하나의 데이터 셋으로 넣어줍니다. (하나의 그래프에 여러 데이터 셋을 넣을 수 있겠죠?)
3. 그리고 이 데이터셋을 LineData로 만들어 줍니다.

< 사용한 속성 >

• lineWidth : 차트의 선의 굵기
• highLighter : 차트의 점을 클릭했을 때 나오는 + 모양의 선
  • highLightColor
  • highlightLineWidth
• mode : 해당 데이터 셋을 나타내는 차트의 모드 (STEPPED, LINEAR, HORIZONTAL_BEZIER, CUBIC_BEZIER)

 

2. 차트 처리

    // 차트 초기화 메서드
    private fun initChart() {
        chart.run {
            setDrawGridBackground(false)
            setBackgroundColor(Color.WHITE)
            legend.isEnabled = false
        }

        val xAxis = chart.xAxis
        xAxis.setDrawLabels(true)  // Label 표시 여부
        xAxis.axisMaximum = 1200f  // 60min * 24hour
        xAxis.axisMinimum = -240f
        xAxis.labelCount = 5
        xAxis.valueFormatter = TimeAxisValueFormat()

        xAxis.textColor = Color.BLACK
        xAxis.position = XAxis.XAxisPosition.BOTTOM  // x축 라벨 위치
        xAxis.setDrawLabels(true)  // Grid-line 표시
        xAxis.setDrawAxisLine(true)  // Axis-Line 표시

        // 왼쪽 y축 값
        val yLAxis = chart.axisLeft
        yLAxis.axisMaximum = 4.5f   // y축 최대값(고정)
        yLAxis.axisMinimum = -0.5f  // y축 최소값(고정)

        // 왼쪽 y축 도메인 변경
        val yAxisVals = ArrayList<String>(Arrays.asList("F", "C", "B", "A", "A+"))
        yLAxis.valueFormatter = IndexAxisValueFormatter(yAxisVals)
        yLAxis.granularity = 1f

        // 오른쪽 y축 값
        val yRAxis = chart.axisRight
        yRAxis.setDrawLabels(false)
        yRAxis.setDrawAxisLine(false)
        yRAxis.setDrawGridLines(false)

        // 마커 설정
        val marker = LineMarkerView(requireContext(), R.layout.graph_marker)
        marker.chartView = chart
        chart.marker = marker

        chart!!.description.isEnabled = false  // 설명
        chart!!.data = lineData  // 데이터 설정

        chart!!.invalidate()  // 다시 그리기
    }

세부 속성은 위의 코드를 참고해주세요!

 

⭐ x축이나 y축을 Float가 아닌 String으로 변경하는 방법

저의 경우, y축을 Float가 아닌 "A", "B", "C" 등 String으로 변경해야 했습니다.

원하는 String으로 label 배열을 만들고 IndexAxisValueFormatter(label 배열)로 하여 변경해주면 됩니다!

레이블을 고정해서 나타내기 위해서는 granularity 속성으로 지정한 레이블의 간격을 설정해주면 됩니다.

 

x축을 시간 / 날짜로 변경하고 싶은 분들은 아래 포스팅 참고해주세요!

[Android] MPAndroidChart : x축 시간, 날짜로 변경하기

 

 

 

질문이나 잘못된 부분은 아래 댓글로 남겨주시면 감사하겠습니다!

---

reference >

• https://jeongupark-study-house.tistory.com/159
• https://popcorn16.tistory.com/68
• 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
• https://stackoverflow.com/questions/43304637/mpandroidchart-how-to-set-x-axis-labels-at-fixed-interval
• https://stackoverflow.com/questions/45320457/how-to-set-string-value-of-xaxis-in-mpandroidchart