新人研修の記録5

2018年1月16日
技術情報, Android

こんにちは、Tamamoです。

SQLから取得したデータをグラフ表示させることになりました。
さて、どうしたものか・・・。

よし！AndroidのAPIにそのような機能があるのか探してみよう！
ということで調査したところそんな都合の良いものはなありませんでした。。

そのため、グラフ表示させることのできるライブラリがないかネットで探したところ
「MPAndroidChart」という、PhilJay氏が開発したチャート表示ライブラリがありました！

「折れ線グラフ」「棒グラフ」「円グラフ」「レーダーチャート」「ローソク足チャート」
が表示でき、また、ネット上にHow toが沢山あったのと、
バージョンの更新もされていたのでこれを使ってグラフを表示させてみることにしました。

例として棒グラフを表示させてみます。

導入の仕方は簡単で、Gradleに記述すれば導入できます。
※現時点での最新版はv3.0.3です。
　MPAndroidChartはApache License, Version 2.0 で公開されています。

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

dependencies {
compile ‘com.github.PhilJay:MPAndroidChart:v3.0.3’
}

BarChartを画面に配置するには、レイアウトXMLにBarChartを配置します。

<com.github.mikephil.charting.charts.BarChart
android:id=”@+id/bar_chart”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_margin=”16dp” />

導入は以上です。えっこれだけ！？と思われるかもしれませんが、
これだけです。

あとは、以下のコードを入力します。
少々難しく見えますが、各パラメータを「true」か「false」で設定しているだけなので
パラメータの意味を理解すればあまり難しくありません。
重要な項目はコメントで書いた<<重要：>>というところだけです。

private void setupBarChartView() {
chart = findViewById(R.id.bar_chart);

//データをセットする
ArrayList<BarEntry> entries = new ArrayList<>();
entries.add(new BarEntry(1, 60)); //<<重要：各グラフのデータ>>
entries.add(new BarEntry(2, 30));
entries.add(new BarEntry(3, 10));
List<IBarDataSet> bars = new ArrayList<>();
BarDataSet dataSet = new BarDataSet(entries, “Bar”);

//棒グラフの色をセット
dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
bars.add(dataSet);

//表示データセット
BarData data = new BarData(bars);
chart.setData(data);

//YAxis(Left)
YAxis left = chart.getAxisLeft();
left.setAxisMinimum(0);
left.setAxisMaximum(100);
left.setLabelCount(5);
left.setDrawTopYLabelEntry(true);

//YAxis(Right)
YAxis right = chart.getAxisRight();
right.setDrawLabels(false);
right.setDrawGridLines(false);
right.setDrawZeroLine(true);
right.setDrawTopYLabelEntry(true);

//XAxis
XAxis xAxis = chart.getXAxis();
final String[] labels = {“”,”A”, “B”, “C”}; //<<重要：X軸のラベル>>
xAxis.setValueFormatter(new IndexAxisValueFormatter(labels));
XAxis bottomAxis = chart.getXAxis();
xAxis.setGranularity(1f);
xAxis.setGranularityEnabled(true);
bottomAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
bottomAxis.setDrawLabels(true);
bottomAxis.setDrawGridLines(false);
bottomAxis.setDrawAxisLine(true);

//グラフの設定
chart.setDrawValueAboveBar(true);
chart.getDescription().setEnabled(false);
chart.setClickable(false);
chart.getLegend().setEnabled(false);
chart.setScaleEnabled(false);
chart.animateY(1200, Easing.EasingOption.Linear);
}

こんな感じでグラフが表示されます。