2022年8月31日水曜日

都道府県別年齢３区部分別人口を円グラフで表示する

 総務省統計局より都道府県、年齢３区分別人口の統計データを入手し、カード・リージョンのそれぞれのカードに、都道府県ごとの年齢３区分別の円グラフを表示するAPEXアプリケーションを作成してみます。


グラフの元となるデータとして、総務省統計局の日本の統計の第2章 人口・世帯にある、2-6 都道府県、年齢区分別人口（エクセル：15KB）を使用します。Excelファイルはn220200600.xlsxというファイル名でダウンロードされました。

SQLワークショップのユーティリティのクイックSQLを使って、Excelファイルの内容をインポートする表を作成します。以下のモデルを使用します。
# prefix: ccb
populations
    prefecture_name vc50 /nn
    total     num
    age00to14 num
    age15to64 num
    age65     num
    age75    num
SQLの生成、SQLスクリプトを保存、レビューおよび実行を順番にクリックし、表CCB_POPULATIONSを作成します。アプリケーションの作成は行いません。


Excelファイルの内容を表CCB_POPULATIONSにインポートします。

SQLワークショップのユーティリティのデータ・ワークショップを開きます。

データのロードを実行します。


ダウンロードしたファイルn220200600.xlsxを選択します。


ロード先に既存の表を選択し、表として先ほど作成したCCB_POPULATIONSを選びます。設定の列見出しの最初の行にヘッダーが含まれるのチェックを外します。Excelの列と表CCB_POPULATIONSの列をマッピングするため、構成を開きます。


ソース列のCOL001には列をマップしません。それ以外はソース列とマップ先を以下のように指定します。

COL002 = PREFECTURE_NAME
COL003 = TOTAL
COL004 = AGE00TO14
COL005 = AGE15TO64
COL006 = AGE65
COL007 = AGE75

以上を設定し、変更の保存をクリックします。


データのロードを実行します。


表にロードできなかった行が一覧されます。これらの行は表CCB_POPULATIONS_ERR$に保存されています。エラーで取り込めなかった行に、列PREFECTURE_NAMEに値がある行は含まれていないことより、必要なデータはすべてロードできています。

取消をクリックし、データのロードを終了します。


アプリケーション作成ウィザードを起動します。

アプリケーションの名前を都道府県別年齢３区分人口とします。予め作成されているホーム・ページを削除し、カード・リージョンのページを追加します。


カードのページは、以下の設定とします。

ページ名を都道府県別年齢３区分人口、表またはビューとしてCCB_POPULATIONSを選択します。表示形式はグリッド、タイトル列はPREFECTURE_NAME、本体列はTOTALを指定します。

カードのページを追加したのち、アプリケーションの作成を実行します。


アプリケーションが作成されます。

都道府県別年齢３区分人口として作成されたページに含まれるカード・リージョンに、円グラフを表示させます。


今回の実装は、ギャラリのサンプル・アプリケーションのSample Cardsに含まれるページ11、Gauge Meter Chart Cardsを参考にしています。


都道府県別年齢３区分人口のページを開き、ページ・プロパティにSample Cardsと同等の設定を加えます。

JavaScriptのファイルURLとして、以下を設定します。

[require jet]

JavaScriptのページ・ロード時に実行として、以下を設定します。

require(["ojs/ojchart"], function() {});

CSSのファイルURLとして、以下を設定します。

#JET_CSS_DIRECTORY#alta/oj-alta-notag-min.css

上記はSample Cardsを確認して初めて分かる設定ではないかと思います。


この時点でアプリケーションを実行すると、ページの表示は以下のようになります。


カードの表示を改善します。

Bodyにあるカード・リージョン都道府県別年齢３区分人口を選択し、プロパティ・エディタの属性タブを開きます。

本体の拡張フォーマットをONにし、HTML式として以下を記述します。

<b>総数:</b> &TOTAL.

メディアの拡張フォーマットをONにし、HTML式として以下を記述します。オプションの詳細はOracle JETのoj-chartのAPI Docを確認します。

<oj-chart
id="pieChart"
type="pie"
animation-on-data-change="auto"
series='[{"name": "0～14歳", "items": [&AGE00TO14.]},{"name": "15～64", "items": [&AGE15TO64.]},{"name": "65歳以上", "items": [&AGE65.]}]'
>
</oj-chart>
view raw pie-chart-prefecture.html hosted with ❤ by GitHub


以上で円グラフが表示されるようになりました。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-cards-pie-chart.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: ,