amChartsのTreemapを使って、予算配分を可視化してみよう！ – cybozu developer network

（Author : Fuji Business International Mamoru Fujinoki）

はじめに

amCharts というグラフ描画ライブラリを使って、予算管理の Treemap をカスタムビューで作成します。
Treemap 形式で可視化することで、レコード一覧で見るよりも視覚的にわかりやすく管理することができます。今回は、部署と用途毎に割り当てられた予算を Treemap 形式で可視化していきます。

開発の手順

kintone で予算管理アプリの作成・設定
カスタムビューの設定
JavaScript によるカスタムコードの開発
動作の確認
プログラムの解説
まとめ

1. kintone で予算管理アプリの開発・設定

kintone で予算管理アプリを作成します。下記の画像およびテーブルの設定項目を参照してください。

フィールドの種類	フィールド名	フィールドコード
ドロップダウン	部署	department
ドロップダウン	用途	purpose
数値	予算	budget

また、ドロップダウンの項目は以下の画像を参考に設定してください。

これで、予算管理アプリフォームは完成ですので「フォームを保存」します。

2. カスタムビューの設定

次に「一覧」タブをクリックし、「+」ボタンで、一覧を追加します。
一覧名を入力し、レコードの表示形式として「カスタマイズ」を選択します。
また、API よりデータを取得するので、「ページネーションを表示する」のチェックを外します。
HTML 欄には、amCharts の表示されるコンテナーを設定します。今回は、<div>タグを使用し、ID を「chartdiv」と設定しています。
また、このとき生成された「一覧 ID」を記録しておきます。

設定を「保存」します。
これで kintone アプリのカスタムビューの設定が完了しましたので、「アプリを更新」をクリックしアプリの変更を反映します。

3. JavaScript によるカスタムコードの開発

以下のサンプルコードを参考にプログラムを作成します。11行目の{一覧 ID}には、カスタマイズビューを作成した時に記録した「一覧 ID」を設定します。

また、Treemap を適正に表示するため、以下の CSS スタイルシートを設定します。

4. 動作の確認

予算管理アプリの一覧画面で「（すべて）」を選択し、以下の画像を参考に予算管理アプリにレコードを追加します。

次に以下の画像を参考に amCharts 5 のTreemap 用のライブラリおよび先ほど作成した JavaScript プログラムおよび CSS スタイルシートを設定します。
以下が、amCharts5 Treemap 用のライブラリの CDN の URL です。

また、ライブラリの JavaScript をサーバーにインストールする場合、https://www.amcharts.com/download/より、ダウンロードしてください。

レコードの追加が完了したら、今度は「Tree Map」を選択します。
下記の画像のように Tree Map が表示されたら成功です。

また、「予算」をクリックすると予算配分の詳細が表示され、「部署名」にカーソルを合わせると予算の値が表示されます。

最初の画面に戻るには、再び「予算」をクリックします。

5. プログラムの解説

kintone の一覧イベント関数で、作成したカスタマイズビュー以外は処理しないように定義します。

amCharts の Treemap の初期設定を定義します。設定の詳細については、amCharts 公式ドキュメントの「Treemap」を参照してください。

kintone API により、予算管理アプリのレコードを取得します。Promise を使って同期処理で結果を待ってから次の処理に進んでいます。

各レコード毎に部署の値をチェックし、表示する Treemap ノードに既に同じ部署が存在する場合は、予算の値を同じ部署の child ノードに追加します。
存在しない場合には、新たに部署のノードを追加し、child ノードに予算の値を追加しています。
詳細は、amCharts 公式ドキュメントの Simple Treemap のサンプルコードを参照してください。

作成した Treemap のノードデータをチャートに反映します。

パンくずリストで詳細表示から初期表示に戻れるようにし、Treemap のアニメ化表示の設定をしています。

6. まとめ

今回は amCharts の Treemap 機能を使って、予算管理アプリの可視化で予算配分をわかりやすくする把握できるサンプルアプリを作成してみました。
amCharts の JavaScript ライブラリを使うと、Treemap 以外にも様々なチャートやマップを表示できます。kintone アプリのカスタムビューを使って用途に応じたチャートやマップを利用し、より効率的に業務を管理できます。

7. 参照サイト

この Tips は、2022年7月版 kintone で確認したものになります。