# ネットワーク グラフの作成

ネットワーク グラフ (Network chart) により、データ セットからシートまでの接続ノードとエッジによるネットワークを描画できます。ネットワーク グラフには、情報の流れ、コンポーネントの相互作用、ネットワーク内のコンポーネントの配置場所が示されます。ネットワーク グラフはビジュアライゼーション バンドルに含まれています。詳しくは「[Visualization bundle](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/VisualizationBundle/visualization-bundle.htm)」を参照してください。

このネットワーク グラフの例では、基本データ セットに基づいて世界中の空港どうしの繋がりを図示します。ここでは、「[データの書式設定](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/VisualizationBundle/creating-network-diagram.htm#Formatti)」でのデータ セット例を使用します。データ セット例をテキスト ファイルに保存し、新しいアプリケーションを作成し、データ セット例をロードすることによって準備します。

次の手順を実行します。

1. アセット パネルで、 [チャート] を開きます。

2. [レガシー] で、 [ネットワーク グラフ] オブジェクトをシートにドラッグします。

3. 一番上の [軸の追加] ボタンをクリックし、ノード識別子として「ID」を選択します。

4. 2 番目の [軸の追加] ボタンをクリックし、ノード ラベルとして「Namae」を選択します。

5. 3 番目の [軸の追加] ボタンをクリックし、親ノードとして「LinkTo」(リンク先) を選択します。

6. プロパティ パネルで [データ] をクリックします。[ノード グループ] で [軸を追加] ボタンをクリックし、グループ軸として「Group」を選択します。

7. [メジャー] の [ツール ヒント] で [追加] ボタンをクリックし、[Volume] > [Sum(NodeVolume)] を選択します。

8. [ノード サイズ] で [追加] ボタンをクリックし、[Volume] > [Sum(NodeVolume)] を選択します。

9. [エッジ サイズ] で [追加] ボタンをクリックし、[Volume] > [Sum(Volume)] を選択します。

   チャートが表示されます。

   ![動的エッジ タイプで、ドット ノードと可視曲線値を含み、軸が 4 つでメジャーが 3 つのチャート。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/ex_gen_networkchart.png)

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

チャートは 1 つ以上の機能を使用してカスタマイズできます。

### エッジ タイプの設定

プロパティ パネルの [設定] > [エッジ タイプ] で、チャート ノード間の曲線の形状を設定できます。メニューからチャート曲線の形状オプションを選択します。

動的エッジ タイプ (曲線) のチャート。

動的エッジ タイプ (曲線) のチャート。

動的エッジ タイプ (曲線) のチャート。   
![動的エッジ タイプ (曲線) のチャート。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/b2_335x227.png)

曲線 CW エッジの同じチャート。

曲線 CW エッジの同じチャート。

曲線 CW エッジの同じチャート。 ![曲線 CW エッジの同じチャート。](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/bild7_337x292.png)

### エッジ値の切り替え

エッジ値は、チャート ノードとそれらの幅の間の曲線の値を表します。このオプションにより、各曲線の数値を非表示にします。値を非表示にするには、プロパティ パネルの [設定] > [Display edge value] でスライド ボタンを左にスライドしてこのオプションをオフにします。

### エッジ ラベルの設定

エッジ ラベル値は各チャート曲線の数値です。これらのラベルは、位置を変更したり非表示にしたりすることができます。

* エッジ ラベル値を非表示: このオプションにより、ネットワーク グラフのエッジ ラベルを非表示にします。プロパティ パネルの [設定] > [Display edge value] で、スライド ボタンを切り替えます。

* エッジ ラベルの位置: このオプションにより、各チャート曲線上でのエッジ値の表示位置 (上または下) を決定します。メニューから該当するオプションを選択します。

### ノード形状の設定

ノードの形状はカスタマイズすることができます (点、方形、ダイアモンド形、または三角形)。プロパティ パネルで [設定] > [Node shape] の順に移動し、メニューからノード形状を選択します。

### 影オプションの切り替え

このオプションにより、(背景をハイライトするのに使用される) チャート曲線およびノードの背後の影効果をオフにすることができます。プロパティ パネルの [設定] > [Display shadow] で、スライド ボタンを切り替えます。

### ソート

既定のソート順序が選択されているシステムの場合 (プロパティ パネルの [ソート] から選択済みの軸またはメジャーで設定)、[ソート] は「自動」に設定されます。ソート順は数式によって個別に変更できます。

次の手順を実行します。

1. プロパティ パネルの [ソート] で、軸またはメジャーのメニューを開きます。
2. [ソート] スライド ボタンを左にスライドしてこのオプションを「自動」から「カスタム」に切り替えます。
3. [数式によるソート] チェック ボックスをオンにします。
4. [数式] で順序文字列を入力し、Enter を押します。数式エディタで、数式を使用して色を変更することもできます (the 数式エディターを開く icon)。
5. 下のメニューで [昇順] または [降順] を選択して開始順序を選択します。

### 数値書式

メジャー値は書式設定することが可能です。同じ値に、貨幣、日付、または期間などの異なる書式設定を適用可能です。チャートが更新され、変更された数値型が反映されます。

次の手順を実行します。

1. プロパティ パネルで [データ] > [メジャー] をクリックし、選択したメジャーをクリックします。
2. [数値書式] メニューで、適切な数値書式を選択します。
3. パネルの項目に詳細を入力します。これらの項目は、グラフを設定するときに「自動」以外のオプションを選択すると表示されます。

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

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

チャートのスタイル指定をさらにカスタマイズするには、[スタイル] > [プレゼンテーション] で [the スタイル指定 icon] をクリックします。 各セクションの横にある ![リセット](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/Icons/reset.svg) をクリックすると、スタイルをリセットできます。![リセット](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Resources/Images/Icons/reset.svg) [すべてをリセット] をクリックすると、スタイル指定パネルで使用可能なすべてのタブのスタイルがリセットされます。

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

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

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

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

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

次の手順を実行します。

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

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

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

   * タイトル

   * サブタイトル

   * 脚注

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

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

次の手順を実行します。

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

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

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

   情報メモ

   URL から背景画像を追加するには、その送信元をテナントのコンテンツ セキュリティ ポリシーの許可リストに追加する必要があります。オリジンを img-src ディレクティブで追加します。これは、管理者によって 管理 アクティビティ センターで実行されます。

   詳細については、「[CSP エントリの作成](https://help.qlik.com/ja-JP/cloud-services/Subsystems/Hub/Content/Sense_Hub/Admin/mc-administer-content-security-policy.htm#AddEntry)」を参照してください。

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

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

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

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

次の手順を実行します。

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

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

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

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

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

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

関連する学習コンテンツ：

* [ビジュアライゼーション バンドルのネットワークチャートを構成する方法](https://help.qlik.com/lnk/How_configure_Visualization_Bundle_Network_chart)

## 詳細を見る

* [ビジュアライゼーション バンドルのネットワークチャートを構成する方法](https://help.qlik.com/lnk/How_configure_Visualization_Bundle_Network_chart)