を参照して下記コードでレーダーチャートを表示できるようにしたのですが、5段階評価のため区切りを5つにしたいです。
ただどこを修正すべきか分からず、ご教示頂けますと幸いです。
宜しくお願い致します。
/*
- レーダーチャートのサンプルプログラム
- 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.施工管理.value,
record.工程の正確性.value,
record.機動性.value,
record.柔軟性.value,
record.コストパフォーマンス.value
]
}
]
};
// Chart.js のオプションを設定する
const options = {
responsive: true,
// レーダーチャートの最小値、最大値を設定する
scale: {
min: 0,
max: 5
}
};
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 = '30px';
elCanvas.style.left = '30px';
elCanvas.height = '500';
elCanvas.width = '500';
} else {
elRadar = kintone.app.record.getSpaceElement('Radar');
elCanvas.height = '600';
elCanvas.width = '600';
}
elRadar.appendChild(elCanvas);
new Chart(elCanvas.getContext('2d'), {
type: 'radar',
data: data,
options: options
});
return event;
});
})();