カテゴリー内の他の記事

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

Index

はじめに

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

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

完成イメージ

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

できること

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

アプリの準備

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

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

channel1~channel5

フィールドコードが channel1~channel5 の数値フィールドを5つ追加します。

グラフの各地域の売上を入力します。

サンプルコード

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' イベントをトリガーに円グラフを生成しています。

動作の確認

サンプルデータの追加

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

record_demo.png

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

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

  • @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 プログラムを設定します。

app_setting.png

設定を保存後、アプリを更新し、レコードの詳細 / 一覧画面を表示します。完成イメージのようにグラフが表示されれば成功です。

ポータルにグラフを表示するカスタマイズの適用

kintone のシステム管理画面を開き、[JavaScript / CSSでカスタマイズ]をクリックします。
以下の画像を参考に、今回利用するライブラリのファイルと先ほど作成した JavaScript プログラムを設定します。

ポータルのカスタマイズは、kintone のシステム管理から適用する必要があります。kintoneシステム管理画面を開く方法はリンクをご参照ください。

portal_setting.png

設定を保存後、アプリを更新し、ポータル画面を表示します。完成イメージのようにグラフが表示されれば成功です。

おわりに

今回の記事は、Apache ECharts を使って、kintone のレコードやポータル画面に統計ダッシュボードを表示するカスタマイズを紹介しました。
kintone 上にガントチャートや、レーダーチャートを表示するカスタマイズを紹介する記事もありますので、興味ある方はぜひ確認してみてください。

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

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

 

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。