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

 

MPAndroidChart x축 시간으로 변경하기

포스팅 시점으로 최신 라이브러리인 3.1.0 버전을 사용하겠습니다.

    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

 

TimeAxisValueFormat.kt

x축을 날짜-시간 형식으로 포맷할 클래스를 만들어 해결합니다.

class TimeAxisValueFormat : IndexAxisValueFormatter() {

    override fun getFormattedValue(value: Float): String {

        // Float(min) -> Date
        var valueToMinutes = TimeUnit.MINUTES.toMillis(value.toLong())
        var timeMimutes = Date(valueToMinutes)
        var formatMinutes = SimpleDateFormat("HH:mm")

        return formatMinutes.format(timeMimutes)
    }
}

해당 클래스는 MPAndroidChart 라이브러리에서 제공하는 IndexAxisValueFormatter 클래스를 상속 받습니다.

상속받은 클래스의 getFormattedValue()로 오버라이딩 하여 원하는 형식으로 변경할 수 있습니다.

제가 그리고자 했던 그래프는 x축에 24시간을 나타내야 하기 때문에 다음과 같이 수정했습니다.

1. value(Float형) : minutes → milliseconds
2. milliseconds → Date형
3. Date형 → SimpleDateFormat("원하는 형태")

 

😅 SimpleDateForamt("HH:MM")으로 하면 원하는 결과가 나오지 않아요!

이미 아시는 분들도 계시겠지만, "HH:mm"으로 해야 '시:분' 형식으로 나오게 됩니다.

"HH:MM"으로 한다면 '시:월'으로 나타나 모든 분이 1로 표시됩니다. 저는 이걸 헷갈리고 계속 헤맷답니다ㅎㅎ

 

날짜 형식으로 원하는 분들은 첫번째 과정에서 TimeUnit.DAYS 변경하고 SimpleDateFormat을 변경하면 되겠죠?

TimeUnit은 쉽게 시간을 계산할 수 있도록 Java에서 제공하는 라이브러리로 다음과 같은 예시를 들 수 있습니다.

TimeUnit.SECONDS.toHours()
TimeUnit.DAYS.toMinues()
TimeUnit.MILLISENDS.toSeconds()

 

ChartFragment.kt

    val xAxis = chart.xAxis
    xAxis.valueFormatter = TimeAxisValueFormat()
    xAxis.setDrawLabels(true)  // Label 표시 여부
    xAxis.axisMinimum = -240f  // 오전 5시
    xAxis.axisMaximum = 1200f

• valueFormatter : 위에서 정의한 Formatter 클래스
• axisMinimum : 최소값
• axisMaximum : 최대값

👆 axisMinimum을 -240f로 지정한 이유?

처음에 최소값을 0f로 지정했더니 기본 값이 오전 9시로 표시되었습니다.

저의 경우, 시작점을 오전 5시로 하고 싶었기 때문에 다음과 같이 조정하여 표시하였습니다!

 

 

MPAndroidChart 확대 결과

 

---

reference >

• https://stackoverflow.com/questions/41426021/how-to-add-x-axis-as-datetime-label-in-mpandroidchart
• https://codechacha.com/ko/java-convert-milliseconds-using-timeunit/