본문으로 바로가기

[안드로이드]그래프 만들기(MPAndroidChart)

category Android 2017. 11. 27. 13:45

오늘은 안드로이드에 그래프를 그려보겠습니다.


그래프를 만드는데는 다양한 방법이있습니다. 이번에 만들 그래프 라이브러리는 MPAndroidChart 입니다.


깃허브 : https://github.com/PhilJay/MPAndroidChart


MPAndroidChart 외에도 AChartEngine 등이 있지만 AChartEngine 보다 MPAndroidChart 가 약간 무겁지만 여러가지 애니매이션효과, 기능들이 있어 훨씬 보기에 좋습니다. 안드로이드 개발은 기능도기능이지만 보여지는 뷰가 좋아야 한다고 생각하기 때문에 MPAndroidChart 를 사용하는것이 좋아보입니다.


그럼 MPAndroidChart 사용법에 대해 간단히 알아보겠습니다. 해당 깃허브를 가면 모든것을 알 수 있지만 여기서 간단히 꺾은선 그래프를 만들어 보겠습니다. (깃허브에는 꺾은선그래프 외에도 원형, 막대 , 등등 여러가지 애니매이션과 모양의 그래프를 사용해볼수 있습니다.)


먼저 그래프를 그려볼 안드로이드 스튜디오 프로젝트를 생성합니다. 그리고 build.gradle 에 MPAndroidChart 를 추가합니다.


1.build.gradle 에 MPAndroidChart 의존 추가


MPAndroidChart 를 사용하기 위해 build.gradle 에 MPAndroidChart를 compile해 주어야 합니다. 그전에 MPAndroidChart를 repositories해 주어야합니다. 

repositories 는 메이븐 repositories를 이용해 라이브러리를 관리하는 gradle 라이브러리 입니다.

dependencies 에 MPAndroidChart 를 추가해주고 repositories는 없다면 새로 만들어 줍니다.


2.activity 에 Chart 추가


MPAndroidChart 를 추가하였으면 액티비티에 차트를 추가합니다.


샘플용 차트 프로젝트라 가로세로 사이즈를 모두 match_parent 로 주었습니다. 사용자에 맞게 설정 하시면 됩니다.


3.Chart세부 설정


차트설정을 하기위해 java class 파일을 수정합니다. (본 프로젝트에서는 MainActivity)

1. LineChart 를 find해옵니다.

2. 리스트에 Entry 타입을 선언합니다. Entry타입 list는 그래프의 x축, y 축 값을 설정 할 수 있습니다. add(new Entry(x축1칸당 값, y값))

3. DataSet을 만듭니다. DataSet에 위에만든 Entry를 넣습니다. 그리고 그래프의 선색, 포인트지점의 원색, 등을 설정 할 수 있습니다.

4. XAxis, YAxis 로 x축속성, y축 속성을 설정 할 수 있습니다. (포지션, 색상 등)

5. 라인차트에 효과를 줄 수 있습니다. (차트 드래그,더블클릭,줌 효과, 애니매이션 효과 등)


이렇게 해서 간단한 꺾은선 그래프를 만들 수 있습니다.


하지만 이렇게 만들어진 그래프의 각 포인터지점 값을 알기 힘듭니다.


그래서 우리는 MarkerView 를 만들어 적용시킵니다. MarkerView 는 각 지점을 클릭했을시 그 지점의 데이터를 보여줍니다.


4. MarkerView 클래스 만들기.


5. MarkerView 레이아웃 만들기


마커뷰 레이아웃은 표시될 데이터의 폰트,색상 등을 지정해 줄 수 있습니다.


텍스트뷰 하나를 만듭니다.


6. LineChart 에 붙이기


만든 마커뷰를 라인차트에 붙입니다.


이렇게 만들어진 그래프입니다.


각 지점을 클릭하면 데이터를 보여줍니다.


이렇게 MPAndroidChart 를 이용하여 간단한 꺾은선 그래프를 만들어 보았습니다.


간단히 만든거라 허접하지만 다양한 옵션과 속성을 건드려보시면 더 깔끔하고 보기좋은 그래프를 만들 수 있습니다.




댓글을 달아 주세요

  1. ㅇㅇ 2019.05.21 16:15

    라디오버튼이 2개(1,2) 있는데 처음에 디폴트로 1번을 클릭해놔서 차트화면 가면 바로 1번데이터가 뜨는데
    2번을 클릭하면 데이터 갱신이 안돼요

  2. 현철 2020.04.01 15:14

    마커에 표시할 수 있는 데이터는 X, Y값밖에 없나요? 날짜와 같이 Y값에 따라 마커표시를 다르게 주고싶은데 Class를 전달 받는 방법이 있을까요.

  3. BlogIcon 안스배우자 2021.05.13 17:11 신고

    x축값을 문자열로 어떻게 바꿀 수 있나요?? 그리고 y값에 kW 같은 단위를 넣고 싶은데 어떡하나요??