Android開発担当ワタナベです。

最近はよくつけ麺を食べに出かけることが多いのですが、食べたつけ麺を自分の評価基準で記録を取っています。

つけ麺評価要素をよりわかりやすく表現するために、グラフで表示してみるのはどうだろうか？

MPAndroidChart

ということで、グラフを作成するAndroidのライブラリを紹介したいと思います。

使用するのはMPAndroidChartというライブラリです。

このライブラリは多種多様のグラフ表示に対応していて、各要素の表示位置や色など細かくカスタマイズすることができます。

今回は、６つの要素をRadar Chartで表示するための手順を紹介したいと思います。

ライブラリをプロジェクトに追加

まずRadar Chartを使うにはMyAndroidChartをプロジェクトでコンパイルする必要があるのでbuild.gradleでプロジェクトにライブラリを追加しましょう

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

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

レイアウトを作成

レイアウトを作成します。xmlに定義します。

<com.github.mikephil.charting.charts.RadarChart
    android:id="@+id/chart"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

初期化

ActivityもしくはFragmentでRadarChartを初期化します。

//初期化
RadarChart chart = (RadarChart) findViewById(R.id.chart);

軸における値を設定する

グラフに表示される値を設定していきます。ここで設定した順番とラベルを設定するときの順番が関連づけされます。

Entryを初期化し、値と表示される順番を引数にセットします。

        ArrayList<Entry> entries = new ArrayList<>();
        int[] own = {3,4,3,4,3,5};
        entries.add(new Entry(own[0], 0));
        entries.add(new Entry(own[1], 1));
        entries.add(new Entry(own[2], 2));
        entries.add(new Entry(own[3], 3));
        entries.add(new Entry(own[4], 4));
        entries.add(new Entry(own[5], 5));

        int[] average = {5,3,4,2,4,4};
        ArrayList<Entry> entries2 = new ArrayList<>();
        entries2.add(new Entry(average[0], 0));
        entries2.add(new Entry(average[1], 1));
        entries2.add(new Entry(average[2], 2));
        entries2.add(new Entry(average[3], 3));
        entries2.add(new Entry(average[4], 4));
        entries2.add(new Entry(average[5], 5));

値と各種設定を関連付ける

グラフの色と設定した文字が関連し、表示されているグラフの内容を設定することができます。

        RadarDataSet dataSet1 = new RadarDataSet(entries, "自分の評価");
        RadarDataSet dataSet2 = new RadarDataSet(entries2, "全国平均");

色と塗りつぶしを設定する

グラフの色の設定はRadarDataSet#setColor()を使用します。

        dataSet1.setColor(Color.RED);
        dataSet1.setDrawFilled(true);
        dataSet2.setColor(Color.CYAN);
        dataSet2.setDrawFilled(true);

表示する情報をまとめるRadarDataに登録するRadarDataSetの配列を作成する

        ArrayList<RadarDataSet> dataSets = new ArrayList<RadarDataSet>();
        dataSets.add(dataSet2);
        dataSets.add(dataSet1);

グラフのラベルを設定する

ここで設定した文言がグラフに表示されます。

        ArrayList<String> labels = new ArrayList<String>();
        labels.add("盛付");
        labels.add("スープ");
        labels.add("接客");
        labels.add("中毒性");
        labels.add("店内");
        labels.add("麺");

Viewに設定する

        RadarData data = new RadarData(labels, dataSets);
        chart.setData(data);//データを設定
        chart.setDescription("脚注が表示される");
        chart.setRotationEnabled(false);//ドラックすると回転するので制御する
        chart.invalidate();//チャートの表示を更新したいときに呼ぶ
        chart.getYAxis().setDrawLabels(false);//値の目盛表記

実行してみる

いい感じで表示できました！

まとめ

今回は、MPAndroidChartというライブラリをつかってデータをグラフ化しました。

グラフ化することでユーザーにより視覚的に情報を伝えることができるため、UX（ユーザー体験）が向上しアプリがより良いものになると言ってもいいでしょう。

アプリ開発で、何かユーザーにわかりやすく伝えたい情報があるならグラフで表示することを検討してもいいかもしれませんね！