📊 차트 그리기를 위한 준비

안드로이드에서 차트를 그리기 위해서는 여러 가지 방법이 존재한다. 나는 가장 대중적인 MPAndroidChart를 이용해 차트를 그리는 방법을 설명하려고 한다.

가장 먼저 라이브러리를 불러오기 위해서 gradle에 추가해야 할 것들이 있다.

repositories {
    maven { url 'https://jitpack.io' }
}

먼저 위의 코드를 setting.gradle파일에 추가한다.

추가를 하고 난 뒤 다음의 코드를 build.gradle파일에 추가한다. 이 때, 코드 맨 뒤의 3.1.0은 버전을 뜻하는 것이기 때문에 개발자 깃허브에 들어가서 최신 버전을 확인해서 바꾸어 주어야 한다. 또 build.gradle 파일이 2개여서 헷갈릴 수 있는데 Module : ~ 라고 쓰여있는 파일에 추가해야 한다.

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

다음과 같이 추가하고 위의 Sync now 버튼을 반드시 눌러주어야 한다.

💻 기본적인 차트 사용법

위의 단계가 성공적으로 끝났다면 차트를 삽입하고 싶은 xml파일로 이동한 뒤 밑의 코드를 넣으면 차트가 삽입된다. 여기서 높이나 너비, constraint 등은 본인이 원하는대로 변경하면 된다.

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart"
        app:layout_constraintTop_toBottomOf="@id/select_semester"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintLeft_toLeftOf="@id/select_semester"
        app:layout_constraintRight_toRightOf="@id/select_semester" />

그 다음 해당 .xml파일과 관련된 .java 파일이나 .kt 파일로 이동한다. 여기서는 .java를 이용해 차트에 데이터를 추가해려고 한다.

package com.example.android_study;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;

import java.util.LinkedList;

public class MainActivity extends AppCompatActivity {

    private LineChart lineChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        lineChart = (LineChart)findViewById(R.id.chart);
        LineData chartData = new LineData();
        
	// 전체 학점의 x축, y축의 좌표 정보를 저장할 연결리스트 생성
        LinkedList<Entry> allEntries = new LinkedList<Entry>(); 
        
        // 전공 학점의 x축, y축의 좌표 정보를 저장할 연결리스트 생성
        LinkedList<Entry> majorEntries = new LinkedList<Entry>(); 
        
	// x축과 y축의 정보를 담는다.
        allEntries.add(new Entry(1,3.5f)); 
        allEntries.add(new Entry(2,3.83f));
        allEntries.add(new Entry(3,4.19f));
        allEntries.add(new Entry(4,4.17f));

        majorEntries.add(new Entry(1,3.5f));
        majorEntries.add(new Entry(2,3.5f));
        majorEntries.add(new Entry(3,4.12f));
        majorEntries.add(new Entry(4,4.19f));
        
	// LineDataSet이라는 자료형에 전체 전공의 데이터를 담는다.
        LineDataSet allLineDataSet = new LineDataSet(allEntries, "전체 학점"); 
        LineDataSet majorLineDataSet = new LineDataSet(majorEntries, "전공 학점");
        
	// charData에 전체 학점 데이터를 추가한다.
        chartData.addDataSet(allLineDataSet);
        chartData.addDataSet(majorLineDataSet);
        
	// 차트의 데이터를 세팅한다.
        lineChart.setData(chartData);

        lineChart.invalidate();
    }
}

코드가 길어보이지만 별거 없다. 간단하게 원리를 설명해보자면 Entry라는 자료형에 x,y축의 데이터를 저장하고 이를 LineDataSet에 저장하고 다시 LineData 자료형에 이를 추가하고 LineChart에 이 데이터를 세팅하는 것이다.

다음과 같이 차트가 그려지는 것을 알 수 있다. 여러가지 차트의 디테일을 수정하거나 종류를 다르게 하고 싶으면 공식 홈페이지를 참고하거나 구글링을 하면 될 것 같다.