이전 게시글에서 언급했던 "MPAndroidChart"로 선 그래프를 만들고, 커스텀해보는 작업을 거쳤다. 역시나 구글링의 도움을 받아가며 그래도 나름 사용 방법을 익힐 수 있었다. 누군가 또 검색을 할테니... 내가 겪은 과정을 나름 정리해봤다.
프로그래밍을 하다 보면 외부 라이브러리를 공부하고 사용하는 일이 빈번하게 발생할텐데, 학습과정을 익힌 것 같아 뿌듯하다. 생각보다 어려워서 당황스럽기도 하고.. 공식 문서가 있긴 한데, 이것만 보고 하기는 어려울 것 같다.
https://javadoc.jitpack.io/com/github/PhilJay/MPAndroidChart/v3.1.0/javadoc/
(심지어 ⬇️얘는 갑자기 접속도 안 되네...)
https://weeklycoding.com/mpandroidchart/

1. 그래프 객체 생성

// LineChart 선언 (종류는 다양한데, 여기서는 선형 그래프인 LineChart를 사용해보자)
LineChart chart;

// XML에서 생성해둔 View를 id를 통해 연결
chart = (LineChart) findViewById(R.id.chart);

2. 그래프 스타일 커스텀하기

1) 전체적인 스타일

// 배경 색 (Adobe에서 색상조합표를 찾아보고 RGB 값을 따 왔음)
chart.setBackgroundColor(Color.rgb(254,247,235));
// description 표시하지 않기
chart.getDescription().setEnabled(false);
// 그래프 터치 가능
chart.setTouchEnabled(true);
// X축으로 드래그 가능
chart.setDragXEnabled(true);
// Y축으로 드래그 불가능
chart.setDragYEnabled(false);
// 확대 불가능
chart.setScaleEnabled(false);
// pinch zoom 가능 (손가락으로 확대축소하는거)
chart.setPinchZoom(true);

// 최대 x좌표 기준으로 몇개를 보여줄지 (최소값, 최대값)
chart.setVisibleXRange(5, 5);
// 가장 최근에 추가한 데이터의 위치로 이동처리
chart.moveViewToX(dataSet.getEntryCount());

2) 축 스타일

- X축

// X축 레퍼런스 가져오기
XAxis xAxis;
xAxis = chart.getXAxis();
// X축을 그래프 아래로 위치하기
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
// 레이블 텍스트 사이즈
xAxis.setTextSize(10);
// 레이블 텍스트 색 
xAxis.setTextColor(Color.BLACK);
// 축 색 
xAxis.setAxisLineColor(Color.BLACK);
// 그래프 뒷 배경의 그리드 표시하지 않기
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);
// 레이블 간격 : 1로 하면 1단위로 레이블 생김
// xAxis.setSpaceMax(1f);
// xAxis.setSpaceMin(1f);
// 축을 숫자가 아니라 날짜로 표시 🤪 이 부분은 많이 헤맸는데... 추후 자세한 설명 글을 작성할 예정임!
xAxis.setValueFormatter(new IndexAxisValueFormatter(List_localDateStr));
// 축 레이블 표시 간격 : 2로 하면 2칸마다 레이블 표시
// xAxis.setGranularity(2f);
// xAxis.setGranularityEnabled(true);

- Y축

YAxis yAxis;
yAxis = chart.getAxisLeft();
chart.getAxisRight().setEnabled(false);
xAxis.setTextSize(10);
yAxis.setTextColor(Color.BLACK);
yAxis.setAxisLineColor(Color.BLACK);
yAxis.setDrawAxisLine(false);
yAxis.setDrawGridLines(false);
yAxis.setAxisMaximum(1f);
yAxis.setAxisMinimum(0f);
// yAxis.setSpaceMax(0.2f);
// yAxis.setSpaceMin(0.2f);

3) 데이터 스타일

데이터 스타일을 다루기 전에, 우선 데이터가 있긴 해야 한다.

// 리스트를 하나 만들고
List<Entry> happyEntries = new ArrayList<Entry>();
// x, y 값을 넣은 Entry를 만들어서 리스트에 넣어준다. (예시로 아무거나 넣은 거다)
happyEntries.add(new Entry(1, 0.5))
happyEntries.add(new Entry(2, 0.4))

그 다음 스타일 변경하기

// DataSet 생성 - 기존에 생성해 둔 Entry 리스트를 가져와서 "기쁨"이라는 범주로 묶어서 DataSet를 만들기
LineDataSet dataSet = new LineDataSet(happyEntries, "기쁨");
// 선 색
dataSet.setColor(Color.rgb(251,99,118));
// 데이터 수치 텍스트 색  
dataSet.setValueTextColor(Color.rgb(251,99,118));
// 데이터 수치 텍스트 사이즈 
dataSet.setValueTextSize(10);
// 선 굵기
dataSet.setLineWidth(2);
// 데이터 표시 원 색
dataSet.setCircleColor(Color.BLACK);
// 데이터 표시 원 둘레 굵기
// dataSet.setCircleRadius(2);

3. 그래프에 데이터 연결

// 위에서 설정한 DataSet을 Data로 만들고, 그래프에 연결하기
LineData lineData = new LineData(dataSet);
chart.setData(lineData);

휴.. 이게 어플을 제작 중에 라이브러리를 가져와서 사용한 거라, 설명하기가 쉽지 않네 생각보다...
내가 봐도 처음 찾아보는 사람은 이해하기 어려울 거 같긴 한데... 나중에 조금씩 부연 설명을 추가해봐야지.