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); }); })();