# レーダーチャートの修正

**URL:** <https://community.cybozu.dev/t/topic/8309>\
**Category:** kintone 開発相談\
**Created:** [2023 年 11 月 7 日午後 5:18 UTC](https://community.cybozu.dev/t/topic/8309 "2023-11-07T17:18:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kenichi35](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenichi35](https://community.cybozu.dev/u/Kenichi35)\
**Post date:** [2023 年 11 月 7 日午後 5:18 UTC](https://community.cybozu.dev/t/topic/8309/1 "2023-11-07T17:18:10Z")

</div>

> **[Chart.js を使って kintone にレーダーチャートを表示する](https://cybozudev.zendesk.com/hc/ja/articles/202982064-Chart-js)**
>
> （著者：サイボウズ 後迫 孝）
>  
> はじめに
> kintoneのカスタマイズ開発を安定的に、効率的に開発するために 2014年10月に Cybozu CDNを公開しました。そこで、Cybozu CDN で提供している Chart.jsを利用して、kintoneアプリのレコード詳細を表示した時に、成績表をレーダーチャートで描画するカスタマイズ方法を紹介します。※Chart.js は、レーダーチャ...

を参照して下記コードでレーダーチャートを表示できるようにしたのですが、5段階評価のため区切りを5つにしたいです。  
ただどこを修正すべきか分からず、ご教示頂けますと幸いです。  
宜しくお願い致します。

 ![image](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/ad5981bd536730166157a1679790ea3018836e43.png)

/\*

- レーダーチャートのサンプルプログラム
- 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;

```

});  
})();

---

<div class="post-metadata">

**Author:** ![ko\_ji](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/ko_ji/32/31_2.png) [@ko\_ji](https://community.cybozu.dev/u/ko_ji)\
**Post date:** [2023 年 11 月 8 日午前 12:15 UTC](https://community.cybozu.dev/t/topic/8309/2 "2023-11-08T00:15:08Z")

</div>

こんにちは。

Chart.js で少し検索してみると、以下のページで目盛りの値を指定する方法が  
紹介されていました。

> **[【Chart.js】レーダーチャートの目盛り表示を数指定したり非表示にしたり | Zakkuriブログ](https://zakkuri.life/chart-js-rader-option/)**
>
> Chart.jsを使用してレーダーチャートを実装した際に、目盛りや文字の大きさなどを調整したときのメモ

上記ページを参考に、“レーダーチャートの最小値、最大値を設定する” 部分を  
以下のように修正することで、目盛りを 5つにすることができましたよー

```javascript
  scale: {
    min: 0,
    max: 5,
      ticks: {
        stepSize: 1, // 目盛間隔
      },
  }

```

---

<div class="post-metadata">

**Author:** ![Kenichi35](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenichi35](https://community.cybozu.dev/u/Kenichi35)\
**Post date:** [2023 年 11 月 8 日午前 1:06 UTC](https://community.cybozu.dev/t/topic/8309/3 "2023-11-08T01:06:00Z")

</div>

@ko_ji さん  
早速ご返信ありがとうございます！  
調査不足でした、、大変助かります！

---

<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:** [2023 年 11 月 11 日午前 1:06 UTC](https://community.cybozu.dev/t/topic/8309/4 "2023-11-11T01:06:51Z")

</div>

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