Chart.jsを使って kintone でダッシュボードを作ってみよう！

（著者：武井 琢治）

Index

• はじめに
• 完成イメージ
• 事前準備
• サンプルコード
• サンプルプログラムの解説
• 注意事項
• おわりに

はじめに

皆さん、グラフは使っていますか？

今回は、kintone標準機能では作れないグラフを、
Cybozu CDNの「Chart.js」というライブラリを使用して実現します。

今回、「Chart.js」ライブラリで拡張するグラフは以下の3つです。

• 前年同月比グラフ　→　製品の月次売上高と前年同月の売上高を並べた棒グラフを作成します。
• 棒グラフ＆折れ線グラフを一つにまとめたグラフ　→　月次売上高と試用申込数の推移が分かるグラフを作成します。
• ドーナツ型グラフ　→　製品別の売上高とその割合が分かるグラフを作成します。

また、これらのグラフをカスタマイズビューに表示することで、
ダッシュボードを作成してみます。

完成イメージ

事前準備

アプリの準備

ダッシュボードを表示するためのアプリを作成します。
なお、アプリの作成方法は以下のヘルプをご覧ください。

アプリをはじめから作成する ～FAQアプリを作ってみよう～

今回ご紹介する作成例で必要なアプリは以下の4アプリになります。

• 「ダッシュボード」アプリ
• 「製品マスタ」アプリ
• 「販売実績」アプリ
• 「試用申し込み管理」アプリ

「ダッシュボード」アプリ

アプリの作成を始めたところになります。 「ダッシュボード」アプリは表示するだけのアプリですので、フォームは何も作らなくてかまいません。

一覧の作成画面です。一覧名「ダッシュボード」に設定します。
レコード一覧の表示形式を「カスタマイズ」にし、以下のHTMLを入力します。 また、以下の通り「アプリの設定 > JavaScript / CSSでカスタマイズ」に以下のサンプルコードを設定します。
サンプルコードはエディタにコピーして、ファイル名を「dashboard.js」「dashboard.css）」、文字コードを「UTF-8」で保存します。
※ファイル名は任意ですが、ファイルの拡張子は「js」（またはcss）にしてください。

■PC用のJavaScriptファイル

• https://js.cybozu.com/jquery/3.5.1/jquery.min.js （jQueryライブラリ）
• https://js.cybozu.com/chartjs/v2.7.3/Chart.min.js （Chart.jsライブラリ）
• https://js.cybozu.com/momentjs/2.27.0/moment.min.js （moment.jsライブラリ）
• https://js.cybozu.com/jqueryui/1.12.1/jquery-ui.min.js （jQuery UIライブラリ）
• jQDateRangeSlider-min.js （jQRangeSliderライブラリ）
• dashboard.js（詳細後述）

■PC用のCSSファイル

• https://js.cybozu.com/jqueryui/1.12.1/themes/smoothness/jquery-ui.css （jQuery UIライブラリ）
• iThing-min.css（少々改変済） （jQRangeSliderライブラリ）
• dashboard.css（詳細後述）

ここまで設定が済んだら、右上の[アプリを公開]ボタンを押せばこのアプリの設定は完了です。

「製品マスタ」アプリ

次のフォームを作成してください。

フィールドコード	フィールドタイプ	備考
製品名	文字列（1行）	重複禁止
単価	数値

また、マスタレコードを作成します。
今回は以下のようにしました。

「販売実績」アプリ

次のフォームを作成してください。

フィールドコード	フィールドタイプ	備考
会社名	文字列(1行)
日付	日付
製品名	ルックアップ	「製品マスタ」アプリの製品名フィールドをコピー元のフィールドに指定。 「製品マスタ」アプリの単価フィールドを単価フィールドにコピー。
単価	数値
販売数	数値
販売額	計算	計算式に「単価*販売数」

また、以下のように、レコードを作成します。

「試用申し込み管理」アプリ

次のフォームを作成してください。

フィールドコード	フィールドタイプ	備考
会社名	文字列(1行)
日付	日付
製品名	ルックアップ	「製品マスタ」アプリの製品名フィールドをコピー元のフィールドに指定。

また、以下のように、レコードを作成します。

サンプルプログラム

dashboard.js

「販売実績アプリID」と「試用申し込み管理アプリID」はご自身の環境に合わせて書き換えてください。

※ レコード一括取得時にその結果が1万を超える可能性がある場合には、運用・適用中のプログラムのご確認ならびに修正対応の検討をお願いいたします。
詳細はこちらの記事を確認ください。

dashboard.css

サンプルプログラムの解説

ここからは、Chart.jsとjQRangeSlider特有のコードを中心に解説していきます。
上から見ていきましょう。 ドーナツ型グラフの背景色です。
参考までに、縁取り色のつけ方もソースコードにコメントで載せておきました。

今回は、1つ1つの製品に対してそれぞれ色指定する方法を採用していますが、
製品数が多かったり、製品が頻繁に増減する場合は、
背景色／縁取り色ともにランダムで決定する方法も、コメントに残してありますのでご参考ください。

グラフの表示に必要なcanvas要素を取得しています。
また、グラフを再描画する時は、古いグラフを削除しています。

Chart.jsの本丸です。
type: 'bar'で棒グラフを指定しています。
labelsはグラフ下部の「●月」の表記です。

datasets配列に2つのオブジェクト（当年/前年）を入れることで、
「●月」に対して2つの棒グラフを表示することができます。

scaleLabelはグラフ左右のラベルです。

ticksはグラフ左右の目盛りの指定で、
beginAtZeroはゼロから起算するか、
maxTicksLimitは目盛りの最大分割数、
またcallbackで目盛りに「万円」の単位を付加しています。

tooltipsは、グラフにカーソルを合わせた時の処理です。
当年のグラフなら当年の、前年のグラフなら前年の年月を表示し、「万円」の単位等を付加しています。

こちらはmixedグラフの書き方です。
datasets配列内にそれぞれtypeを設定することで、
「棒グラフ+折れ線グラフ」のようなグラフを描画することができます。

また「yAxisID」を設定することで、
それぞれ異なるscale（左右の目盛り）に対応させることができます。

ドーナツ型グラフを描画することは、
typeを「doughnut」に指定するだけでOKです。

期間指定スライダーを初期化しています。
なお、スライダーはjQuery UIのプラグインを使用しています。

スライダーの初期値です。
最小で本日の5年前、実績値なので、最大は本日です。
月単位での計算であることと、スライダーの挙動等の理由で、それぞれ月初になるように指定しています。

スライダーを動かした時の単位です。
これを指定することで、1ヶ月ごとにスライドできるようになります。

スライダーで常に一年間のスライド幅を保つための設定です。
今回のグラフは、常に「どこかの1年間」の表示になります。

スライダー上部の表示です。
1ヶ月単位なので、「YYYY年M月」表記にしています。

スライダーを動かした時のイベントです。
グラフを生成する関数に対し、引数でスライダーの値を渡しています。

ドーナツ型グラフの値表示です。
普通であれば、カーソルを合わせた際に値が表示されるのですが、
このコードを組み込むと、常に表示できるようになります。

注意事項

Chrome53.0.2785.101 m (64-bit)にて動作を確認しています。
kintoneモバイル版では利用することができません。
処理時間として、
総レコード件数4000件／表示レコード件数1000件（販売実績＋試用申し込み）で、
読み込みに5～6秒程度を確認しています。

おわりに

便利なグラフが簡単に描画できるChart.jsライブラリのご紹介となりましたが、いかがでしたでしょうか。
Chart.jsのV1とV2では大きく文法が変わってしまった上、 V2以降の日本語情報、またjQRangeSliderの日本語情報も少ないため、皆様のご参考になれば幸甚に存じます。