# Kintoneアプリにおけるレーダーチャートの表示

**URL:** <https://community.cybozu.dev/t/topic/9686>\
**Category:** kintone 開発相談\
**Created:** [2024 年 11 月 5 日午前 10:41 UTC](https://community.cybozu.dev/t/topic/9686 "2024-11-05T10:41:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ciel](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@ciel](https://community.cybozu.dev/u/ciel)\
**Post date:** [2024 年 11 月 5 日午前 10:41 UTC](https://community.cybozu.dev/t/topic/9686/1 "2024-11-05T10:41:46Z")

</div>

### 何を実現したいのかを書きましょう

Kintoneアプリにてレーダーチャートを表示させたいです。  
以下のURLを参考にしました。  
[https://cybozu.dev/ja/kintone/tips/development/customize/chart/create-radar-chart-on-kintone-using-chart-js/](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](https://js.cybozu.com/chartjs/v4.4.6/chart.umd.js) です。  
使用したJavaScriptファイルはChart.jsの後に配置しています。

### 発生した問題やエラーメッセージを具体的に書きましょう

以下のエラーが発生し、レーダーチャートがKintoneアプリに表示されません。

```javascript
Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

```

この時、ソースコードのどの部分が問題なのか分からず困っています。  
どこが問題となるのかご教示いただけますでしょうか。

### 実行したコードをコピー＆ペーストしましょう

```javascript
(() => {
  '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;

  });
})();

```

---

<div class="post-metadata">

**Author:** ![ciel](https://avatars.discourse-cdn.com/v4/letter/c/a87d85/32.png) [@ciel](https://community.cybozu.dev/u/ciel)\
**Post date:** [2024 年 11 月 6 日午前 12:36 UTC](https://community.cybozu.dev/t/topic/9686/2 "2024-11-06T00:36:10Z")

</div>

すみません。解決しました。  
elRadar.appendChild(elCanvas);の部分で発生していたため、Kintoneアプリのスペースフィールドを確認したところ、要素IDが"Rader"となっていました。  
"Rader"から"Radar"に修正したところ、レーダーチャートを表示することができました。

初歩的なミスでした。精進します。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 11 月 9 日午前 12:36 UTC](https://community.cybozu.dev/t/topic/9686/3 "2024-11-09T00:36:29Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。