안드로이드에서 산점도(Scatter Chart) 그래프를 사용하는 방법

이 예제에서는 안드로이드에서 산점도(Scatter Chart) 그래프를 구현하고 활용하는 방법을 단계별로 알아봅니다. 산점도는 두 변수 간의 관계나 데이터 분포를 시각적으로 파악할 때 유용한 차트 유형입니다.

1단계: 새 프로젝트 생성

Android Studio에서 File → New Project로 이동한 후, 필요한 모든 정보를 입력하여 새 프로젝트를 생성합니다.

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

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

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 설정

애플리케이션(최상위) 수준의 build.gradle 파일을 열고, JitPack 저장소를 추가하여 MPAndroidChart 라이브러리를 가져올 수 있도록 설정합니다.

// 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단계: 레이아웃 파일(activity_main.xml) 작성

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.ScatterChart
      android:id = "@+id/scatterChart"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent" />
</android.support.constraint.ConstraintLayout>

위 코드에서는 산점도 차트를 화면에 표시하기 위해 ScatterChart 뷰를 배치했습니다.

5단계: MainActivity.java 코드 작성

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.ScatterChart;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.ScatterData;
import com.github.mikephil.charting.data.ScatterDataSet;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    ScatterChart scatterChart;
    ScatterData scatterData;
    ScatterDataSet scatterDataSet;
    ArrayList scatterEntries;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        scatterChart = findViewById(R.id.scatterChart);
        getEntries();
        scatterDataSet = new ScatterDataSet(scatterEntries, "");
        scatterData = new ScatterData(scatterDataSet);
        scatterChart.setData(scatterData);
        scatterDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        scatterDataSet.setValueTextColor(Color.BLACK);
        scatterDataSet.setValueTextSize(18f);
    }
    private void getEntries() {
        scatterEntries = new ArrayList<>();
        scatterEntries.add(new BarEntry(2f, 0));
        scatterEntries.add(new BarEntry(4f, 1));
        scatterEntries.add(new BarEntry(6f, 1));
        scatterEntries.add(new BarEntry(8f, 3));
        scatterEntries.add(new BarEntry(7f, 4));
        scatterEntries.add(new BarEntry(3f, 3));
    }
}

앱 실행 및 결과 확인

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

위 실행 결과에서 확인할 수 있듯이, 우리가 설정한 데이터셋 값에 따라 산점도 차트가 정상적으로 출력됩니다. 각 점은 getEntries() 메서드에서 추가한 좌표값을 나타내며, JOYFUL_COLORS 색상 테마가 적용되어 시각적으로 구분하기 쉽습니다.