안드로이드에서 꺾은선 차트 그래프 사용하는 방법 – MPAndroidChart 실전 예제

이 튜토리얼에서는 안드로이드 앱에서 꺾은선 차트(Line Chart)를 구현하는 방법을 단계별로 살펴봅니다. 꺾은선 차트는 시간의 흐름에 따른 데이터 변화를 직관적으로 보여줄 때 매우 유용하며, 이번 예제에서는 안드로이드에서 가장 널리 사용되는 오픈소스 차트 라이브러리인 MPAndroidChart를 활용합니다.

구현 단계

1단계: 새 프로젝트 생성

Android Studio에서 File ⇒ New Project 메뉴로 이동한 뒤, 새 프로젝트 생성에 필요한 모든 정보를 입력하여 프로젝트를 만듭니다.

2단계: 모듈 수준 build.gradle에 라이브러리 의존성 추가

모듈 수준의 build.gradle 파일을 열고 아래와 같이 MPAndroidChart 라이브러리 의존성을 추가합니다.

apply plugin: 'com.android.application'
android {
    packagingOptions {
        exclude 'META-INF/proguard/androidx-annotations.pro'
    }
    packagingOptions {
        exclude 'META-INF/DEPENDENCIES'
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/LICENSE.txt'
        exclude 'META-INF/license.txt'
        exclude 'META-INF/NOTICE'
        exclude 'META-INF/NOTICE.txt'
        exclude 'META-INF/notice.txt'
        exclude 'META-INF/ASL2.0'
    }
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
   }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

3단계: 프로젝트 수준 build.gradle에 JitPack 저장소 추가

MPAndroidChart는 JitPack을 통해 배포되므로, 프로젝트 수준 build.gradle의 allprojects 항목에 JitPack 저장소 URL을 반드시 등록해야 합니다.

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
allprojects {
   repositories {
      google()
      jcenter()
      maven { url 'https://jitpack.io' }
   }
}
task clean(type: Delete) {
   delete rootProject.buildDir
}

4단계: 레이아웃 파일 작성

res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:app = "https://schemas.android.com/apk/res-auto"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <com.github.mikephil.charting.charts.LineChart
      android:id = "@+id/lineChart"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>

위 코드에서는 화면 전체에 꺾은선 차트를 표시하기 위해 LineChart 뷰를 배치했습니다.

5단계: MainActivity 코드 작성

src/MainActivity.java 파일에 다음 코드를 추가합니다.

package com.example.andy.myapplication;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
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 com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
   LineChart lineChart;
   LineData lineData;
   LineDataSet lineDataSet;
   ArrayList lineEntries;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      lineChart = findViewById(R.id.lineChart);
      getEntries();
      lineDataSet = new LineDataSet(lineEntries, "");
      lineData = new LineData(lineDataSet);
      lineChart.setData(lineData);
      lineDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
      lineDataSet.setValueTextColor(Color.BLACK);
      lineDataSet.setValueTextSize(18f);
   }
   private void getEntries() {
      lineEntries = new ArrayList<>();
      lineEntries.add(new Entry(2f, 0));
      lineEntries.add(new Entry(4f, 1));
      lineEntries.add(new Entry(6f, 1));
      lineEntries.add(new Entry(8f, 3));
      lineEntries.add(new Entry(7f, 4));
      lineEntries.add(new Entry(3f, 3));
   }
}

핵심 코드를 간단히 정리하면 다음과 같습니다.

• getEntries() 메서드에서 Entry 객체 형태로 차트에 표시할 데이터 포인트를 생성합니다.
• LineDataSet으로 데이터 묶음을 만들고, 이를 LineData에 담아 setData() 메서드로 차트에 적용합니다.
• ColorTemplate.JOYFUL_COLORS로 선의 색상을 지정하고, setValueTextColor()와 setValueTextSize()로 데이터 레이블의 색상과 크기를 조절합니다.

앱 실행 및 결과 확인

이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤 툴바의 Run 아이콘을 클릭하고, 목록에서 자신의 모바일 기기를 선택합니다. 그러면 기기 화면에 아래와 같은 기본 화면이 표시됩니다.

위 결과에서 확인할 수 있듯이, 입력한 데이터 세트 값에 따라 꺾은선 차트가 정상적으로 그려집니다. 이 방식을 응용하면 센서 데이터, 주식 시세, 건강 기록 등 다양한 시계열 데이터를 손쉽게 시각화할 수 있습니다.