KPI カード

1.バージョン

2.応用シーン

[KPIカード]は、KPI値を直感的に表示するためのコンポーネントであり、選択したフィールドの数値を直接表示することができます。

例：売上高、利益、数量などをKPI指標カードで表示する場合：

3.データ要件

KPIカードのデータ要件は以下の表の通り：

4.チャートの特徴

1）メリット

● 視認性：最終的なデータ結果を直感的に表示でき、閲覧者が重要なデータを素早く把握できます。

2）デメリット

● 表示の制限：単一のデータポイントしか表示できないため、情報量が限定的で深掘り分析には向きません。

売上高、利益、数量などをKPI指標カードで表示します

サンプルデータダウンロード：スーパーマーケットの販売データ.xlsx

1.データ準備

サンプルデータをダウンロードし、FineBI にアップロードします。以下の図のように：

2.コンポーネント作成

1）左下隅の[コンポーネント]ボタンをクリックします

2）[チャートタイプで[KPIカード]を選択します

3）左側の分析待ちのエリアから「売上高」、「利益」、「数量」を[テキスト]欄にドラッグ＆ドロップします。以下の図のように：

注意：ドラッグ＆ドロップした指標フィールドの指標値は空であってはならず、そうでないとKPI 指標カードは機能しません。

3.テキスト内容の書式の設定

[テキスト]欄の[設定]ボタンをクリックし、テキストの[内容の書式]を設定します。以下の図のように：

各レイアウトの特徴：

● 左側スタイル：レイアウトスタイルのみで、アイコンは挿入されません。

● 右側スタイル：レイアウトスタイルに加えてアイコン挿入が可能で、アイコンを使用したい場合はこちらを推奨します。

3.1事前定義の内容書式を使用する

事前定義の内容書式のレイアウトスタイルは以下の表の通り：

事前定義名	左（アイコンを挿入しないレイアウト）	右（アイコンを挿入するレイアウト）
一次および二次指標1
一次および二次指標2
一次および二次指標3
並置指標1
並置指標2

3.2 カスタム内容スタイル

1）事前定義スタイルに満足できない場合、ユーザは自由に内容をカスタマイズできます。まず事前定義スタイルを一つ選択し、それを基に編集できます。以下の図のように：

2）リッチテキストエディタでは、任意の文字を手動で入力でき、フォント、フォントサイズ、太字、斜体、フォントカラー、整列などの効果も設定できます。以下の図のように：

3）段組みを変更し、KPIカードの内容レイアウトを変更します。各段組み内に内容を入力できます。

• 段組みをクリックすると、既存段組みの[段組み方法]を変更できます。

• 段組みがない場所をクリックすると、この行に段組みを追加できます

例えば、コンポーネントの[段組みレイアウト]を「1 1 2」から「2 2 4」に変更します。以下の図のように：

4）カスタマイズした内容に満足できない場合は、[リセット]ボタンをクリックすることで初期状態に戻せます。

5）指標カードにアイコンを挿入することで、たとえば「売上高」、「利益」、「数量」それぞれにアイコンを追加できます。

マウスを段組みの上に置き、[アイコン追加]をクリックします。以下の図のように：：

アイコンをクリックすることで、使用する図形を変更できます。以下の図のように：

アイコンは段組み内にのみ追加可能です。「売上高」の行には分割が設定されていないため、先に段組みを追加してから図形を挿入します。以下の図のように：

[確定]をクリックすると、効果は以下の図のようになります：

4.形状条件の設定

KPIカードでは、形状条件を設定することも可能です。たとえば、売上目標が400万の場合、形状属性を使って達成状況を可視化することができます。

1）[形状条件]をクリックし、「売上高」の指標を選択して[条件を追加]をクリックし、特定条件を設定します。

2）売上高の異なる数値区間に応じて、異なる色や形状を設定します。たとえば、売上高が300 万～400 万円の範囲にある場合、目標達成が4 分の3を超えたことを示すために、[4 分の3 円グラフ]の形状を使用し、色は淡い赤を選択して視覚的に達成度を表現できます。

3）[コンディションによる色が変化]にチェックを入れることで、表示される数値の色も条件設定の色と一致させることができます。

注意：色の優先順位：チャート属性の色 ＞ コンディションによる条件が変化の色 ＞ リッチテキストのフォント色

効果は以下の図のように：

4）数値に対して色の条件設定だけを行い、形状を表示させたくない場合は、形状として[無]を選択し、色のみを設定することができます。以下の図のように：

効果は以下の図のように：

5.ダッシュボードの作成

1）分析テーマの編集画面下部で[ダッシュボード追加]をクリックします。

2）ダッシュボードの編集画面に入り、作成したコンポーネントをドラッグして配置し、最終的な表示効果を確認します。以下の図のように：

6.効果プレビュー

1）PC端末

2）モバイル端末