kintone on Cybozu.comでのChart.js v2.0-devの使用について

kintone on Cybozu.comというPaaSがあって、これの開発用アカウントを持っている。

Chart.jsをその中で組み合わせて使用する場合には、バージョン1.xだと、 https://github.com/nnnick/Chart.js/issues/1198 の問題があって、チャートを表示することはできない。 1.x系列のこの問題を解決したリリースはされていないので、 Chart.js を使ってレーダーチャートを表示する にあるように、v1.0.1-beta.4を使うことになる。

Chart.js自体の開発は、1.x系列ではなく、既に2.0の系列に移っているようである。 そこで、v2.0-devブランチがkintone on Cybozu.comで使えるか試してみた。 Chart.jsのJavaScriptとしては、https://raw.githubusercontent.com/nnnick/Chart.js/v2.0-dev/Chart.jsを指定した。

Chart.jsの1.xと2.0では、そもそも全く別の設定が必要なようであったので、以下のようにサンプルのJavaScriptファイルを書き換えた。Kintone側は、Chart.js を使ってレーダーチャートを表示するにあるように用意してある。

/*
 * レーダーチャートのサンプルプログラム
 * Copyright (c) 2014 Cybozu
 * Copyright (c) 2015, 2016 Ryo ONODERA
 * 
 * Licensed under the MIT License
 */
 
(function () {
    "use strict";
     
    // レコード追加、編集時のイベント
    var eventsCreateShow = ['app.record.create.show','app.record.edit.show',
                            'app.record.index.create.show','app.record.index.edit.show'];
    kintone.events.on(eventsCreateShow, function(event){
        // グループフィールドの"Chart"を非表示にする
        kintone.app.record.setFieldShown('Chart', false);
 
    });
     
    // レコード詳細表示時にチャートを表示する（PC、スマートフォン両対応）
    var eventsDetailShow = ['app.record.detail.show','mobile.app.record.detail.show'];
    kintone.events.on(eventsDetailShow, function(event){
         
        var record = event.record;

    var config = {
        type: 'radar',
        data: {
            labels : ["国語","数学","英語","社会","理科"],
            datasets: [{
                label: "成績",
  backgroundColor : "rgba(0,140,232,.4)",
  pointBackgroundColor : "rgba(151,187,205,1)",
  pointHighlightStrike: "rgba(151,187,205,1)",
  hoverPointBackgroundColor: "#fff",
                data: [
   record['Japanese']['value'],
   record['Mathematics']['value'],
   record['English']['value'],
   record['Social_studies']['value'],
   record['Science']['value']
  ]
            },]
        },
        options: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: '成績'
            },
            scale: {
              reverse: false,
              ticks: {
                beginAtZero: true
              }
            }
        }
    };
 
        var elRadar;
        var myCanvas = document.createElement('canvas');
        myCanvas.id = 'canvas';

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

 elRadar.appendChild(myCanvas);
 var myRadar = new Chart(myCanvas, config);

    });
})();