kintoneの標準機能で複数グラフを1画面に表示！

この記事内容の効用とメリット

kintoneで複数のグラフを切り替えて見るのは、少し面倒に感じることはありませんか？
この方法を使えば、1つの画面に複数のグラフを並べて表示できるようになります。

複数のデータを同時に比較できるので、会議や分析のときにとても便利です。
標準機能だけで設定できるので、特別な知識や外部ツールは必要ありません。
グラフの切り替え操作が不要になるので、日常業務の効率がアップします。

設定方法

2つ～4つのグラフを同時に表示できます
2つ表示は横並び、4つ表示は2列×2行に並べると見やすいです。
3つ表示の場合は、4つの枠を作って1枠を空けるとバランスよく見えます。
グラフのクリックで拡大表示が可能
画面に並べたグラフのタイトルをクリックすると、元の大きなサイズで表示できるので安心です。
HTMLコードの貼り付けだけで設定OK
グラフ画面から「埋め込みタグ」をコピーして、カスタマイズビューに貼り付けるだけで簡単に設定できます。

注意点

幅や高さの調整が必要です
初期の埋め込みタグは width="800"、height="600" ですが、マルチ表示では width="100%"、height="400" にするのがおすすめです。
3つ以上のグラフを並べるときはテーブルレイアウトを使います
<table>タグで2列×2行に配置すると、きれいに整列して表示されます。
下記のサンプルHTMLコードをコピーして使えば、簡単に実装出来ます！
スマホ表示は不向きです
この設定はPC画面向けのため、スマートフォンで見ると小さすぎて見ずらくなることがあります。

サンプルHTMLコード

<table style="width: 100%; border-collapse: collapse;">
  <!-- １行目の設定 -->
  <tr>
    <!-- グラフ１ -->
    <td style="width: 50%; text-align: center; vertical-align: top;">
    <!-- この下にグラフの埋め込みタグを貼り付ける -->

    </td>
     <!-- グラフ２ -->
    <td style="width: 50%; text-align: center; vertical-align: top;">
    <!-- この下にグラフの埋め込みタグを貼り付ける -->

    </td>
  </tr>
  <!-- ２行目の設定 -->
  <tr>
    <!-- グラフ３ -->
    <td style="width: 50%; text-align: center; vertical-align: top;">
    <!-- この下にグラフの埋め込みタグを貼り付ける -->

    </td>
     <!-- グラフ４ -->
    <td style="width: 50%; text-align: center; vertical-align: top;">
    <!-- この下にグラフの埋め込みタグを貼り付ける -->

    </td>
  </tr>
</table>

活用事例

案件管理アプリに4つのグラフを表示
「月別案件数」「売上見込みの集計」「担当者別進捗」「案件別の内訳」を同時に表示できるので、営業会議の資料準備と印刷作業が不要になりました。
クロス集計表を2種類並べて表示
kintoneのクロス集計表の集計項目は1つしか設定できないので、数量と金額のクロス集計結果を知りたい場合は2つのクロス集計表を別々に表示していましたが、金額と数量のクロス集計表を２つ並べて表示することで販売データの分析がスムーズになりました。

※クロス集計表を2列表示するカスタマイズ方法に興味がある方は、以下の記事を参考にしてください。

まとめ

kintoneの標準機能を工夫するだけで、複数のグラフやクロス集計表を同時に表示できるようになります。
ちょっとした工夫で、日々の業務や分析がぐっと楽になりますよ。
「kintoneをもっと便利に使いたい」と思ったときは、まずこの方法を試してみてはいかがでしょうか？

自分でカスタマイズしてみたい方へ

以下のNote記事で本記事のカスタマイズ事例を紹介しています。
記事内で紹介しているコード類は、無料で利用できるので是非挑戦してみて下さい。

「note:アプリ活用研究会（キン活）」は、当サイトのメンバーが執筆しています。

kintoneでグラフを複数表示する｜アプリ活用研究会（キン活）

やりたいこと kintoneのグラフを1画面に２つ以上並べて表示したい。グラフ表示を切り替えるのが面倒なので、並べて表示したい。アプリにグラフの「マルチ表示」画面を追加したいというご要望です。これは「標準機能」だけで実現可能です。マルチ表示したいグラフの「埋め込みタグ」をコピーして「カスタマイズ」型の一覧表に表示用のHTMLコードを貼り付けすればマルチ表示できます。デモ画面アプリストア／案件管理アプリのグラフを２種類表示したパターン案件管理アプリのグラフを3種類...

kintone人材育成研修

この様なカスタマイズを自分で出来る様になりたい方は、当サイトの「Kintome人材育成」上級コースの受講をご検討して下さい。当サイトのTIPSで紹介しているカスタマイズ例のテンプレートを使えば、簡単に実装出来ます！
上級コースの受講者には、特典で当サイトのカスタマイズテンプレート（3種類まで）と３か月のサポート契約を無償でご提供しています。

研修目的を「カスタマイズテンプレートのアプリ導入」とする研修メニューもご提案可能です。

📣カスタマイズ・導入支援いたします！

本記事の様な「kintoneアプリのカスタマイズ」をご希望の企業様へ
kintoneを便利に活用できるカスタマイズと運用支援は、ぜひ当社にご相談ください！

お問い合わせはこちらからどうぞ！

#kintone #標準機能 #便利な使い方

Tips