はじめに
データ分析をするときに、グラフやチャートなどを利用してデータを可視化する場面は多いと思います。
kintone の基本機能でもグラフは作成できますが、データ可視化ライブラリを使うことでより表現力の高いグラフを作成できます。
今回の記事では、オープンソースのデータ可視化ライブラリの Apache ECharts を使って、統計ダッシュボードを kintone に表示するカスタマイズを紹介します。
完成イメージ
今回のカスタマイズを適用することで、以下の画面に Apache ECharts で生成したグラフを表示させることができます。
- レコード詳細画面
- レコード一覧画面
- ポータル画面
- モバイル画面
レコード詳細画面にグラフを表示
レコードへ登録された数値を使って円グラフを生成し、該当レコードの詳細画面に表示します。
レコード一覧画面にグラフを表示
アプリの全レコードを取得し、取得した数値を元に積み上げグラフを生成し、レコード一覧画面に表示します。
ポータル画面にグラフを表示
該当アプリの全レコードを取得し、取得した数値を元に折れ線グラフを生成し、ポータル画面に表示します。
折れ線グラフの各日付の数値をマウスオーバーする際に、該当日付の数値の内訳を円グラフに表示します。
モバイル表示に対応
モバイルからも手軽にグラフを確認できます。
アプリの準備
グラフを表示するための「売上管理アプリ」を作成します。
「はじめから作成」でアプリを新規作成し、次のフィールドをアプリに追加してください。
フィールドの種類 | フィールドコード | 備考 |
---|---|---|
スペース | report | 生成したグラフを表示するためのスペースです。 |
文字列(1 行) | year | グラフの「年度」情報を入力します。 |
日付 | date | グラフの「日付」情報を入力します。 |
文字列(1 行) | department | グラフの「製品」情報を入力します。 |
計算 | total | グラフの「総売上」情報を計算します。 計算式には、 channel1+channel2+channel3+channel4+channel5 と設定します。 |
数値 | channel1 〜 channel5 | グラフの各地域の売上を入力します。 フィールドコードが channel1 〜 channel5 の数値フィールドを 5 つ追加します。 |
サンプルコード
echarts_app.js
レコードの詳細画面と一覧画面にグラフを表示するプログラムです。
JavaScript ファイルとして保存してください。
|
|
echarts_portal.js
ポータル画面にグラフを表示するプログラムです。
69 行の「app_id」の値をご利用のアプリの id に変更したうえで、JavaScript ファイルとして保存してください。
|
|
ECharts の基本的な使い方
この部分で、ECharts のグラフの基本的な使い方を解説します。
今回のサンプルコードで利用した各グラフの使い方については、以下の ECharts 公式サンプルコードを確認してください。
グラフの初期化
次のサンプルコードのように、ECharts のインスタンスの作成は
echarts.init()
で行います。
複数のインスタンスを一度に初期化しないように気を付けてください。
|
|
「echarts_app.js」の 65 行目〜 69 行目では、echarts.init()
で円グラフのインスタンスを生成しています。
|
|
グラフの描画
次のサンプルコードのように、グラフのレンダリングは
setOption()
で行います。
グラフのすべてのパラメーターとデータを setOption()
から変更できます。
|
|
「echarts_portal.js」の 85 行目〜 132 行目では、setOption()
でグラフのパラメーターとデータを指定しています。
|
|
「echarts_portal.js」の 48 行目〜 65 行目では、折れ線グラフの updateAxisPointer
イベントで受け取ったパラメーターとデータを setOption()
で円グラフに指定しています。
|
|
ECharts のイベント
次のサンプルコードのように、ECharts は
on()
を使って、イベントハンドラーをバインドできます。
ECharts には 2 種類のイベントがあります。
mouse events
の場合、マウスがチャート内の特定の要素をクリックやマウスオーバーなどをするときにトリガーされます。
dispatchAction
の場合、dispatchAction が呼び出された後にトリガーされます。
|
|
「echarts_portal.js」の 48 行目〜 65 行目で、折れ線グラフの updateAxisPointer
イベントをトリガーに円グラフを生成しています。
|
|
動作の確認
サンプルデータの追加
グラフに表示するデータを「売上管理アプリ」に追加してください。
次のサンプルデータを参考にしてください。
ライブラリファイルの準備
今回利用するライブラリは、次の 2 つです。
-
Apache ECharts
今回は v5.3.0 を利用します。
詳細は 公式ドキュメント を参照ください。
以下のリンクより「echarts.common.js」ファイルをダウンロードしてください。
https://github.com/apache/echarts/blob/5.3.0/dist/echarts.common.js -
@kintone/rest-api-client
今回は v2.0.33 を利用します。
詳細は 公式ドキュメント を参照ください。
以下のリンクを利用しますので、控えておいてください。
https://unpkg.com/@kintone/rest-api-client@2.0.33/umd/KintoneRestAPIClient.min.js@kintone/rest-api-client は、 kintone REST API を JavaScript で扱う際に必要な処理をまとめたライブラリです。
本クライアントで用意されたメソッドを呼び出すだけで kintone REST API を実行できるので、コードの記述量を減らすことができます。
今回は、レコードを一括処理メソッドを利用しています。
詳細は kintone JavaScript Client を確認してください。
カスタマイズの適用
さきほど用意したライブラリとサンプルコードを kintone 環境に適用します。
サンプルコードを正常に動作させるために、ライブラリファイルを先に読み込む必要があります。
また、サンプルコードはモバイル表示に対応しています。
モバイル画面にグラフを表示させたい場合は、同じサンプルコードを「モバイル用の JavaScript ファイル」にもアップロードしてください。
レコード詳細画面/一覧画面にグラフを表示するカスタマイズの適用
「売上管理アプリ」の設定画面を開き、「設定」タブの「JavaScript / CSS でカスタマイズ」をクリックします。
以下の画像を参考に、今回利用するライブラリのファイルと先ほど作成した JavaScript プログラムを設定します。
設定を保存後、アプリを更新し、レコードの詳細/一覧画面を表示します。
完成イメージのようにグラフが表示されれば成功です。
ポータルにグラフを表示するカスタマイズの適用
kintone のシステム管理画面を開き、「JavaScript / CSS でカスタマイズ」をクリックします。
以下の画像を参考に、今回利用するライブラリのファイルと先ほど作成した JavaScript プログラムを設定します。
ポータルのカスタマイズは、kintone のシステム管理から適用する必要があります。
kintone システム管理画面を開く
方法はリンクを参照してください。
設定を保存後、アプリを更新し、ポータル画面を表示します。
完成イメージのようにグラフが表示されれば成功です。
おわりに
今回の記事は、Apache ECharts を使って kintone のアプリやポータル画面に統計ダッシュボードを表示するカスタマイズを紹介しました。
他にも
チャート/ガントチャート について紹介している記事がありますので、興味がある方はぜひ試してみてください。
この Tips は、2022 年 3 月版 kintone で動作を確認しています。