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

フォローする

(著者:サイボウズ 後迫 孝

 

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

完成のイメージ(kintoneモバイルの場合)

 

アプリを作ろう

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

フィールド名 フィールドコード フィールドタイプ
名前 Name 文字列(一行) ボウズ太郎
チャート Chart グループ --

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/v1.0.2/Chart.min.js
※今回は、2016年2月時点の Chart.jsのバージョンを利用します。

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

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

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

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

 

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

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

 

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

 

 

 

 

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

 

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

デモ環境

https://dev-demo.cybozu.com/k/35/

※デモ環境についての説明はこちら

コメント

Avatar
井原 真吾

この記事を参考に、同じアプリ(データなども含む)を作り、JSもコピーしたものをそのまま上げたのですが、
チャートが表示されません。

Chromeのデベロッパーツールでいろいろ確認しているのですが、エラーなどは出ておらず、
肝心のcanvas要素が

<div class="spacer-cybozu" id="user-js-Radar"><canvas id="canvas" height="0" width="0" style="width: 0px; height: 0px;"></canvas></div>

のように、何らかによってheightもwidthも0にされてしまっているようなのですが、
どこ原因でそうなっているのかが突き止められていない状態です。

Avatar
井原 真吾

※0pxになっているところをデベロッパーツールで無理やり300などに指定しても描画されず。

Avatar
hydro

同じく

Avatar
Ryo ONODERA

chart.jsが
https://js.cybozu.com/chartjs/v1.0.1-beta.4/Chart.min.js
ではないためではないでしょうか。

Avatar
hydro

@Ryo ONODERA

ありがとうございます。
「JavaScript/CSS でカスタマイズ」で以下に変更したら、表示されました。

 https://js.cybozu.com/chartjs/v1.0.1-beta.4/Chart.min.js

手順にしたがって、「Cybozu CDN のページを開いて、Chart.js のURLをコピーします。」で最新を指定していました。
お騒がせしました。

Avatar
井原 真吾

@Ryo ONODERA

ありがとうございます。同様に表示されました。
僕の方も最新を指定していたのですが、それが問題だったんですね。

お手数おかけいたしました。ありがとうございます。

Avatar
Ryo ONODERA

https://github.com/nnnick/Chart.js/commit/e94bd460a795180c7bf5b45245c89f4c23c37ab6
以降のChart.js 1.xではwidth=0かつheight=0になる問題は解消されると思います。
リリース版はまだありませんが。

Avatar
cybozu Development team

https://js.cybozu.com/chartjs/v1.0.2/Chart.min.js で利用できるように一部変更しました。

ログインしてコメントを残してください。
Powered by Zendesk