# Chart.jsを使ってkintoneに表示したレーダーチャートをプリントクリエーターで印刷したい

**URL:** <https://community.cybozu.dev/t/topic/9385>\
**Category:** kintone 開発相談\
**Created:** [2024 年 8 月 13 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/9385 "2024-08-13T07:15:24Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![naoya\_miyashita](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@naoya\_miyashita](https://community.cybozu.dev/u/naoya_miyashita)\
**Post date:** [2024 年 8 月 13 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/9385/1 "2024-08-13T07:15:24Z")

</div>

### 

Chart.jsを使ってkintoneに表示したレーダーチャートをレコード詳細のスペースに  
反映させることはできました。  
[Chart.jsを使ってkintoneにレーダーチャートを表示する - cybozu developer network](https://cybozu.dev/ja/kintone/tips/development/customize/chart/create-radar-chart-on-kintone-using-chart-js/?_gl=1*1cyzvmm*_ga*MTQzMzc2OTM1MS4xNzE0MjU3NjI5*_ga_Z03HX98WC8*MTcyMzUzMTMzNS4yMi4xLjE3MjM1MzI3NDguOC4wLjA).

### 

それをプリントクリエーターで印刷したいですのですが、  
出来ないので教えてほしいです。

### 

実行したコードは次の通りです  
(() =\> {  
‘use strict’;

// レコード詳細表示時と印刷時にチャートを表示する（PC、スマートフォン両対応 印刷はPCのみ）  
const eventsDetailShow = [‘app.record.detail.show’, ‘app.record.index.show’, ‘app.record.print.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.Japanese.value,
        record.Mathematics.value,
        record.English.value,
        record.Social_studies.value,
        record.Science.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 if (event.type === 'app.record.index.show') { 
   elRadar = kintone.app.getHeaderSpaceElement(); // レコード一覧のヘッダースペースに表示 
   elCanvas.height = '400'; elCanvas.width = '400'; 
} 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;

```

});

```javascript
コードをここに入力または貼り付け

```

---

<div class="post-metadata">

**Author:** ![mls-hashimoto](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/mls-hashimoto/32/34_2.png) [@mls-hashimoto](https://community.cybozu.dev/u/mls-hashimoto)\
**Post date:** [2024 年 8 月 14 日午前 8:06 UTC](https://community.cybozu.dev/t/topic/9385/2 "2024-08-14T08:06:01Z")

</div>

有償プラグインのことはプラグインの提供者、トヨクモさんに問い合わせるのが良いと思います。  
プリントクリエイターを使用したことはありませんが、Chart.jsはcanvas要素にチャートを描画する形なので、難しいと思います。描画した要素を添付ファイルに添付させ、その内容を印刷というようなことは可能かもしれません（プリントクリエイターに添付ファイルを印刷する機能があるかは分かりません）。

---

<div class="post-metadata">

**Author:** ![naoya\_miyashita](https://avatars.discourse-cdn.com/v4/letter/n/edb3f5/32.png) [@naoya\_miyashita](https://community.cybozu.dev/u/naoya_miyashita)\
**Post date:** [2024 年 8 月 17 日午前 6:30 UTC](https://community.cybozu.dev/t/topic/9385/3 "2024-08-17T06:30:42Z")

</div>

ご回答ありがとうございます！

レーダーチャートを.pngファイル形式で出力し、添付ファイルフィールドに保存するようにコードを修正し、それをプリントクリエーターで印刷（PDFで出力）することまでは確認できました。

トヨクモさんにも解決策を聞いていてお返事待ちですが、取り急ぎ御礼とお知らせです。ありがとうございました。

---

<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 年 8 月 20 日午前 6:31 UTC](https://community.cybozu.dev/t/topic/9385/4 "2024-08-20T06:31:17Z")

</div>

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