Apache ECharts を使って、kintone に統計ダッシュボードを表示しよう – cybozu developer network

Index

はじめに
完成イメージ
アプリの準備
サンプルコード
動作確認
おわりに

はじめに

データ分析をするときに、グラフやチャートなどを利用して、データを可視化する場面は多いと思います。
kintone の基本機能でグラフを作成することはできますが、データ可視化ライブラリを使えば、
細かなカスタマイズに対応した、より表現力の高いグラフを作成することが可能になります。

今回の記事では、オープンソースのデータ可視化ライブラリの Apache ECharts を使って、
統計ダッシュボードを kintone に表示するカスタマイズを紹介します。

完成イメージ

今回のカスタマイズを適用することで、kintone のレコード詳細画面、レコード一覧画面、ポータル画面に、
Apache ECharts で生成したグラフを表示させることができます。

できること

レコードの詳細画面にグラフを表示
- レコードに登録された数値を元に円グラフを生成し、該当レコードの詳細画面に表示します。
レコードの一覧画面にグラフを表示
- アプリの全レコードを取得し、取得した数値を元に積み上げグラフを生成し、レコード一覧画面に表示します。
ポータル画面にグラフを表示
- 該当アプリの全レコードを取得し、取得した数値を元に折れ線グラフを生成し、ポータル画面に表示します。
- 折れ線グラフの各日付の数値をマウスオーバーする際に、該当日付の数値の内訳を円グラフに表示します。
モバイル表示に対応
- モバイルからも手軽にグラフを確認できます。

アプリの準備

グラフを表示するための「売上管理アプリ」を作成します。
「はじめから作成」からアプリを新規作成し、次のフィールドをアプリに追加してください。

フィールドの種類	フィールドコード	備考
スペース	report	生成したグラフを表示するためのスペースです。
文字列（1行）	year	グラフの「年度」情報を入力します。
日付	date	グラフの「日付」情報を入力します。
文字列（1行）	department	グラフの「製品」情報を入力します。
計算	total	グラフの「総売上」情報を計算します。「計算式」に「channel1+channel2+channel3+channel4+channel5」と設定します。
数値	channel1~channel5	フィールドコードが channel1~channel5 の数値フィールドを５つ追加します。グラフの各地域の売上を入力します。

サンプルコード

echarts_app.js

レコードの詳細画面、レコードの一覧画面にグラフを表示するプログラムです。JavaScript ファイルとして保存してください。

echarts_portal.js

ポータル画面にグラフを表示するプログラムです。67行の「app_id」の値をご利用のアプリの id に変更した上で、JavaScript ファイルとして保存してください。

ECharts の基本的な使い方

この部分で、ECharts のグラフの基本的な使い方を解説します。

今回のサンプルコードで利用した円グラフ、積み上げグラフ、折れ線＆円グラフの複合グラフの使い方については、
ECharts の公式のサンプルコード「円グラフ」「積み上げグラフ」「折れ線＆円グラフの複合グラフ」をご確認ください。

グラフの初期化

次のサンプルコードのように、ECharts のインスタンスの作成は echarts.init() で行います。
複数のインスタンスを一度に初期化しないように気をつけてください。

本記事のサンプルコード echarts_app.js の 65-L69 で、円グラフのインスタンスを echarts.init() で生成しています。

グラフの描画

次のサンプルコードのように、グラフのレンダリングは setOption() で行います。
グラフのすべてのパラメータとデータを setOption() から変更できます。

本記事のサンプルコード echarts_portal.js の L85-L132 で、グラフのパラメータとデータを setOption() で指定しています。

サンプルコード echarts_portal.js の L48~L65 で、折れ線グラフの 'updateAxisPointer' イベントで受け取ったパラメーターとデータを setOption() で円グラフに指定しています。

ECharts のイベント

次のサンプルコードのように、ECharts は on() を使って、イベントハンドラをバインドすることができます。
ECharts には2種類のイベントがあります。 mouse events の場合、マウスがチャート内の特定の要素をクリックやマウスオーバーなどをするときにトリガーされます。
dispatchAction の場合、dispatchAction が呼び出された後にトリガーされます。

サンプルコード echarts_portal.js の L48~L65 で、折れ線グラフの 'updateAxisPointer' イベントをトリガーに円グラフを生成しています。

動作の確認

サンプルデータの追加

次のサンプルデータを参考に、グラフに表示するデータを「売上管理アプリ」に追加してください。

ライブラリファイルの準備

今回利用するライブラリは、次の２つです。

Apache ECharts
- 今回のカスタマイズは v5.3.0 を利用します。
  https://github.com/apache/echarts/blob/5.3.0/dist/echarts.common.js より「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 のレコードやポータル画面に統計ダッシュボードを表示するカスタマイズを紹介しました。
kintone 上にガントチャートや、レーダーチャートを表示するカスタマイズを紹介する記事もありますので、興味ある方はぜひ確認してみてください。

この記事で利用しているライブラリ

Apache ECharts v5.3.0, ドキュメント（外部サイト）
kintone-rest-api-client v2.0.33, ドキュメント

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