rex0220 印刷屋プラグイン kintoneグラフの埋め込みタグ表示

rex0220 印刷屋プラグインで、複数の kintone グラフをまとめて表示してみます。
埋め込みタグのグラフを img 化して表示します。

概要

印刷屋プラグインは、埋め込みタグのグラフを画像化して img タグで表示します。
他アプリのグラフも表示できます。

• プレビュー画面

印刷屋プラグイン設定

埋め込みタグの iframe は、印刷屋プラグインで img に置き換えられます。
css は、img タグに対して指定してください。

.pcraft-graph-header {
  font-size: 24px;
  margin: 30px;
}
.pcraft-graph-container {
  display: flex;
  gap: 20px; /* グラフ間の間隔 */
  margin-bottom: 30px; /* 下のコンテナとの間隔 */
}

.graph1 {
  display: flex;
  flex-direction: column; /* ラベルと画像を縦並びに */
  align-items: center; /* 中央寄せ */
}

.graph1 img {
  width: 100%;
}

kintone 埋め込みタグ（iframe）をコピペして貼り付けます。
iframe は、印刷屋プラグインで img タグに置き換えられます。

<div class="rex0220-pcraft-page">
  <div class="pcraft-graph-header">案件まとめグラフ ${DATE_FORMAT("TODAY","YYYY年M月D日")}</div>
  <div class="pcraft-graph-container">
    <div class="graph1">
      <span>見込み金額</span>
      <iframe width="800" height="600" frameborder="0"
        src="https://devenxyfi.cybozu.com/k/381/report/portlet?report=2063&amp;chartType=column&amp;stackType=clustered"></iframe>
    </div>
    <div class="graph1">
      <span>顧客別合計金額</span>
      <iframe width="800" height="600" frameborder="0"
        src="https://devenxyfi.cybozu.com/k/381/report/portlet?report=11252053&amp;chartType=pie"></iframe>
    </div>
  </div>
  <div class="pcraft-graph-container">
    <div class="graph1">
      <span>オプション費用</span>
      <iframe width="800" height="600" frameborder="0"
        src="https://devenxyfi.cybozu.com/k/381/report/portlet?report=11252057&amp;chartType=bar&amp;stackType=clustered"></iframe>
    </div>
  </div>
</div>