何を実現したいのかを書きましょう
Kintoneアプリにてレーダーチャートを表示させたいです。
以下のURLを参考にしました。
https://cybozu.dev/ja/kintone/tips/development/customize/chart/create-radar-chart-on-kintone-using-chart-js/
使っているCDNは、https://js.cybozu.com/chartjs/v4.4.6/chart.umd.js です。
使用したJavaScriptファイルはChart.jsの後に配置しています。
発生した問題やエラーメッセージを具体的に書きましょう
以下のエラーが発生し、レーダーチャートがKintoneアプリに表示されません。
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
この時、ソースコードのどの部分が問題なのか分からず困っています。
どこが問題となるのかご教示いただけますでしょうか。
実行したコードをコピー＆ペーストしましょう
(() => {
'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: ['a', 'b', 'c', 'd'],
datasets: [
{
label: 'xxx',
backgroundColor: 'rgba(0,140,232,.4)',
borderColor: 'rgba(151,187,205,1)',
pointBackgroundColor: 'rgba(151,187,205,1)',
pointBorderColor: '#fff',
data: [
record.a.value,
record.b.value,
record.c.value,
record.d.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;
});
})();