본문 바로가기

IT/안드로이드 관련

[안드로이드] MPAndroidChart LineChart 속성 정리 (Example)

안녕하세요 YTS 입니다.

오늘은 Chart 라이브러리의 끝판왕 MPAndroidChart 속성에 대해 적어보려합니다.


사실은 자꾸 할때마다 속성을 잃어버려서요.... ㅎㅎㅎㅎ


우선 https://github.com/PhilJay/MPAndroidChart 여기서 소스를 받으실수 있습니다.


사용법은 정말 간단하면서도 헷갈리네요!


1. XML

<com.github.mikephil.charting.charts.LineChart
android:id="@+id/line_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_margin="16dp" />

2. JAVA

private void setChart(List<Record> records) {
LineChart lineChart = binding.lineChart;
lineChart.invalidate(); //차트 초기화 작업
lineChart.clear();

ArrayList<Entry> values = new ArrayList<>();//차트 데이터 셋에 담겨질 데이터

for (Record record : records) { //values에 데이터를 담는 과정
long dateTime = record.getDateTime();
float weight = (float) record.getWeight();
values.add(new Entry(dateTime, weight));
}

/*몸무게*/
LineDataSet lineDataSet = new LineDataSet(values, getString(R.string.weight)); //LineDataSet 선언
lineDataSet.setColor(ContextCompat.getColor(getContext(), R.color.purple)); //LineChart에서 Line Color 설정
lineDataSet.setCircleColor(ContextCompat.getColor(getContext(), R.color.purple)); // LineChart에서 Line Circle Color 설정
lineDataSet.setCircleHoleColor(ContextCompat.getColor(getContext(), R.color.purple)); // LineChart에서 Line Hole Circle Color 설정

LineData lineData = new LineData(); //LineDataSet을 담는 그릇 여러개의 라인 데이터가 들어갈 수 있습니다.
lineData.addDataSet(lineDataSet);

lineData.setValueTextColor(ContextCompat.getColor(getContext(), R.color.textColor)); //라인 데이터의 텍스트 컬러 설정
lineData.setValueTextSize(9);

XAxis xAxis = lineChart.getXAxis(); // x 축 설정
xAxis.setPosition(XAxis.XAxisPosition.TOP); //x 축 표시에 대한 위치 설정
xAxis.setValueFormatter(new ChartXValueFormatter()); //X축의 데이터를 제 가공함. new ChartXValueFormatter은 Custom한 소스
xAxis.setLabelCount(5, true); //X축의 데이터를 최대 몇개 까지 나타낼지에 대한 설정 5개 force가 true 이면 반드시 보여줌
xAxis.setTextColor(ContextCompat.getColor(getContext(), R.color.textColor)); // X축 텍스트컬러설정
xAxis.setGridColor(ContextCompat.getColor(getContext(), R.color.textColor)); // X축 줄의 컬러 설정

YAxis yAxisLeft = lineChart.getAxisLeft(); //Y축의 왼쪽면 설정
yAxisLeft.setTextColor(ContextCompat.getColor(getContext(), R.color.textColor)); //Y축 텍스트 컬러 설정
yAxisLeft.setGridColor(ContextCompat.getColor(getContext(), R.color.textColor)); // Y축 줄의 컬러 설정

YAxis yAxisRight = lineChart.getAxisRight(); //Y축의 오른쪽면 설정
yAxisRight.setDrawLabels(false);
yAxisRight.setDrawAxisLine(false);
yAxisRight.setDrawGridLines(false);
//y축의 활성화를 제거함

lineChart.setVisibleXRangeMinimum(60 * 60 * 24 * 1000 * 5); //라인차트에서 최대로 보여질 X축의 데이터 설정
lineChart.setDescription(null); //차트에서 Description 설정 저는 따로 안했습니다.

Legend legend = lineChart.getLegend(); //레전드 설정 (차트 밑에 색과 라벨을 나타내는 설정)
legend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);//하단 왼쪽에 설정
legend.setTextColor(ContextCompat.getColor(getContext(), R.color.textColor)); // 레전드 컬러 설정

lineChart.setData(lineData);
}


3. 완성 View 



후 생각보다 복잡하네요!


댓글과 공감은 작성자에게 큰힘이 됩니다. 마지막으로 저의 글을 읽어주셔서 감사합니다.