[Android][Kotlin] RadarChart 레이다 차트, 오각형 그래프 (MPAndroidChart 라이브러리 사용)

 

예전에는 바 그래프 형태로 보여줬던 자료가 이번 업데이트에서 오각형 그래프로 디자인이 바뀌었다.

중심점을 고정하고, 고정되는 부분인 회색 오각형을 각각 다른 사이즈로 4개 그려준 후, 데이터에 따라 달라지는 파란 영역의 오각형을 그려서 올리는 방식으로 구현하려 했다. 따라서 오각형 그리기 라이브러리를 찾아봤으나 육각형만 많고 오각형은 찾을 수가 없었다.

Android Pentagon, Android draw pentagon.. 여러 키워드로 검색을 많이 했는데 참고 할 수 있는 코드를 찾기 쉽지가 않았다.

 

그래서 안드로이드 오픈카톡 고수님들께 질문했고, 캔버스에 onDraw를 사용해서 직접 그리면 된다는 답변을 받았다.

(이 톡방 정말 좋다. 아는 선에서 꼽주지 않고 친절하게 도움 주시는 분들이 많음ㅜㅜ)

여튼 그래서 회색 오각형 4개를 사이즈별로 그려서 얹고, 그 위에 파랑 오각형을 계산해서 그리려했다.

 

직접 그리는법

Canvas  |  Android 개발자  |  Android Developers

drawLine, drawPath를 써보자

A(X, Y), B(X', Y') 와 같이 좌표를 정한 후, drawLine으로 AB선을 이어주는 방식이다. 

 

오각형 좌표구하는법

그래서 먼저 오각형의 좌표를 구하는 방법을 찾아봤다. 

 

Radius of a Regular Polygon - Math Open Reference

How to find the coordinates of the vertices of a pentagon centered at the origin

우리팀 수학천재 디자이너에게 식좀 세워달라고 말했고.. 좌표만 있으면 그리는건 전혀 어렵지 않아 보여서 오늘 퇴근하고 집에가서 해결할 생각이었다. 근데 우리팀 ios 개발자가 내 징징거림을 듣고 슬랙으로 이 차트의 이름을 알려줬고...!

 

 

Android RadarChart로 검색해서 이 라이브러리를 찾았다

 

사용할 라이브러리

PhilJay/MPAndroidChart

좀이따 해봐야지

 

 

참고

[안드로이드] 원형차트(Radar Chart)