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で動作を確認しています。