Androidで歩数のグラフを表示しよう
こんにちは。エニセンスのAndroidエンジニアの鐘ヶ江です。
今日はAndroidで様々なグラフを描画する方法に付いて記してみます。
家計簿や歩数計などのデータを蓄積するアプリでは過去のデータを見せる必要があると思いますが、テキストのリストだけでは直感的に分かり辛いといった問題があります。
そこで分かりやすく見せる手段の１つとしてデータをグラフで表示したいと思います。
とは言え1からグラフを作るのは大変なのでいけてるライブラリを使わせて頂きます！
今回ご紹介するのはこちらのライブラリ、「MPAndroidChart」 です。
MPAndroidChart library demo
データをインプットするだけで様々な形式のグラフを描画してくれる優れものです。
導入
gradleでの導入が前提です。
app:moduleに以下を追加して下さい。
|
1 2 3 4 5 6 7 |
repositories { maven { url "https://jitpack.io" } } dependencies { compile 'com.github.PhilJay:MPAndroidChart:v2.1.0' } |
LayoutInclude
以下の階層にレイアウト群が入っているので好みの物をxmlで宣言します。
com.github.mikephil.charting.charts.*
今回はレーダーチャートを表示してみようと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.github.mikephil.charting.charts.RadarChart android:id="@+id/readrChart" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
layoutはこれだけです！
実装
まずは表示するデータが必要なので用意しましょう。
元となるデータは紙面の都合上用意されているものとします。
今回は棒グラフで表示したいと思います。
歩数の記録しているRunningDataクラスは以下のようなメソッドが用意されています。
|
1 2 |
//引数の月と日をから歩数を取得する + getMileage(int month,int day); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
BarChart mBarChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bar_chart); mBarChart = (BarChart) findViewById(R.id.bar_chart); //右側に出る要素名を表示しない mBarChart.getAxisRight().setEnabled(false); //表示される値の最小値、最大値、0から表示しないように設定する mBarChart.getAxisLeft().setAxisMaxValue(10000f); mBarChart.getAxisLeft().setAxisMinValue(3000f); mBarChart.getAxisLeft().setStartAtZero(false); entry(); } private void entry() { RunningData data = new RunningData(); List<BarEntry> entryList = new ArrayList<>(); //グラフの要素の名前,今回は日付け List<String> xVals = new ArrayList<>(); for (int i = 0; i < 31; i++) { xVals.add("" + (i + 1)); //1月分のデータを日付け毎に取得しています entryList.add(new BarEntry(data.getMileage(1, i), i)); } //データに名前をつける BarDataSet set1 = new BarDataSet(entryList, "1月の歩数記録"); set1.setColor(Color.RED); //最終的に入れるデータ List<BarDataSet> sets = new ArrayList<>(); sets.add(set1); setGraphData(xVals, sets); } private void setGraphData(List<String> values, List<BarDataSet> set) { BarData data = new BarData(values, set); mBarChart.setData(data); //グラフを再描画する mBarChart.invalidate(); } |
—
結果が以下の様になります！
綺麗なグラフで表示されると
テンション上がりますね↑↑
オマケ
またレーダーチャートや円グラフ等で描画する事も可能なのでお試し下さい。
アニメーションも一行でやってくれたりします
|
1 |
mBarChart.animateY(3000, Easing.EasingOption.EaseOutQuad); |
ただMPAndroidChartが存在するだけで
この程度の事が可能です。いかがでしょうか皆様方？
快適なandroidライフをお楽しみ下さい。
エニセンスでは、このようなライブラリを使い倒したいエンジニアやデザイナーを募集しています。まずは会社見学から！という方もぜひぜひ。
こちらからご応募ください。
こちらからご応募ください。
今月のオススメアプリ♪
関連記事
