[Android] MPAndroidChart で簡単チャート表示

Android

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Android のアプリを開発していると円グラフや棒グラフなどのチャートを表示したい時ありますよね。今回はそんな時に使える便利なライブラリ、MPAndroidChartをご紹介します。

mp-android-06

サンプルアプリのソースコードは GitHub で公開しています。お急ぎの方はこちらを参照してください。

MPAndroidChart とは

PhilJay氏によるチャート表示ライブラリです。Apache License 2.0 で公開されています。以前弊社のブログで iOS アプリでチャートを表示するためのライブラリ「Charts」をご紹介しましたが、MPAndroidChart はこちらの元となっているライブラリです。

チャートの例

デモアプリが Google Play Store で公開されていますので、手元ですぐに動作確認したい場合はダウンロードしてみてください。

Google Play で手に入れよう

例えば以下のようなチャートを表示することができます。

折れ線グラフ

mp-android-01

棒グラフ

mp-android-02

円グラフ

mp-android-03

ローソク足チャート

mp-android-04

レーダーチャート

mp-android-05

他にも積み上げ棒グラフやバブルチャートなども表示することができます。 どんなチャートが表示できるかはデモ用ソースコードも公開されていますのでそちらをご覧ください。

導入方法

Gradle を使用すれば簡単に導入できます。build.gradledependenciescom.github.PhilJay:MPAndroidChart:v2.2.5 を記載して Sync するだけです *1

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v2.2.5'
}

円グラフを表示してみた

デモ用ソースコードを参考に円グラフを表示してみました。

PieChart を配置

Android プロジェクトを新規に作成し、レイアウト XML に PieChart を配置します *2

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.github.mikephil.charting.charts.PieChart
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:margin="20dp" />

</RelativeLayout>

円グラフのセットアップ

以下のようなメソッドを作ってみました。

private void setupPieChartView() {
    mPieChart.setUsePercentValues(true);
    mPieChart.setDescription("チャートの説明");

    Legend legend = mPieChart.getLegend();
    legend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);

    // 円グラフに表示するデータ
    List<Float> values = Arrays.asList(40f, 30f, 20f, 10f);
    List<Entry> entries = new ArrayList<>();
    for (int i = 0; i < 4; i++) {
        entries.add(new Entry(values.get(i), i));
    }

    PieDataSet dataSet = new PieDataSet(entries, "チャートのラベル");
    dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
    dataSet.setDrawValues(true);

    List<String> labels = Arrays.asList("A", "B", "C", "D");
    PieData pieData = new PieData(labels, dataSet);
    pieData.setValueFormatter(new PercentFormatter());
    pieData.setValueTextSize(12f);
    pieData.setValueTextColor(Color.WHITE);

    mPieChart.setData(pieData);
}

PieDataSet#setColors で円グラフの要素の色を指定しています。今回はテンプレートとして用意されている色の1つ、 ColorTemplate.COLORFUL_COLORS を使用しています。

実行すると、以下のような円グラフが表示されました。

mp-android-06

ソースコードは GitHub で公開しています。ぜひ参考にしてください。

まとめ

対応しているチャートの種類も多く、オプションも豊富なため、結構活用シーンがあるのではないでしょうか。こういうライブラリが公開されているのは非常にありがたいですね。

脚注

  1. v3.0.0 beta が公開されていますが、レジェンドが配置場所によって表示されないなど不具合があったので諦めました。もしバージョンアップを考えられているのであれば、書き方が少し変わっている点にご留意ください。
  2. 他にも各チャートに対応したカスタムビュー (RadarChart など) が用意されています。