カスタマイズビューで amCharts 5 を使って日本地図を表示してみよう!
はじめに
今回は、amCharts 5 という描画ライブラリでカスタマイズビューに日本地図を表示し、「オンラインワークショップにどの地域から何人参加しているか」を可視化します。
amCharts とは
ホームページ:
https://www.amcharts.com
amCharts は表や地図を描画する JavaScript ライブラリです。
amCharts は商用ライセンスですが、ロゴが表示される無料版も使用可能です。
詳細は
公式サイト
を確認してください。
ワークショップアンケートアプリの作成
以下の画像とフィールドの設定情報を参考に kintone でアプリを作成します。
フィールドの種類 | フィールドコード | 備考 |
---|---|---|
文字列(1行) | 氏名 | JavaScript内では使用しません。 |
ドロップダウン | 都道府県 | 都道府県名(例:東京都、大阪府、埼玉県、北海道、愛知県 etc.) |
ドロップダウン | ワークショップ名 | ワークショップ名(例:ワークショップA、ワークショップB、ワークショップC etc.) JavaScript内では使用しません。 |
カスタマイズビューの作成
以下の画像を参考にカスタマイズビューを設定します。
- 一覧名を入力します。
ここでは"mapView"とします。 - 表示形式は「カスタマイズ」を選択します。
- 一覧 ID をコピーしておきます。
- 「ページネーションを表示する」のチェックは外しておきます。
- HTML には、
<div id="chartdiv"></div>
のみ記載します。
JavaScriptとCSS
JavaScript
以下をコピーして JavaScript ファイルとして保存します(ファイル名は sample.js とします)。
コード内の{一覧 ID}には、カスタマイズビューを作成時に記録した一覧 ID を設定します。
|
|
CSS
以下をコピーして CSS ファイルとして保存します(ファイル名は sample.css とします)。
|
|
JavaScript / CSSでカスタマイズ
kintone REST API Client、amCharts 5 のライブラリおよび JavaScript プログラムおよび CSS スタイルシートを設定します。
- PC 用の JavaScript ファイル
- https://js.cybozu.com/kintone-rest-api-client/3.2.3/KintoneRestAPIClient.min.js
- https://cdn.amcharts.com/lib/5/index.js
- https://cdn.amcharts.com/lib/5/map.js
- https://cdn.amcharts.com/lib/5/themes/Animated.js
- https://cdn.amcharts.com/lib/5/geodata/japanHigh.js
- sample.js(前述のコードをアップロード)
- PC 用の CSS ファイル
- sample.css(前述のコードをアップロード)
コードの解説
kintone REST API Client の getAllRecords()
メソッドで絞り込み条件に合ったレコードを全件取得します。
|
|
取得した records の都道府県フィールドごとの参加人数を計算します。
合計値などを計算する時によく使われる reduce()
メソッドを使って集計しています。
|
|
この処理で都道府県ごとの参加人数(prefCounts)は以下のように計算されます。
|
|
地図上にプロットするデータ(geoJSONData)を作ります。
|
|
この処理で geoJSONData は以下のようになります。
|
|
地図の geoJSON プロパティに geoJSONData を入れて、マーカーのサイズや色、ツールチップの設定をします。
|
|
ツールチップの {name}
や {participants}
は、geoJSONData の properties 内のプロパティです。
|
|
動作の確認
以下の画像を参考にサンプルデータを追加してください。
カスタマイズビュー名「mapView」を選択します。
以下のように日本地図が表示されれば成功です。
マーカーにカーソルを合わせると都道府県名および参加者数が表示されます。
ワークショップ名で絞り込むこともできます。
おわりに
今回は、amCharts 5 というグラフ描画ライブラリを使い、都道府県の緯度経度情報とレコードの情報を関連付け、日本地図上に参加者数情報を表示しました。
このように、カスタマイズビューとグラフ描画ライブラリを組み合わせて、kintone アプリのレコードをいろいろな形で表現できます。
たとえば、予算配分を可視化できるカスタマイズを紹介する記事、「
amChartsのTreemapを使って、予算配分を可視化してみよう!」もありますので、興味がある方ぜひ確認してください。
この Tips は、2023 年 1 月版 kintone で動作を確認しています。