「kintoneで複数のグラフを同時に一覧表示したいけど、プラグインは使いたくない…」
そんな現場の声に応える、標準機能だけで複数グラフをダッシュボードのように並べて表示する具体的な方法を解説します。
グラフの作成から一覧への埋め込み、HTMLでのレイアウト調整ポイントまで、誰でもできる手順を実例つきでご紹介します。
なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。
kintone標準機能で複数グラフ表示を実現する方法
kintoneでは、通常、一つのグラフに対して一つの表示形式が設定されます。
例えば、年間の予算と実績を比較する際、各項目ごとにグラフを個別に作成する必要があります。複数のグラフを同時に表示させるには、多くの利用者が株式会社ミウラの提供する「Krew Dashboard」といったプラグインの導入を検討します。
しかし、kintoneの標準機能のみを使用して、複数のグラフを一覧でまとめて表示させる方法が存在します。
この方法は、有料プラグインの導入が難しい場合でも、必要な情報を一目で把握できるように工夫する手段として活用できます。
kintone標準機能とプラグインの比較
kintoneのグラフ機能では、基本的に一つの項目に対して一つのグラフしか表示できません。
そのため、複数の異なるグラフを一画面で確認したい場合、通常はプラグインの利用が一般的です。
特に「Krew Dashboard」は、複数のグラフ表示に加えて、月や店舗といった特定の条件でデータを絞り込み、表示されている全てのグラフが連動して変化するような高度な機能も提供しています。
一方で、本記事で解説するkintoneの標準機能を用いた方法は、グラフごとに発行される埋め込み用タグを一覧のHTML領域に貼り付けることで、複数のグラフを一覧形式で表示させます。
この方法は、動的なデータの絞り込みには対応していませんが、単に複数の集計結果をまとめて確認したい場合に有効な手段となります。
kintoneで複数グラフを表示する手順
kintoneの標準機能を用いて複数のグラフを一覧表示するには、以下の手順に従って設定を進めていきます。
- グラフの作成
- 一覧の新規作成とカスタマイズ設定
- グラフ埋め込み用タグの取得と貼り付け
- グラフのレイアウト調整
一つずつみていきましょう。
グラフの作成
まず、表示させたい個々のグラフを作成します。
例えば、余実管理アプリにおいて、売上や粗利の集計結果をグラフで確認したい場合、グラフタブから予算と実績を比較するクロス集計表形式のグラフを作成できます。
月ごとの予算額と実績額が表示されるように設定します。表示させたいグラフの数だけ、この作業を繰り返します。
一覧の新規作成とカスタマイズ設定
次に、作成したグラフをまとめて表示するための一覧を新規で作成します。
アプリの「一覧」タブを選択し、「＋」ボタンをクリックして新しい一覧を追加します。一覧の名称は任意で設定し、一覧の表示形式として「カスタマイズ」を選択します。
グラフ埋め込み用タグの取得と貼り付け
一覧のカスタマイズ設定画面には「HTML」という入力欄が表示されます。このHTML入力欄に、作成した各グラフの「埋め込み用タグ」を貼り付けます。
埋め込み用タグは、各グラフの表示画面の上部にあるメニューから取得できます。タグをコピーしたら、一覧のHTML入力欄に順番に貼り付けます。
このタグは「iframe」タグと呼ばれ、グラフをウェブページ内に埋め込むために用いられます。
グラフ名を非表示にするかどうかの選択もこの段階で行うことができます。タグの貼り付け後、設定を保存しアプリを更新すると、作成した一覧からグラフが表示されます。
グラフのレイアウト調整
複数のグラフを一覧に貼り付けた後、見た目を整えるためのレイアウト調整を行います。
グラフの埋め込み用タグには、横幅を示す「width」と高さを表す「height」の数値がダブルクォーテーションで囲まれて含まれています。
これらの数値を調整することで、各グラフの表示サイズを変更できます。
例えば、横に3つのグラフを並べたい場合、全体の幅に合わせて各グラフのwidthを調整し、試行錯誤しながら最適なレイアウトを見つけます。この調整作業を繰り返すことで、視覚的に整理されたダッシュボードを完成させることができます。
kintone標準機能とKrew Dashboardの機能差
kintoneの標準機能で複数のグラフを表示させる方法は、特定の要件を満たす場合に有効ですが、高度な機能をもつプラグインと比較すると、機能面で異なる点が存在します。
| 項目 | kintone標準機能 | Krew Dashboard |
| 複数グラフ表示 | 可能（iframeを一覧に埋め込み） | 可能（ダッシュボードとして提供） |
| グラフ表示の柔軟性 | 静的な集計データの表示に限られる | 複雑なグラフ表示に対応する |
| 動的な絞り込み | 不可（条件変更で全てのグラフが連動しない） | 可能（条件変更で全てのグラフが連動する） |
なお、HTML編集知識、手動でのレイアウト調整などの知識が必要となります。
プラグインの導入と設定
kintone標準機能を用いた複数グラフ表示は、基本的に作成済みのグラフデータを一覧にまとめて表示する形となります。
これに対して、Krew Dashboardは、例えば月や拠点といった特定の条件を選択するだけで、表示されている全てのグラフのデータがその条件に合わせて動的に変化する機能をもっています。
これにより、より複雑なデータ分析や状況に応じた柔軟なデータ表示が可能となります。標準機能での表示は、あくまで集計されたデータを複数のグラフで一覧として確認したい場合に限定されます。
kintone標準機能で複数グラフ表示を行う際の留意点
kintoneの標準機能で複数のグラフを一覧表示する方法は、手軽に導入できる反面、いくつかの留意点があります。
HTMLのiframeタグに含まれるwidthとheightの数値を手動で調整するため、期待するレイアウトを実現するには試行錯誤が必要です。
視覚的なバランスを保ちながら複数のグラフを配置するには、繰り返し調整作業を行う必要があります。
この方法では、Krew Dashboardが提供するような、特定の条件）を選択すると、表示されている全てのグラフのデータがその条件に合わせて動的に変化するような機能は利用できません。
これは、標準機能でのグラフ表示が、あくまで個別に作成された静的な集計結果をまとめて見せる形となるためです。
動的な絞り込みや、複雑な条件設定に基づいてグラフ全体を連動させたい場合には、Krew Dashboardのような専用のプラグインを導入する必要があります。
したがって、kintoneの標準機能を用いた複数グラフ表示は、単に集計された複数のグラフを一覧で確認したいという要件を満たす場合に特に有効です。より高度なデータ分析や柔軟な表示機能が求められる場合には、プラグインの活用を検討するようにしてください。
kintoneで複数グラフを一覧表示させて有効活用したい方はペパコミ株式会社へご相談ください
「kintone 複数 グラフ」を一画面で確認したい場合、プラグインを使わなくても標準機能で実現できます。各グラフの埋め込みタグを取得し、一覧のHTML欄に貼り付けることで、ダッシュボードのように複数のグラフを並べて表示可能です。
これにより、売上や予算実績など異なる集計結果を一度に把握でき、業務の見える化を効率的に進められます。動的な絞り込みや複雑な分析機能はプラグインに劣るものの、静的なデータを整理して見たいケースでは十分に有効です。
なお、ペパコミ株式会社では、「kintone」を活用した業務支援を行っています。業務効率化にお悩みの方は、ぜひ以下からお気軽にご相談ください。
コメント