【Android】グラフを作成するには?

by

PAK105215431

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

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

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

MPAndroidChart

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

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

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

今回は、6つの要素を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);//値の目盛表記

実行してみる

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

Screenshot_20160622-211429

まとめ

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

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

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

Ryo WATANABE
e.d.aのシステム開発事業部で主にAndroid開発担当。Androidフレームワークを使用したネイティブアプリが得意分野です。カンファレンスや勉強会にちょくちょく参加しながらOSSの開発トレンドにアンテナを張ってます。最近はiOS開発チームにもアサインされ、Swiftでコーディングすることも。

Egg Device Application

東京品川のスマホアプリ開発会社です。
一般アプリ、業務用アプリからVRまで開発可能。

ライター一覧

求人情報

スマホアプリ開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00