この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
Android のアプリを開発していると円グラフや棒グラフなどのチャートを表示したい時ありますよね。今回はそんな時に使える便利なライブラリ、MPAndroidChartをご紹介します。
サンプルアプリのソースコードは GitHub で公開しています。お急ぎの方はこちらを参照してください。
MPAndroidChart とは
PhilJay氏によるチャート表示ライブラリです。Apache License 2.0 で公開されています。以前弊社のブログで iOS アプリでチャートを表示するためのライブラリ「Charts」をご紹介しましたが、MPAndroidChart はこちらの元となっているライブラリです。
チャートの例
デモアプリが Google Play Store で公開されていますので、手元ですぐに動作確認したい場合はダウンロードしてみてください。
例えば以下のようなチャートを表示することができます。
折れ線グラフ
棒グラフ
円グラフ
ローソク足チャート
レーダーチャート
他にも積み上げ棒グラフやバブルチャートなども表示することができます。 どんなチャートが表示できるかはデモ用ソースコードも公開されていますのでそちらをご覧ください。
導入方法
Gradle を使用すれば簡単に導入できます。build.gradle
の dependencies
に com.github.PhilJay:MPAndroidChart:v2.2.5
を記載して Sync するだけです *1。
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
dependencies {
compile 'com.github.PhilJay:MPAndroidChart:v2.2.5'
}
円グラフを表示してみた
デモ用ソースコードを参考に円グラフを表示してみました。
PieChart を配置
Android プロジェクトを新規に作成し、レイアウト XML に PieChart
を配置します *2。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.PieChart
android:layout_width="match_parent"
android:layout_height="match_parent"
android:margin="20dp" />
</RelativeLayout>
円グラフのセットアップ
以下のようなメソッドを作ってみました。
private void setupPieChartView() {
mPieChart.setUsePercentValues(true);
mPieChart.setDescription("チャートの説明");
Legend legend = mPieChart.getLegend();
legend.setPosition(Legend.LegendPosition.BELOW_CHART_LEFT);
// 円グラフに表示するデータ
List<Float> values = Arrays.asList(40f, 30f, 20f, 10f);
List<Entry> entries = new ArrayList<>();
for (int i = 0; i < 4; i++) {
entries.add(new Entry(values.get(i), i));
}
PieDataSet dataSet = new PieDataSet(entries, "チャートのラベル");
dataSet.setColors(ColorTemplate.COLORFUL_COLORS);
dataSet.setDrawValues(true);
List<String> labels = Arrays.asList("A", "B", "C", "D");
PieData pieData = new PieData(labels, dataSet);
pieData.setValueFormatter(new PercentFormatter());
pieData.setValueTextSize(12f);
pieData.setValueTextColor(Color.WHITE);
mPieChart.setData(pieData);
}
PieDataSet#setColors
で円グラフの要素の色を指定しています。今回はテンプレートとして用意されている色の1つ、 ColorTemplate.COLORFUL_COLORS
を使用しています。
実行すると、以下のような円グラフが表示されました。
ソースコードは GitHub で公開しています。ぜひ参考にしてください。
まとめ
対応しているチャートの種類も多く、オプションも豊富なため、結構活用シーンがあるのではないでしょうか。こういうライブラリが公開されているのは非常にありがたいですね。