[안드로이드/MpAndroidChart] MpAndroidChart에서 Marker 커스텀하기

그래프의 바를 터치할 때 해당 데이터를 보여주는 Marker를 구현중에 있었는데,

 

공식 문서에 안내되어 있는 getOffset()을 Override하는 방식으로는 위치조정을 하는 것이 어려웠다.

 

구글링을 더 해보니 getXOffset, getYOffset을 override해 사용하는 경우가 많았으나,

 

Kotlin 환경때문인지 몰라도 override 메소드가 보이지 않았다.

 

 

최종적으로 MarkerView의 draw 메소드를 override하여 보여주고자 하는 위치를 조정해 보여주는 걸로 구현을 마칠 수 있었다.

 

* MPAndroidChart 3.1.0 버전에서 진행

* BarChart 사용

* Kotlin 베이스

 

< 구현 순서 >

 

1. BarChart 구성 완료

 

BarEntry, BarDataSet, BarChart 순으로 셋업 진행

val dummyEntries: MutableList<BarEntry> = ArrayList()
		
        for (indices in 0..30) {
            dummyEntries.add(BarEntry(indices.toFloat(), 5f))
        }

        val dataSet = BarDataSet(dummyEntries, "Yoohoo")
        dataSet.setDrawValues(false)
        val barData = BarData(dataSet)
        val barChart = layout.findViewById<BarChart>(R.id.monthly_bar_chart)

        barChart.data = barData
        barChart.invalidate()

 

2. MarkerView를 상속받는 CustomMarkerView 생성

 

class MonthlyMarkerView : MarkerView {

    private lateinit var tvContent: TextView
    
	// marker
    constructor(context: Context?, layoutResource: Int) : super(context, layoutResource) {

        tvContent = findViewById(R.id.test_marker_view)
    }
	
    // draw override를 사용해 marker의 위치 조정 (bar의 상단 중앙)
    override fun draw(canvas: Canvas?) {
        canvas!!.translate(-(width / 2).toFloat(), -height.toFloat() )

        super.draw(canvas)
    }

	// entry를 content의 텍스트에 지정
    override fun refreshContent(e: Entry?, highlight: Highlight?) {
        tvContent.text = e?.y.toString()

        super.refreshContent(e, highlight)
    }
    
}

 

3. Marker로 사용할 layout 생성, CustomMarkerView의 생성자에서 layout을 할당

 

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/white"
    >

    <TextView
        android:id="@+id/test_marker_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:text="WOW"
        android:textSize="12sp"
        android:ellipsize="end"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceSmall"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

3. 구성한 BarChart의 marker에 CustomMarkerView를 지정

 

val marker = MonthlyMarkerView(context, layoutResource = R.layout.marker_textview)
barChart.marker = marker

 

 

위치조정 적용 이전

 

위치조정 적용 후(위치적용과 기타 barChart 옵션 적용해 간단하게 만듬)

 

 

https://stackoverflow.com/questions/36687739/markerview-is-not-showing-up-using-mpandroidchart

MarkerView is not showing up using MPAndroidChart