MPAndroidChart 너는 뭐니

xml에서 chart는 없나?

에서 시작한 chart 찾기. android에서 제공하는 것은 없었고, 유명한 라이브러리가 있어서 소개할려고 한다.

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

이 차트 라이브러리는 많은 차트를 지원하는데 그 중 Line Chart에 대해서 작성할려고 한다.

 

사용법은 생각보다 간단한다.

1. XML에 Line Chart를 추가한다.

2. 코드로 디자인 및 데이터를 넣으면 된다.

 

코드

1. LineChart 전반적인 설정

private fun lineChartSetting() = binding.lcSensorData.apply {
        setDrawGridBackground(false)
        setDrawBorders(false)
        description.isEnabled = false
    }

2. 차트의 범례 설정

private fun lineChartLegendSetting() = binding.lcSensorData.legend.apply {
        isEnabled = false // 허용하지 않아서 아래 설정은 먹히지 않는다.
        verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM
        horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER
        form = Legend.LegendForm.CIRCLE
        formSize = 10f
        textSize = 13f
        textColor = Color.parseColor("#A3A3A3")
        setDrawInside(false)
        yEntrySpace = 5f
        isWordWrapEnabled = true
        xOffset = 80f
        yOffset = 20f
    }

3.아래 설정

private fun lineChartBottomSetting() = binding.lcSensorData.xAxis.apply {
        setDrawAxisLine(false)
        setDrawGridLines(false)
        position = XAxis.XAxisPosition.BOTTOM
        granularity = 1f
        textSize = 14f
        textColor = Color.rgb(118, 118, 118)
        spaceMin = 0.1f
        spaceMax = 0.1f
        valueFormatter = object : ValueFormatter() {
            override fun getFormattedValue(value: Float): String {
                return "4/11"
            }
        }
    }

4. 왼쪽 오른쪽 설정

  private fun lineChartLeftSetting() = binding.lcSensorData.axisLeft.apply {
        textSize = 14f
        textColor = Color.rgb(163, 163, 163)
        setDrawAxisLine(false)
        setDrawGridLines(false)
        axisMaximum = 100f
        axisMinimum = 0f
    }

    private fun lineChartRightSetting() = binding.lcSensorData.axisRight.apply {
        isEnabled = false
    }

5. 데이터 넣기

		
        ...
        set1.apply {
                lineWidth = 3f
                circleRadius = 6f
                setDrawValues(false)
                setDrawCircleHole(true)
                setDrawHorizontalHighlightIndicator(false)
                setDrawHighlightIndicators(false)
                color = Color.rgb(255, 155, 155)
                setCircleColor(Color.rgb(255, 155, 155))
		}
        val dataSets: ArrayList<ILineDataSet> = ArrayList()
		dataSets.add(set1) // add the data sets
		// create a data object with the data sets
        val data = LineData(dataSets)
 }

차트

차트 이미지

 

생각보다 퀄리티가 좋아서 만족했다.

 

그 외 많은 기능을 추가할 수 있어서 좋은 라이브러리인 것 같다.