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

著者名: 後迫 孝 (External link) (サイボウズ株式会社)

目次

はじめに

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

Chart.js (External link) はJavaScriptのライブラリです。
レーダーチャートの他に円グラフ、折れ線グラフ、棒グラフ、円グラフなどを描画できます。

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

デモ環境

デモ環境で実際に動作を確認できます。
デモ環境: https://dev-demo.cybozu.com/k/35/ (External link)

ログイン情報は 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ページ (External link) で確認してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*
 * レーダーチャートのサンプルプログラム
 * Copyright (c) 2021 Cybozu
 *
 * Licensed under the MIT License
 */

(() => {
  'use strict';

  // レコード詳細表示時にチャートを表示する(PC、スマートフォン両対応)
  const eventsDetailShow = ['app.record.detail.show', 'mobile.app.record.detail.show'];
  kintone.events.on(eventsDetailShow, (event) => {

    const record = event.record;
    const data = {
      labels: ['国語', '数学', '英語', '社会', '理科'],
      datasets: [
        {
          label: '点数',
          backgroundColor: 'rgba(0,140,232,.4)',
          borderColor: 'rgba(151,187,205,1)',
          pointBackgroundColor: 'rgba(151,187,205,1)',
          pointBorderColor: '#fff',
          data: [
            record.Japanese.value,
            record.Mathematics.value,
            record.English.value,
            record.Social_studies.value,
            record.Science.value
          ]
        }
      ]
    };

    // Chart.jsのオプションを設定する
    const options = {
      responsive: true,

      // レーダーチャートの最小値、最大値を設定する
      scale: {
        min: 0,
        max: 100
      }
    };

    let elRadar;
    const elCanvas = document.createElement('canvas');
    elCanvas.id = 'canvas';

    // スペースフィールドにレーダーチャートを表示する(スマートフォン用にも対応させる)
    // PC用、スマートフォン表示時でサイズを調整する
    if (event.type === 'mobile.app.record.detail.show') {
      elRadar = kintone.mobile.app.getHeaderSpaceElement();
      elCanvas.style.position = 'relative';
      elCanvas.style.top = '10px';
      elCanvas.style.left = '10px';
      elCanvas.height = '300';
      elCanvas.width = '300';
    } else {
      elRadar = kintone.app.record.getSpaceElement('Radar');
      elCanvas.height = '400';
      elCanvas.width = '400';
    }

    elRadar.appendChild(elCanvas);
    new Chart(elCanvas.getContext('2d'), {
      type: 'radar',
      data: data,
      options: options
    });

    return event;

  });
})();

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

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

kintoneモバイルで確認する

PCブラウザーで確認する

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

information

このTipsは、2022年12月版kintoneで動作を確認しています。