Androidで散布図（スキャッターチャート）を表示する方法を徹底解説！

本記事では、Androidアプリで散布図（スキャッターチャート）グラフを表示する方法を、人気のチャートライブラリ「MPAndroidChart」を利用したサンプルコードとともに解説します。

実装手順

ステップ1：Android Studioで新規プロジェクトを作成

Android Studioを起動し、「File」→「New Project」から新しいプロジェクトを作成します。必要な項目をすべて入力してプロジェクトを生成しましょう。

ステップ2：モジュールレベルのbuild.gradleにライブラリを追加

モジュールレベルのbuild.gradleを開き、packagingOptionsの設定と、dependenciesブロックに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リポジトリを追加

続いて、プロジェクト（トップ）レベルのbuild.gradleを開き、allprojects内のrepositoriesにJitPackのURLを追加します。MPAndroidChartはJitPack経由で配信されているため、この設定が必須です。

// 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));
   }
}

コードのポイント

• ScatterChart：散布図を描画するビューです。レイアウトXMLに配置し、findViewById()で取得します。
• BarEntry：X値・Y値のペアを持つデータポイントです。getEntries()メソッド内で複数の座標をArrayListに格納しています。
• ScatterDataSet／ScatterData：データセットにスタイルを設定し、チャート本体へsetData()で渡すことでグラフが描画されます。
• ColorTemplate.JOYFUL_COLORS：カラフルな配色テンプレートで、ポイントごとに異なる色を自動的に適用できます。

アプリの実行と動作確認

それではアプリを実行してみましょう。あらかじめ実機のAndroid端末をパソコンに接続しておいてください。Android Studioでプロジェクト内のアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。接続した端末を選択すると、スマートフォンの画面に以下のように散布図が表示されます。

上記の実行結果では、データセットとして登録した値をもとに、散布図が正しく描画されていることが確認できます。

補足

本記事のコードはsupport library時代のサンプルですが、最近のプロジェクトではAndroidXへの移行が必要になる場合があります。また、MPAndroidChartはv3.1.0以降の安定版も公開されているため、環境に合わせてバージョンを読み替えて利用してください。