# グリッド チャート

グリッド チャート (グリッド チャート) は、グリッドでソートされたさまざまなサイズのシンボルを使用します。グリッド チャートは Visualization bundle に含まれています。

グリッド チャートには、2 つの軸と 1 つのメジャーが必要です。軸の値は X 軸と Y 軸です。メジャーは、各クロスのシンボルのサイズを決定する指標です。

円のグリッド チャート。円の色は軸 (四半期) で設定され、円のサイズはメジャー (売上高) に基づいています

円のグリッド チャート。円の色は軸 (四半期) で設定され、円のサイズはメジャー (売上高) に基づいています

円のグリッド チャート。円の色は軸 (四半期) で設定され、円のサイズはメジャー (売上高) に基づいています ![さまざまな色の円を示すグリッド チャート。](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Resources/Images/ex_gridchart.png)

[Grid Chart](https://play.vidyard.com/jz3Dr9s5X86DTpWu3ELWL7)

## 使用に適しているケース

グリッド チャートは、他の値よりも突出しているメジャー値を簡単に見つける必要があるときに便利です。例: ある月には売れ行きが良いが、他の月には売れ行きが悪い製品を確認したい。

メジャーが次の場合、グリッド チャートはうまく機能しません。

* 重複する値が多数ある。

* 数値的に近い値がある。

## グリッド チャートの作成

編集中のシートにグリッド チャートを作成できます。

次の手順を実行します。

1. アセット パネルで [カスタム オブジェクト] &gt; Visualization bundle を開き、Grid chart (トレリス コンテナー) オブジェクトをシートにドラッグします。

2. [軸の追加] ボタンをクリックして、チャートの x 軸の値を選択します。

3. 2 つ目の [軸の追加] ボタンをクリックして、チャートの y 軸の値を選択します。

4. [メジャーの追加] ボタンをクリックして、計量するメトリックを選択します。

これで、選択した軸およびメジャーと一緒にグリッド チャートが表示されます。

## ソート

グリッド チャート要素は、x 軸上で最小から最大の順にアルファベットまたは数値で自動的にソートされます。プロパティ パネルでいずれかの軸のソート順を変更できます。

次の手順を実行します。

1. プロパティ パネルにて、[スタイル] &gt; [ソート] に移動します。
2. 軸をクリックします。
3. [ソート] を [自動] から [カスタム] に切り替えます。
4. 次のオプションのいずれかを選択できます。
   * 数式でのソート: 昇順または降順。
   * 数値でのソート: 昇順または降順。
   * アルファベット順でのソート: 昇順または降順。

## チャートのスタイルの変更

グリッド チャートのスタイルはカスタマイズできます。

星のグリッド チャート。星の色とサイズは、メジャー (総売上高) によって設定されます。

星のグリッド チャート。星の色とサイズは、メジャー (総売上高) によって設定されます。

星のグリッド チャート。星の色とサイズは、メジャー (総売上高) によって設定されます。![星のグリッド チャート。](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Resources/Images/ex_gridchart_stars.png)

### シンボルのカスタマイズ

プロパティ パネルの [スタイル] &gt; [プレゼンテーション] タブから、シンボルの形状とサイズを変更できます。

* シンボル サイズ スライダーを使用してサイズを変更します。

* シンボル ドロップダウンを使用して、シンボル タイプを変更します。

### 記号にラベルを付ける

記号の個体値を直接チャートに配置することができます。[スタイル] &gt; [プレゼンテーション] タブで、[ラベル] を [オフ] から [自動] に切り替えます。

### グリッド チャートをヒートマップとして使用する

グリッド チャートのレイアウトをヒートマップに変更するには、プロパティ パネルの [スタイル] &gt; [表示] タブから行います。[レイアウト] のドロップダウン メニューから以下を選択します。

* 標準: チャートには個々の記号が表示されます。

* ヒートマップ: チャートは、データをグリッド表示し、凡例を色別に並べて表示します。

グリッド チャートをヒートマップ チャートとして使用する場合のビジュアル デモについては、「[グリッド チャートを使用したヒートマップの作成](https://share.vidyard.com/watch/pznWdVxeT4KgnACi6tZkcD)」を参照してください。

### 配色の変更

[色と凡例] タブからシンボルの配色を変更できます。[色] を [カスタム] に設定します。ドロップダウン メニューから以下を選択します。

* 単色: 任意の色を選択することができます。
* 軸ごと: [配色] で、使用する色の数を変更できます。
* メジャーごと: [配色] で、色のグラデーションを変更できます。[色を反転] チェックボックスをクリックして、グラデーションの順序を反転します。使用される色は、アプリのテーマに基づいています。
* 数式ごと: 数式にカラー コードを含めることができます。または、[数式は色分けされています] チェックボックスの選択を解除すると、色のグラデーションを変更できます。[色を反転] チェックボックスをクリックして、グラデーションの順序を反転します。使用される色は、アプリのテーマに基づいています。

### 範囲の制限の変更

メジャーまたは数式で色を付けると、範囲の制限をカスタマイズできます。全範囲は、軸の値によって定義されます。プロパティ パネルで [スタイル] &gt; [色と凡例] &gt; [範囲] に移動します。

* 最小値: 範囲の下限を定義します。
* 最大値: 範囲の上限を定義します。

### 軸のスケールの変更

x 軸と y 軸の表示をカスタマイズできます。プロパティ パネルで [スタイル] &gt; X 軸: [軸] または [スタイル] &gt; Y 軸: [軸] へ移動します。次を設定できます:

* [ラベルとタイトル]: ラベルとタイトルの表示内容を選択します。

* [ラベルの方向]: ラベルの表示方法を選択します。次のオプションがあります。

  * 自動: チャートで利用可能なスペースに応じて、他のオプションの 1 つを自動的に選択します。

  * 水平: ラベルは 1 本の水平線に配置されます。

  * 斜め: ラベルは水平に斜めに積み上げられます。

  * レイヤー: ラベルは 2 本の水平線にまたがってずらされています。

  ラベルの方向の例を表示するには、[X 軸と Y 軸](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-appearance-of-visualization.htm#X-axis) を参照してください。

* [位置]: 軸の目盛線の表示場所を選択します。

* 軸の値の数:

  * 自動: 使用されている軸とメジャーの数によって、表示可能な棒の数が指定されます。

  * 最大値: 表示可能な棒の数を最大数に設定します。

  * カスタム: [カスタム] を選択した場合、直接 [最大数] を使用して表示可能な棒の数に上限を設定するか、数式を入力することができます。[数式] をクリックして、数式エディタを開きます。

* グリッド線を表示: グリッド線を表示するかどうかを選択します。

## スタイル パネルを使用してスタイルをさらにカスタマイズする

プロパティ パネルの [スタイル] には、さまざまなスタイル オプションが用意されています。

チャートのスタイル指定をさらにカスタマイズするには、[スタイル] &gt; [プレゼンテーション] で [the スタイル指定 icon] をクリックします。スタイル指定パネルの [基本設定] および [チャート] タブには、さまざまなセクションがあります。

各セクションの横にある ![リセット](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Resources/Images/Icons/reset.svg) をクリックすると、スタイルをリセットできます。![リセット](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Resources/Images/Icons/reset.svg) [すべてをリセット] をクリックすると、スタイル指定パネルで使用可能なすべてのタブのスタイルがリセットされます。

個々のビジュアライゼーションのスタイル指定に関する一般的な情報については、「 [ビジュアライゼーションへのカスタム スタイル指定の適用](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Sense_Hub/Visualizations/style-visualization.htm)」を参照してください。

### テキストのカスタマイズ

[スタイル] &gt; [基本設定] で、タイトル、サブタイトル、脚注のテキストを設定できます。これらの要素を非表示にするには、[タイトルを表示] をオフにします。

チャートの異なるラベルの可視性は、チャートごとの設定とラベル表示オプションによって異なります。これらはプロパティ パネルで構成できます。

チャートに表示されるテキストのスタイルを指定できます。

次の手順を実行します。

1. プロパティ パネルで、 [スタイル] セクションを展開します。

2. [スタイル] &gt; [プレゼンテーション] で、the スタイル指定 icon [] をクリックします。

3. [基本設定] タブで、次のテキスト要素のフォント、強調スタイル、フォント サイズ、色を設定します。

   * タイトル

   * サブタイトル

   * 脚注

4. [チャート] タブで、次のテキスト要素のフォント、フォント サイズ、色を設定します。

   * 軸タイトル: 軸のタイトルのスタイルを指定します。

   * 軸ラベル: 軸のラベルのスタイルを指定します。

   * 値ラベル: 各軸の値のメジャー値を表示するラベルにスタイルを指定します。

   * 凡例タイトル: 凡例のタイトルのスタイルを指定します。凡例は [ヒートマップ] 構成でのみ使用できます。

   * 凡例ラベル: 個別の凡例アイテムのラベルのスタイルを指定します。凡例は [ヒートマップ] 構成でのみ使用できます。

### 背景のカスタマイズ

チャートの背景をカスタマイズできます。背景は、色と画像で設定できます。

次の手順を実行します。

1. プロパティ パネルで、 [スタイル] セクションを展開します。

2. [スタイル] &gt; [プレゼンテーション] で、the スタイル指定 icon [] をクリックします。

3. スタイル指定パネルの [一般] タブでは、背景色 (単一色または数式) を選択できます。メディア ライブラリまたは URL から画像を背景に設定することもできます。

   背景色を使用する場合は、スライダーを使用して背景の不透明度を調整します。

   背景画像を使用する際、画像のサイズや位置を調整できます。

### 境界線と影のカスタマイズ

チャートの境界線と影をカスタマイズできます。

次の手順を実行します。

1. プロパティ パネルで、 [スタイル] セクションを展開します。

2. [スタイル] &gt; [プレゼンテーション] で、the スタイル指定 icon [] をクリックします。

3. スタイル パネルの [一般] タブの [境界線] で、 [枠線] のサイズを調整してチャートの周囲の境界線を増減します。

4. 境界線の色を選択します。

5. [角の半径] を調整して、境界線の丸みを制御します。

6. [一般] タブの [影] で、影のサイズと色を選択します。影を消す場合は、 [None] (なし) を選択します。

## 制限事項

全般的な制限事項については、「[制限事項](https://help.qlik.com/ja-JP/sense/May2025/Subsystems/Hub/Content/Sense_Hub/Visualizations/VisualizationBundle/visualization-bundle.htm#Limitati)」を参照してください。

* プロパティ パネルで設定する [軸の値の数] には、軸ごとに 55 の制限があります。

* グリッド チャートに軸の制限を設定すると、チャートのラベルに要求よりも多くのアイテムが誤って表示されることがあります。

* このチャートで軸による色分けを使用すると、最大 100 個の一意の軸値と 100 個の一意の色を凡例にプロットできます。

関連する学習:

* [ビジュアライゼーション バンドル グリッド チャートを構成するにはどうすればよいですか?](https://help.qlik.com/lnk/How_configure_vizbundle_grid)

## 詳細を見る

* [ビジュアライゼーション バンドル グリッド チャートを構成するにはどうすればよいですか?](https://help.qlik.com/lnk/How_configure_vizbundle_grid)