Chart.js を使って kintone にレーダーチャートを表示する

（著者：サイボウズ 後迫 孝）

はじめに

kintoneのカスタマイズ開発を安定的に、効率的に開発するために 2014年10月に Cybozu CDNを公開しました。そこで、Cybozu CDN で提供している Chart.jsを利用して、kintoneアプリのレコード詳細を表示した時に、成績表をレーダーチャートで描画するカスタマイズ方法を紹介します。
※Chart.js は、レーダーチャートの他に円グラフ、折れ線グラフ、棒グラフ、円グラフが描けるJavaScriptのライブラリです。

完成のイメージ（kintoneモバイルの場合）

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/35/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

アプリを作ろう

次のフィールドとデータを用意します。

フィールド名	フィールドコード	フィールドタイプ	値
名前	Name	文字列（一行）	ボウズ太郎
Radar ※要素IDになります	--	スペース	--
国語	Japanese	数値	80
数学	Mathematics	数値	90
英語	English	数値	100
社会	Social_studies	数値	60
理科	Science	数値	70

アプリの設定フォーム画面

Cybozu CDN から、Chart.jsのURLをコピーする

Cybozu CDN のページを開いて、Chart.js のURLをコピーします。

https://js.cybozu.com/chartjs/v3.9.1/Chart.min.js

アプリ管理でURLを設定する

カスタマイズするアプリの管理画面に移動し、「JavaScript/CSS でカスタマイズ」を開きます。そして、「PC用のJavaScriptファイル」にある「URL指定で追加」します。
※kintoneモバイルで表示する場合には、「スマートフォン用のJavaScriptファイル」にも同様に設定します。これで、CDNの設定は完了です。しかし、このままでは描画されないので、プログラムをアップロードしましょう。

プログラムをアップロードする

「JavaScript/CSS でカスタマイズ」画面で次のプラグラムを JavaScript形式のファイルにして、アップロードします。
Chart.jsの機能や仕様は、提供者のウェブページでご確認ください。

レコード登録してレーダーチャートを表示しよう

データを追加してチャートを表示します。

kintoneモバイル（スマートフォン）で確認する	PCブラウザで確認する

このように、Cybozu CDNを利用することによって、効率的で安定したカスタマイズが実現できます。

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