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) * -1);
        direction.invalidate();
        :

円グラフの回転は、setRotationで回転する角度を指定します。
スマホ本体の磁気センサーやGPSセンサーの方位の入力値をとして、円グラフを回転させます。
サンプルでは、GPSセンサーの位置情報から、
磁気偏角(declination)を計算し、それに方位(azimuth)を加えた値を使用しています。

磁気偏角とは、真北(北極点)と方位磁針が指す磁北(北磁極、地磁気が示す北)とのずれのことです。日本の本州全域で−8度、沖縄県の石垣島で−5度、北海道は−10度あります。

MPAndroidChart を使用して円グラフを実装 している Androidアプリです。

今回は、ここまでです。

誤字脱字、意味不明でわかりづらい、
もっと詳しく知りたいなどのご意見は、
このページの最後にある
コメントか、
こちら
から、お願いいたします♪

ポチッとして頂けると、
次のコンテンツを作成する励みになります♪

ブログランキング・にほんブログ村へ

これからAndroidのアプリ開発やJavaでの開発を始めたい方へ

初めての Android のアプリ開発では、アプリケーション開発経験がない方や、
アプリケーション開発経験がある方でも、Java や C# などのオブジェクト指向言語が初めての方は、
書籍などによる独学ではアプリ開発できるようになるには、
かなりの時間がかかりますので、オンラインスクールでの習得をおススメします。

未経験者からシステムエンジニアを目指すのに最適かと、
まずは無料相談から♪

未経験者からプログラマーを目指すのに最適かと、
まずは無料カウンセリングから♪

カリキュラムとサポートがしっかりしています、
お得なキャンペーンとかいろいろやっています♪

ゲーム系に強いスクール、UnityやUnrealEngineを習得するのに最適かと、
まずは無料オンライン相談から♪

参考になったら、💛をポッチとしてね♪

スポンサーリンク
msakiをフォローする
スポンサーリンク

コメント欄

タイトルとURLをコピーしました