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

[naoya_miyashita (宮下直哉)]

Chart.jsを使ってkintoneに表示したレーダーチャートをレコード詳細のスペースに
反映させることはできました。
Chart.jsを使ってkintoneにレーダーチャートを表示する - cybozu developer network.

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

実行したコードは次の通りです
(() => {
‘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;

});

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

[mls-hashimoto (橋本大輔)]

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

[naoya_miyashita (宮下直哉)]

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

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

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