Android：グラフ表示で表現豊かに。MPAndroidChart を使ってみよう！

こんにちは。
マネーフォワードでAndroidエンジニアをしています福本です。

今回は、当社Androidアプリでも使用している素敵なグラフライブラリ MPAndroidChart をご紹介したいと思います。

MPAndroidChart

MPAndroidChartライブラリは、円グラフ、棒グラフ、線グラフといった様々なグラフを表示することが可能になるライブラリです。

自前でグラフ表示するとなると大変ですが、こういう素敵なライブラリがあると便利ですね。
ありがたく使わせていただきましょう。
では、導入方法をご紹介します。

導入

※AndroidStudioを使用している前提です。
build.gradleに以下設定を追加すれば、導入完了です！

repositories {
    maven { url "https://jitpack.io" }
}

dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v2.1.5'
}

パイチャートを表示しよう

まずは、パイチャートを表示してみたいと思います。

レイアウト

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.github.mikephil.charting.charts.PieChart
        android:id="@+id/pie_chart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp" />
</LinearLayout>

これで、PieChartを表示する準備ができました！

コード

次は、表示するデータの設定を行いましょう。

    private void createPieChart() {
    PieChart pieChart = (PieChart) findViewById(R.id.pie_chart);

    pieChart.setDrawHoleEnabled(true); // 真ん中に穴を空けるかどうか
    pieChart.setHoleRadius(50f);       // 真ん中の穴の大きさ(%指定)
    pieChart.setHoleColorTransparent(true);
    pieChart.setTransparentCircleRadius(55f);
    pieChart.setRotationAngle(270);          // 開始位置の調整
    pieChart.setRotationEnabled(true);       // 回転可能かどうか
    pieChart.getLegend().setEnabled(true);   //
    pieChart.setDescription("PieChart 説明");
    pieChart.setData(createPieChartData());

    // 更新
    pieChart.invalidate();
    // アニメーション
    pieChart.animateXY(2000, 2000); // 表示アニメーション
}

// pieChartのデータ設定
private PieData createPieChartData() {
    ArrayList<Entry> yVals = new ArrayList<>();
    ArrayList<String> xVals = new ArrayList<>();
    ArrayList<Integer> colors = new ArrayList<>();

    xVals.add("A");
    xVals.add("B");
    xVals.add("C");

    yVals.add(new Entry(20, 0));
    yVals.add(new Entry(30, 1));
    yVals.add(new Entry(50, 2));

    PieDataSet dataSet = new PieDataSet(yVals, "Data");
    dataSet.setSliceSpace(5f);
    dataSet.setSelectionShift(1f);

    // 色の設定
    colors.add(ColorTemplate.COLORFUL_COLORS[0]);
    colors.add(ColorTemplate.COLORFUL_COLORS[1]);
    colors.add(ColorTemplate.COLORFUL_COLORS[2]);
    dataSet.setColors(colors);
    dataSet.setDrawValues(true);

    PieData data = new PieData(xVals, dataSet);
    data.setValueFormatter(new PercentFormatter());

    // テキストの設定
    data.setValueTextSize(12f);
    data.setValueTextColor(Color.WHITE);
    return data;
}

上記設定で、以下のようなPieChartが描けます！
アニメーションの設定も１行で可能です。

バーチャートを表示しよう

次は、バーチャートを表示してみたいと思います。

レイアウト

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <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"
    />
</LinearLayout>

先ほどと違う箇所は、BarChart部分のみですね。

コード

バーチャート用のデータを設定しましょう。

private void createBarChart() {
    BarChart barChart = (BarChart) findViewById(R.id.bar_chart);
    barChart.setDescription("BarChart 説明");

    barChart.getAxisRight().setEnabled(false);
    barChart.getAxisLeft().setEnabled(true);
    barChart.setDrawGridBackground(true);
    barChart.setDrawBarShadow(false);
    barChart.setEnabled(true);

    barChart.setTouchEnabled(true);
    barChart.setPinchZoom(true);
    barChart.setDoubleTapToZoomEnabled(true);

    barChart.setHighlightEnabled(true);
    barChart.setDrawHighlightArrow(true);
    barChart.setHighlightEnabled(true);

    barChart.setScaleEnabled(true);

    barChart.getLegend().setEnabled(true);

    //X軸周り
    XAxis xAxis = barChart.getXAxis();
    xAxis.setDrawLabels(true);
    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
    xAxis.setDrawGridLines(true);
    xAxis.setSpaceBetweenLabels(0);

    barChart.setData(createBarChartData());

    barChart.invalidate();
    // アニメーション
    barChart.animateY(2000, Easing.EasingOption.EaseInBack); 
}

// BarChartの設定
private BarData createBarChartData() {
    ArrayList<BarDataSet> barDataSets = new ArrayList<>();

    // X軸
    ArrayList<String> xValues = new ArrayList<>();
    xValues.add("1月");
    xValues.add("2月");
    xValues.add("3月");
    xValues.add("4月");
    xValues.add("5月");
    xValues.add("6月");

    // valueA
    ArrayList<BarEntry> valuesA = new ArrayList<>();
    valuesA.add(new BarEntry(100, 0));
    valuesA.add(new BarEntry(200, 1));
    valuesA.add(new BarEntry(300, 2));
    valuesA.add(new BarEntry(400, 3));
    valuesA.add(new BarEntry(500, 4));
    valuesA.add(new BarEntry(600, 5));

    BarDataSet valuesADataSet = new BarDataSet(valuesA, "A");
    valuesADataSet.setColor(ColorTemplate.COLORFUL_COLORS[3]);

    barDataSets.add(valuesADataSet);

    // valueB
    ArrayList<BarEntry> valuesB = new ArrayList<>();
    valuesB.add(new BarEntry(200, 0));
    valuesB.add(new BarEntry(300, 1));
    valuesB.add(new BarEntry(400, 2));
    valuesB.add(new BarEntry(500, 3));
    valuesB.add(new BarEntry(600, 4));
    valuesB.add(new BarEntry(700, 5));

    BarDataSet valuesBDataSet = new BarDataSet(valuesB, "B");
    valuesBDataSet.setColor(ColorTemplate.COLORFUL_COLORS[4]);

    barDataSets.add(valuesBDataSet);

    BarData barData = new BarData(xValues, barDataSets);
    return barData;
}

上記設定で、以下のようなBarChartが描けます！
アニメーションのエフェクトもEasing.EasingOption.EaseInBack部分を違う設定にすれば変えられるので、いろいろためしてみるのも楽しいですね！