スタッフブログ

STAFF BLOG

アプリ開発日誌

2016.06.24

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

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(ユーザー体験)が向上しアプリがより良いものになると言ってもいいでしょう。

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

BACK

お問合せ

イーディーエーに興味をお持ちいただいて
ありがとうございます!
スマホアプリに関するご相談、
お見積りや弊社へのご質問など、
お気軽にお問い合わせください。
担当者より折り返しご連絡させていただきます。

    お名前必須
    会社名
    メールアドレス必須
    電話番号必須
    お問合わせ種別必須
    お問合わせ内容必須

    アンケートにご協力ください。
    弊社サイトへはどのようにしてアクセスされましたか?

    個人情報のお取扱いに関する同意事項

    1.事業者の氏名又は名称

    株式会社イーディーエー

    2.個人情報保護管理者の氏名又は職名、所属及び連絡先

    個人情報保護管理者 小宮 保人
    Mail:[email protected]

    3.取得した個人情報の利用目的

    当フォームで取得した個人情報は、お問い合わせに関する回答のために利用し、目的外利用はいたしません。

    4.弊社が取得した個人情報の第三者への委託、提供について

    弊社は、ご本人に関する情報をご本人の同意なしに第三者に委託または提供することはありません。

    5.個人情報保護のための安全管理

    弊社は、ご本人の個人情報を保護するための規程類を定め、従業者全員に周知・徹底と啓発・教育を図るとともに、その遵守状況の監査を定期的に実施いたします。
    また、ご本人の個人情報を保護するために必要な安全管理措置の維持・向上に努めてまいります。

    6.個人情報の開示・訂正・利用停止等の手続

    ご本人が、弊社が保有するご自身の個人情報の、利用目的の通知、開示、内容の訂正、追加又は削除、利用の停止、消去及び第三者への提供の停止を求める場合には、下記に連絡を頂くことで、対応致します。

    株式会社イーディーエー 個人情報お問合せ窓口
    〒106-0032 東京都港区六本木7丁目14番23 ラウンドクロス六本木4F
    TEL:03-5422-7524 FAX:03-5422-7534
    Mail:[email protected]

    7.ご提供いただく情報の任意性

    個人情報のご提供は任意ですが、同意を頂けない場合には、第3項にあります利用目的が達成できない事をご了承いただくこととなります。

    8.弊社Webサイトの運営について

    弊社サイトでは、ご本人が弊社Webサイトを再度訪問されたときなどに、より便利に閲覧して頂けるよう「クッキー(Cookie)」という技術を使用することがあります。これは、ご本人のコンピュータが弊社Webサイトのどのページに訪れたかを記録しますが、ご本人が弊社Webサイトにおいてご自身の個人情報を入力されない限りご本人ご自身を特定、識別することはできません。
    クッキーの使用を希望されない場合は、ご本人のブラウザの設定を変更することにより、クッキーの使用を拒否することができます。その場合、一部または全部のサービスがご利用できなくなることがあります。