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 | 文字列(1 行) | ボウズ太郎 |
Radar | - | スペース | - |
国語 | Japanese | 数値 | 80 |
数学 | Mathematics | 数値 | 90 |
英語 | English | 数値 | 100 |
社会 | Social_studies | 数値 | 60 |
理科 | Science | 数値 | 70 |
アプリの設定フォーム画面
Cybozu CDN から Chart.js の URL をコピーする
Cybozu CDN の Chart.js の URL をコピーします。
利用できるバージョンを確認し、必要に応じて URL を変更してください。
URL の例:https://js.cybozu.com/chartjs/v3.9.1/Chart.min.js
アプリ管理で URL を設定する
カスタマイズするアプリの管理画面に移動し、「JavaScript / CSS でカスタマイズ」を開きます。
次に、「PC 用の JavaScript ファイル」にある「URL 指定で追加」をクリックし、URL を入力します。
kintone モバイルで表示する場合には、「モバイル用の JavaScript ファイル」も同様に設定します。
これで、CDN の設定は完了です。
しかし、このままでは描画されないので、プログラムをアップロードしましょう。
プログラムをアップロードする
「JavaScript / CSS でカスタマイズ」画面で次のプラグラムを JavaScript 形式のファイルにして、アップロードします。
Chart.js の機能や仕様は、
Chart.js の Web ページ
で確認してください。
|
|
レコードを登録してレーダーチャートを表示しよう
データを追加してチャートを表示します。
kintone モバイルで確認する
PC ブラウザーで確認する
このように、Cybozu CDN を利用することによって、効率的で安定したカスタマイズが実現できます。
この Tips は、2022 年 12 月版 kintone で動作を確認しています。