안드로이드 코틀린 바 그래프 ~ Android Kotlin Bar chart, Bar graph

안드로이드 코틀린 바 그래프

Android Kotlin Bar chart, Bar graph

 

라이브러리 : MPAndroidChart

github.com/PhilJay/MPAndroidChart

 

그래프 중 가장 단순하면서 직접구현하기는 은근히 신경써야할 게 많은 것이 바 그래프이다. 막대 그래프라고도 하는데, 대부분 bar chart라고 검색하면 많은 자료가 나온다.

그 중에서도 위 라이브러리가 가장 유명하며 지속적인 업데이트가 계속해서 되고 있다. 라이브러리 적용법 및 사용법은 위 깃허브를 통해 확인 할 수 있다.

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

바 그래프를 그리기 위해서는 xml에 다른 세세한 추가 없이 barchart 하나만 추가하면 xml에서는 더이상 할 것이 없다

 

라이브러리임에도 불구하고 많은 커스텀이 가능하다. 나는 백그라운드 및 눈금 등등 모든걸 안보이게 하고 막대랑 위 아래 라벨만 보이도록 해보았다.

private fun basicSetting() {
        chart.apply {
            description.isEnabled = false
            setMaxVisibleValueCount(3)
            setPinchZoom(false)
            setDrawBarShadow(false)
            setDrawGridBackground(false)
            setDrawBorders(false)
            legend.isEnabled = false
            setTouchEnabled(false)
            isDoubleTapToZoomEnabled = false
            animateY(3000)
        }
    }

    private fun setxAxis() {
        val xAxis = chart.xAxis
        xAxis.apply {
            setDrawGridLines(false)
            isEnabled = true
            position = XAxis.XAxisPosition.BOTTOM
            disableGridDashedLine()
            setDrawAxisLine(false)
        }
    }

    private fun setLeftXaxis() {
        val leftXaxis = chart.axisLeft
        leftXaxis.apply {
            setDrawGridLines(false)
            setDrawAxisLine(false)
            isEnabled = false
            setDrawLabels(false)
        }
    }

    private fun setRightXaxis() {
        val rightXaxis = chart.axisRight
        rightXaxis.apply {
            setDrawGridLines(false)
            setDrawAxisLine(false)
            isEnabled = false
            setDrawLabels(false)
        }
    }

많은 설정에서 false로 셋팅을 해야 했기에 일단 보기 좋게 함수로 빼서 관리를 하였다. 아직 코틀린이 익숙하지 않아서, 코틀린에서 함수를 저렇게 써도 되는지는 모르겠지만.. 일단 작동은 한다. 

반대로 사용하고 싶은 옵션은 true혹은 굳이 작성하지 않도록 하면 된다. 애니메이션의 경우 일단 초값만 넣으면 작동이 하는데, 더 커스텀이 가능한지는 알아봐야 한다.

private fun createBarChart() {
        val values = ArrayList<BarEntry>()
        val type = ArrayList<String>()
        val colorList = ArrayList<Int>()
        val set : BarDataSet

        values.add(BarEntry(1.0f, 20.0f))
        values.add(BarEntry(2.0f, 30.0f))
        values.add(BarEntry(3.0f, 40.0f))

        type.add(" ")
        type.add("What")
        type.add("Who")
        type.add("How")

        colorList.add(Color.parseColor("#BDBDBD"))
        colorList.add(Color.parseColor("#5D5D5D"))
        colorList.add(Color.parseColor("#191919"))

        if (chart.data != null && chart.data.dataSetCount > 1) {
            val chartData = chart.data
            set = chartData?.getDataSetByIndex(0) as BarDataSet
            set.values = values
            chartData.notifyDataChanged()
            chart.notifyDataSetChanged()
        } else {
            set = BarDataSet(values, " ")
            set.colors = colorList
            set.setDrawValues(true)

            val dataSets = ArrayList<IBarDataSet>()
            dataSets.add(set)

            val data = BarData(dataSets)
            chart.data = data
            chart.setVisibleXRange(1.0f,3.0f)
            chart.setFitBars(true)

            val xAxis = chart.xAxis
            xAxis.apply {
                granularity = 1f
                isGranularityEnabled = true
                valueFormatter = IndexAxisValueFormatter(type)
            }
            chart.invalidate()
        }
    }

그래프를 그리기 위한 데이터들도 하드코딩으로 한지라 ArrayList로 대충 만들어서 set하였다.

데이터를 받아와서 셋팅을 해야 할 경우 반복문을 돌려서 데이터 셋팅을 할 것이다. 라벨값을 바꾸기 위해서는 IndexAxisValueFormatter인데, 새로운 버전부터 들어온 것 같다. 구글링을 해보니 다시 오버라이딩을 해서 사용하던데, 그러한 방법대로 해보면 Deprecated가 되어있다.

그래프 관련은 직접 구현하려고 하면 지옥을 맛볼 것 같다. 되도록이면 라이브러리를 사용해서 끝내도록 하는 것이 좋을 것 같다

 

그런데 위 라이브러리는 다양한 그래프를 제공해주는데, 그래프 하나만 사용하려고 라이브러리 통을 받아야 한다. 무겁지 않을까 라는 생각이 들지만, 요즘 사양에서는 전혀 문제가 없어 보인다.