動作の確認プログラムの解説まとめ参考サイトはじめに固定リンクがコピーされましたamChartsというグラフ描画ライブラリを使って、予算管理のTreemapをカスタムビューで作成します。Treemap形式で可視化することにより、レコード一覧よりも視覚的にわかりやすく管理できます。今回は、部署と用途毎に割り当てられた予算をTreemap形式で可視化していきます。固定リンクがコピーされましたkintoneで予算管理アプリを作成します。次の画像およびテーブルの設定項目を参照してください。budgetまた、ドロップダウンの項目は以下の画像を参考に設定してください。これで、予算管理アプリフォームは完成ですので「フォームを保存」します。固定リンクがコピーされました次に「一覧」タブをクリックし、「+」ボタンで、一覧を追加します。一覧名を入力し、レコードの表示形式として「カスタマイズ」を選択します。APIよりデータを取得するので、「ページネーションを表示する」のチェックを外します。HTML欄には、amChartsの表示されるコンテナーを設定します。今回は、<div>タグを使用し、IDを「chartdiv」と設定しています。このとき生成された「一覧ID」を記録しておきます。設定を「保存」します。これでkintoneアプリのカスタムビューの設定が完了しましたので、「アプリを更新」をクリックしアプリの変更を反映します。固定リンクがコピーされました以下のサンプルコードを参考にプログラムを作成します。11行目のVIEW_IDには、カスタマイズビューを作成した時に記録した「一覧ID」を設定します。});})();また、Treemapを適性に表示するため、以下のCSSスタイルシートを設定します。固定リンクがコピーされました予算管理アプリの一覧画面で「(すべて)」を選択し、以下の画像を参考にして、予算管理アプリにレコードを追加します。5のTreemap用のライブラリおよび先ほど作成したJavaScriptプログラムおよびCSSスタイルシートを設定します。Treemap用のライブラリのCDNのURLです。https://cdn.amcharts.com/lib/5/index.jshttps://cdn.amcharts.com/lib/5/hierarchy.jshttps://cdn.amcharts.com/lib/5/themes/Animated.jsまた、ライブラリのJavaScriptをサーバーにインストールする場合、次の手順でファイルを入手します。Maps)」をクリックします。ダウンロードされたamcharts_5.x.x.zipを展開します。Map」を選択します。Mapが表示されたら成功です。「予算」をクリックすると予算配分の詳細が表示され、「部署名」にカーソルを合わせると予算の値が表示されます。最初の画面に戻るには、再び「予算」をクリックします。固定リンクがコピーされましたkintoneの一覧イベント関数で、作成したカスタマイズビュー以外は処理しないように定義します。}amChartsのTreemapの初期設定を定義します。」を参照してください。APIにより、予算管理アプリのレコードを取得します。Promiseを使って同期処理で結果を待ってから次の処理に進んでいます。{各レコード毎に部署の値をチェックし、表示するTreemapノードにすでに同じ部署が存在する場合は、予算の値を同じ部署のchildノードに追加します。存在しない場合には、新たに部署のノードを追加し、childノードに予算の値を追加しています。});作成したTreemapのノードデータをチャートに反映します。series.dataItems[0]);パンくずリストで詳細表示から初期表示へ戻れるようにし、Treemapのアニメ化表示の設定をしています。100);まとめ固定リンクがコピーされました今回はamChartsのTreemap機能を使って、予算管理アプリの可視化で予算配分をわかりやすくする把握できるサンプルアプリを作成してみました。amChartsのJavaScriptライブラリを使うと、Treemap以外にもさまざまなチャートやマップを表示できます。kintoneアプリのカスタムビューを使って用途に応じたチャートやマップを利用し、より効率的に業務を管理できます。TutorialこのTipsは、2022年7月版kintoneで動作を確認しています。(cybozu.cn)。