Androidアプリ開発

MPAndroidChart 円グラフの実装

この記事は約11分で読めます。
記事内に広告が含まれています。
スポンサーリンク

この記事は Android スマホ用のアプリ開発の中で、
今後の開発で再使用性が高いと思われるコーディングをまとめたものです。
Java での開発経験、XML 構文規則、Android のアプリ開発経験がある方を対象としています。
Android のアプリ開発でお役にたててれば、嬉しいです。
(これから Android のアプリ開発や Java での開発を始めたい方への案内は、
記事の最後で紹介します)

この記事のテーマ


 MPAndroidChartを使用して、円グラフ(PieChart)を実装をする

MPAndroidChart は、Androidアプリでグラフを作るためのオープンソースライブラリです。
Andorid アプリでグラフを描画する場合のベストプラクティスといっても過言ではありません。
非常に多機能で細かい部分まで制御できる素晴らしいライブラリですが、使用方法について、詳しい日本語ドキュメントがなく、機能の一部しか利用されていない、残念な状況です。

MPAndroidChart は、さまざまなグラフを扱うことが可能です。
今回は、円グラフ(
PieChart )にフォーカスを当てて、開発したアプリのソースを参考に、使用方法について説明したいと思います。

折れ線グラフ(LineChart)については、こちらです↓↓↓

棒グラフ(BarChart)については、こちらです↓↓↓

散布図(PieChart)については、こちらです↓↓↓

MPAndroidChart を使用するための準備

MPAndroidChart を使用するには、プロジェクトおよび、モジュールの build.gradle ファイルに定義の追加が必要です。

◎build.gradle(プロジェクト)

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

◎build.gradle(モジュール)
2022年11月現在の最新バージョンは 3.1.0 です。

dependencies {
    :
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

◎ライセンス表記
MPAndroidChart は Apache License, Version 2.0 です。
アプリで使用する場合、ライセンス表記が必要です。

ソース提供ではないため、ライセンス条文の記載がある公式サイトのリンクをアプリに実装しています

円グラフ( PieChart )

円グラフは、データ全体の「内訳」を円の角度で表現するグラフです。
視覚的な効果が大きい反面、円グラフは全体からの割合の可視化に特化しています。
このため、内訳の分類を多くできない、別のグラフとの比較、時系列での推移を把握しにくないなど、使用にはやや注意が必要です。
折れ線グラフや棒グラフほど使用する機会はありませんが、円グラフの特長を生かした簡単な
GUIを紹介します。

方位磁石のような磁北(方位)を円グラフを使って実装します

グラフ表示

MPAndroidChart のグラフ表示は、グラフに表示する弧をデータセット( PeiDataSet )として作成し、円グラフ( PieChart )に円グラフデータ( PieData )を介して、セットします。
グラフの背景、表示範囲、振る舞いなどの属性は、グラフに定義します。

    :
    private PieChart                    direction;
    private final PieData               pieData = new PieData();
    :
    PieDataSet pieDataSet = new PieDataSet(new ArrayList<>(), "radar");
    pieDataSet.addEntry(new PieEntry(1f));  // 90° 方向指示部
    pieDataSet.addEntry(new PieEntry(3f));  // 270° 方向指示部以外
    pieDataSet.setColors(context.getColor(R.color.red), android.R.color.transparent);
    pieData.setDataSet(pieDataSet);
    direction = findViewById(R.id.direction);
    direction.setHoleRadius(88f); // 円グラフに穴をあける場合の半径
    direction.setHoleColor(android.R.color.transparent); //  円グラフに穴の色
    direction.setTransparentCircleRadius(direction.getHoleRadius()); // 円グラフに穴をあける場合の透過部分の半径
    direction.getLegend().setEnabled(false);
    direction.getData().setDrawValues(false);
    direction.setTouchEnabled(false);
    direction.setData(pieData);
    :

グラフ描画の実装方法は、基本的に折れ線グラフ(LineChart)と同じです。
円グラフの大きさや色などの設定は、レイアウトXML、Javaのコーディングのいずれも指定可能です。
上記サンプリでは、円グラフを使って方位磁石のような磁北(方位)を表すグラフを実装しています。
円グラフの中心に穴をあけて、磁北(方位)を示す部分を有色、それ以外を透過します。
データセット(PieDataSet)には、磁北(方位)を示す部分とそれ以外の部分の2つのデータを追加します。
データセットを円グラフデータ(
PieData)にセットし、円グラフ(PeiChart)に円グラフデータをセットします。

Layoutリソース

        :
        <com.github.mikephil.charting.charts.PieChart
            android:id="@+id/direction"
            android:layout_width="400dp"
            android:layout_height="400dp"
           android:layout_centerInParent="true"
            android:background="@android:color/transparent" />
        :

円グラフの回転

方位磁石のような磁北(方位)の変化は、円グラフを回転させることで実現します。

        :    
        direction.setRotation((float) azimuth + declination <= -45f ? ((float) azimuth + declination + 45f) * -1 : ((float) azimuth + declination - 315f)