MpAndroidChart 사용 후기

그래프를 사용할 일 이 있어서 어떤 opensource를 사용해볼까 고민하다가 MPAndroidChart를 사용해 보기로 결정 하였습니다. (

1. 쫌 더 알아보니 뱅크샐러드에서도 이 opensource를 사용하고 있었습니다.

2. https://github.com/PhilJay/MPAndroidChart 이곳에서 문서 및 관련 예제 코드를 받아서 확인해 볼 수 있습니다.

)

 

우선 사용 후기 부터 정하면 간단한 코드로 세세하게 chart를 설정할 수 있고, 매우 정교하고 성능이 빠릅니다. 대신 원하는 방식의 chart를 그릴 려면 기본 chart에서 쫌 연산을 하여 그려주어야 합니다. 하지만 단점보다는 장점인 많은 opensoure였고, 다음에 다시 그래프 혹은 chart를 그릴 일이 있다면 다시 사용할 것 같습니다.

 

사용 방법은 build.grade에 다음을 추가 해줍니다.

    //mpandroid 그래프
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

 

그리고 그래프를 그릴 부분에 레이아웃을 잡아 줍니다. 저같은 경우에는 class를 하나 받고 필요한 종류의 chart를 상속 받아서 사용 했습니다. 

 

사용할 수 있는 옵션을 보면(라인차트를 기준으로 설명하겠습니다. 제가 라인차트를 그렸기 때문입니다.)

setDrawGridBackground : 그레프에 수치 구분선 

 

isDragEnabled : 드레그 true/false
isScaleYEnabled : y축으로 늘리기 true/false
isScaleXEnabled : x축으로 늘리기 true/false

 

xAxis.isEnabled  : x축 노출 true/false
axisLeft.isEnabled  : y축 왼쪽 노출 true/ false
axisLeft.setDrawAxisLine : y축 왼쪽 라인 노출 true/ false
axisLeft.setDrawGridLines : y축 왼쪽 라인 gride 노출 true/ false
axisLeft.setDrawLabels : y축 왼쪽 라인에 라벨 노출  true/ false
axisRight.setDrawAxisLine : y 축 오른쪽 라인 노출 true/ fasle 
axisRight.setDrawGridLines :  y축 오른쪽 라인 gride 노출 true/ false
axisRight.isEnabled  : y축 오른쪽 라인 사용 true/ false
xAxis.setDrawAxisLine : x축  노출 true/ false
xAxis.setDrawGridLines : x축  gride 노출 true/ false

 

yAxis = axisLeft : y축 왼쪽 획득
yAxis.axisMaximum  : y축 최고값 셋팅
yAxis.axisMinimum : y 축 최저값 셋팅

highlightValue : 그래프 선택시 그 수치를 기준으로 나타나는 십자가 선

setMode : 라인 차트일 경우 그려지는 종류를 선택할 수 있습니다. (LINEAR/STEPPED/CUBIC_BEZIER/HORIZONTAL_BEZIER)

LimitLine : 제한 선으로 그래프 위에 따로 그려집니다.

그리고 라인 색과, 하이 라이트 색을 선택 셋팅 할 수 있으며( 셋팅은 R G B 값을 Hex 값으로 입력)

setDrawFilled ; 그래프 하단으로 색상 채우기

IFillFormatter : 색상을 어느 수치까지 채울지 선택 

fillDrawable : 채워질 색상 선택 (그라데이션으로도 가능)

setDrawCircles : 각 수치를 원으로  표시

animateX : 그래프 그릴 시 x축 애니메이션으로 

animateY : 그래프 그릴 시 Y축 애니메이션으로 

invalidate : 다시 그리기

legend.isEnabled : 그래프 설명 사용 여부 true/false

MarkerView : 그래프에서 수치를 선택 했을 떄 수치와 관련된 정보를 노출할 수 있는 Marker

 

Marker는 다음과 같이 사용할 수 있습니다. (코드 출처  https://github.com/PhilJay/MPAndroidChart)

public class MyMarkerView extends MarkerView {

    private final TextView tvContent;

    public MyMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);

        tvContent = findViewById(R.id.tvContent);
    }

    // runs every time the MarkerView is redrawn, can be used to update the
    // content (user-interface)
    @Override
    public void refreshContent(Entry e, Highlight highlight) {

        if (e instanceof CandleEntry) {

            CandleEntry ce = (CandleEntry) e;

            tvContent.setText(Utils.formatNumber(ce.getHigh(), 0, true));
        } else {

            tvContent.setText(Utils.formatNumber(e.getY(), 0, true));
        }

        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }
}

이럴 식으로 세세하게 설정 할 수 있으며

 

라인그래프 / 막대그래프/ 원그래프도 그릴 수 있고, 그래프 화면에서 click 또는 touch를 통한 control도 가능합니다.

 

라인차트일 경우에는 xml에 

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

원그래프(파이차트)

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

막대차트

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

 

이렇게 하여 사용할 수 있습니다. (이미지 출처  https://github.com/PhilJay/MPAndroidChart 예제 코드 실행 후 챕처) 

이미지는 MPAndroidChart 예제에서 가져왔습니다.

 

이 3개 그래프 이외에도 다양한 차트를 그릴 수 있고 그래프를 간단한 code로 정교하게 다룰 수 있었습니다

 

그리고 부모뷰가 viewpager거나 SwipeRefreshLayout일 경우 그래프를 컨트롤 할 때 페이지가 바뀐거나 pull & 리프레쉬가 발생하는데 이를 방어하기위해서

chart에 TouchListenr 이벤트를 주고

v.getParent().requestDisallowInterceptTouchEvent(true)

를 사용하여 부모 뷰로 touch를 뺏기지 않도록 설정해주어 chart를 사용할 때는 viewpager가 동작 하지 않도록 작업을 하고

(requestDisallowInterceptTouchEvent 은 부모뷰가 TouchEvent를 가져갈 수 없도록 설정해주는 명령어 입니다.)

 

SwipeRefreshLayout의 pull& 리프레쉬의 경우에는 touch의 MotionEvent가 down이가너 move일 경우 

SwipeRefreshLayout.setEnabled(false)

동작을 못하게 하고, MotionEvent가 up이거나 cancel일 경우 

SwipeRefreshLayout.setEnabled(true)

다시 동작 할 수 있도록 설정해 주었습니다.

 

그리고 SwipeRefreshLayout을 막는 방법은 touchListener에서도 막을 수 있지만, MpAndroidChart의 OnChartGestureListener에서 onChartGestureStart에서 Enable을 false해주고 onChartGestureEnd에서 Enable을 true로 설정하여 막을 수도 있습니다. 이유는 OnChartGestureListener가 chart 에서 방생하는 제스처에 대한 리스너이고 이곳에서 

onChartGestureStart/onChartGestureEnd/onChartLongPressed/onChartDoubleTapped/onChartSingleTapped/onChartFling/onChartScale/onChartTranslate 이런 동작을 확인 할 수 있기 때문입니다.

 

마지막으로 MPAndroidChart에서 OnChartValueSelectedListener 을 통하여 차프에서 수치를 선택할 경우 그 수치에 대한 데이터를 

onValueSelected(Entry e, Highlight h)를 통하여 확인 할 수 있습니다.

Entry를 통하여 수치에 저장된 데이터를 x축값 y축값(저는 라인차트에서 y축 값이 데이터 값처럼 사용하였습니다.), 그리고 관련 부가 데이터를 확인 할 수 있고, Highlight에서 그 수치의 위치 값을 알 수 있습니다.(px 단위 입니다.)