Androidアプリで円グラフを表示する方法！MPAndroidChartを使ったパイチャート実装ガイド

この記事では、Androidアプリで円グラフ（パイチャート）を表示する方法を、定番ライブラリ「MPAndroidChart」を使って解説します。Gradleへの依存関係の追加から、レイアウトの作成、Javaコードによるデータ設定まで、初心者の方でも分かるように順を追って説明していきます。

MPAndroidChartとは？

MPAndroidChartは、Android向けのオープンソースのチャート描画ライブラリです。円グラフだけでなく、折れ線グラフや棒グラフなども簡単に実装でき、多くのAndroid開発者に利用されています。

ステップ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'
}

ポイントは implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha' の一行です。これでMPAndroidChartライブラリをプロジェクトに組み込めます。

ステップ3：build.gradle（アプリケーションレベル）にリポジトリを追加

次に、build.gradle（アプリケーションレベル）を開き、JitPackリポジトリを追加します。これにより、GitHub上で公開されているライブラリを取得できるようになります。

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

allprojectsブロック内の maven { url 'https://jitpack.io' } の記述が重要です。ここを忘れるとライブラリを同期できず、ビルドエラーになります。

ステップ4：activity_main.xmlにPieChartを配置

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

上記のコードでは、円グラフを表示するための PieChart ビューを画面全体に配置しています。

ステップ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.PieChart;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.utils.ColorTemplate;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    PieChart pieChart;
    PieData pieData;
    PieDataSet pieDataSet;
    ArrayList pieEntries;
    ArrayList PieEntryLabels;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pieChart = findViewById(R.id.pieChart);
        getEntries();
        pieDataSet = new PieDataSet(pieEntries, "");
        pieData = new PieData(pieDataSet);
        pieChart.setData(pieData);
        pieDataSet.setColors(ColorTemplate.JOYFUL_COLORS);
        pieDataSet.setSliceSpace(2f);
        pieDataSet.setValueTextColor(Color.WHITE);
        pieDataSet.setValueTextSize(10f);
        pieDataSet.setSliceSpace(5f);
    }
   private void getEntries() {
      pieEntries = new ArrayList<>();
      pieEntries.add(new PieEntry(2f, 0));
      pieEntries.add(new PieEntry(4f, 1));
      pieEntries.add(new PieEntry(6f, 2));
      pieEntries.add(new PieEntry(8f, 3));
      pieEntries.add(new PieEntry(7f, 4));
      pieEntries.add(new PieEntry(3f, 5));
   }
}

コードのポイント

• PieEntry： 各セグメントの値とインデックスを格納するデータクラスです。
• PieDataSet： エントリの集合をまとめ、色やスライス間隔などの見た目を設定します。
• PieData： データセットをPieChartに渡すためのオブジェクトです。
• setColors()： ColorTemplate.JOYFUL_COLORS を指定してカラフルな配色にしています。
• setSliceSpace()： 各セグメント間の余白を指定します。

アプリを実行して結果を確認

それでは、アプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続していることを前提とします。Android Studioでプロジェクトのアクティビティファイルを開き、ツールバーの「Run」アイコンをクリックします。接続したデバイスを選択すると、端末の画面に以下のように円グラフが表示されます。

このように、getEntries() メソッドで設定したデータセットの値に応じて、カラフルな円グラフが正しく描画されていることが確認できます。値やラベルを変更すれば、自分のアプリに合わせた円グラフを自由に作成できますので、ぜひいろいろ試してみてください。