Network chart エクステンション

ネットワーク グラフ (Network chart) により、データ セットからシートまでの接続ノードとエッジによるネットワークを描画できます。ネットワーク グラフには、情報の流れ、コンポーネントの相互作用、ネットワーク内のコンポーネントの配置場所が示されます。ネットワーク グラフは Visualization bundle に含まれています。

ネットワーク グラフでは、広範な概要や詳細な部分が表現されます。このグラフには軸が 4 つ必要です。軸にはメジャーを 3 つまで含めることができます。ノードはシステムのコンポーネントを表し、エッジはコンポーネントからコンポーネントへの情報の動きを示します。ネットワーク ノードは、最も頻繁に相互作用する相手のノードに接続されます。このビジュアライゼーションでは、さまざまなスタイル、色、サイズ、画像を使用してネットワークの異なるレベルを表現します。

使用に適しているケース

ネットワーク グラフの図により、コンピューターまたは無線通信ネットワークを示すことができます。図には、ネットワークのコンポーネントと、コンポーネントどうしの相互作用が示されます。たとえば、接続されているコンピューター、プリンター、モデム、ハブ、ルーターのグループなどです。このタイプのチャートは次の場合に有効です。

  • ネットワークの構造計画。
  • 既存ネットワークに応じた更新の調整。
  • ネットワーク問題の報告とトラブルシューティング。
  • コンポーネントの把握。
  • 詳細なネットワーク文書の作成。

データの書式設定

ネットワーク グラフでは、チャートを作成する前に、チャートで表示するデータをシステムに入力する必要があります。図には軸が 4 つ必要です。メジャーは任意です。ただし、軸とメジャーの両方により、ネットワーク グラフの異なる側面が制御されます。

軸データは、軸どうしの関連を示す 4 列データ シートとして書式設定する必要があります。

  1. 第 1 列 (1 つ目の軸): 「ノード識別子」ID 番号。この番号は、0 からチャートのノード合計数の間の整数にする必要があります。
  2. 第 2 列 (2 つ目の軸): チャートのノード名を表します。
  3. 第 3 列: 親ノードの ID リスト。これらの数値は、ノード識別子を示します。そうでない場合は「空の親ノード」とみなされ、そのノードをリンク元とするリンクはありません。
  4. 第 4 列: ノードが属する値グループを示し、ノードの色分けを制御します。これらの数字は整数にする必要があります。

以下に、Excel ファイルから取得され、NotepadAirports.csv として保存されるデータ例を示します。

ID;Name;LinkTo;Group;Volume 0;Frankfurt;;0; 1;London;0;1;5 2;Madrid;0;1;4 2;Madrid;1;1;8 3;Warsaw;0;1;7 4;Arlanda;0;1;1 3;Warsaw;1;1;5 4;Arlanda;1;1;6 5;Tunis;0;2;8 5;Tunis;2;2;4 6;Berlin;0;1;6 6;Berlin;4;1;4 7;Rome;0;1;6 7;Rome;6;1;3 8;San Fransisco;0;3;2 9;New York;0;3;9
 

最初のメジャーにより、各ノードのツール ヒントを制御します。ツール ヒントは、ノードにカーソルを合わせると表示されます。表示される値は、ネットワークのベースとなるデータから取得されます。メジャーは、データ文字列を数式項目に入力するか、プロパティ パネルの数式エディタ (Expression) の [データ] > [メジャー] で入力することによって変更できます。

Example:

A node value shown when hovering over with the value string.

値文字列にカーソルを合わせたときに表示されるノード値: ='Value of node: '&Sum(Volume)

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

ネットワーク グラフは、編集中のシートで作成できます。

次の手順を実行します。

  1. アセット パネルで [カスタム オブジェクトVisualization bundle] を開き、[Network chart] オブジェクトをシートにドラッグします。
  2. 最初の [軸の追加] ボタンをクリックして、チャートのノード識別子番号を選択します。
  3. 2 番目の [軸の追加] ボタンをクリックしてノード名を選択します。
  4. 3 番目の [軸の追加] ボタンをクリックして親ノードを選択します。
  5. 最後の [軸を追加] ボタンをクリックしてノード グループ軸を選択します。
  6. メジャーを追加する場合は、プロパティ パネルで [データ] をクリックします。[メジャー] で、[追加] をクリックし、メジャーを選択します。

    メジャーは 3 つまで追加できます。

軸 (および、該当する場合はメジャー) を追加すると、ネットワーク グラフ図が自動的に表示されます。

ネットワーク グラフの例

このネットワーク グラフの例では、基本データ セットに基づいて世界中の空港どうしの繋がりを図示します。ここでは、「データの書式設定」でのデータ セット例を使用します。

次の手順を実行します。

  1. アセット パネルで [カスタム オブジェクトVisualization bundle] を開き、[ネットワーク グラフ] オブジェクトをシートにドラッグします。
  2. 一番上の [軸の追加] ボタンをクリックし、ノード識別子として「ID」を選択します。
  3. 2 番目の [軸の追加] ボタンをクリックし、ノード ラベルとして「Name」を選択します。
  4. 3 番目の [軸の追加] ボタンをクリックし、親ノードとして「LinkTo」(リンク先) を選択します。
  5. 一番下の [軸を追加] ボタンをクリックし、グループ軸として「Group」を選択します。
  6. プロパティ パネルで [データ] をクリックします。[メジャー] で、[追加] をクリックし、数式項目に「='Volume: '&Sum(Volume)」と入力します。
  7. [追加] をクリックし、[項目から] リストをスクロール ダウンして、[Volume] > [Sum(Volume)] を選択します。
  8. [追加] をクリックし、[項目から] リストをスクロール ダウンして、[Volume] > [Sum(Volume)] を選択します。

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

A chart with four dimensions and three measures in a dynamic edge type, with dot nodes, and visible curve values.

動的エッジ タイプで、ドット ノードと可視曲線値を含み、軸が 4 つでメジャーが 3 つのチャート。

チャートの外観の変更

グラフは 1 つ以上の機能を指定してカスタマイズできます。値は有効な CSS のプロパティである必要があります。

エッジ タイプの設定

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

Examples:  

A chart with dynamic edge type (curves).

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

The same chart with curved CW edges.
曲線 CW エッジの同じチャート。

エッジ値の切り替え

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

エッジ ラベルの設定

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

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

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

ノード形状の設定

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

影オプションの切り替え

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

ソート

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

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

数値書式

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

次の手順を実行します。

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

制限事項

全般的な制限事項については、「Qlik が提供する ビジュアライゼーション エクステンション バンドルの 制限」を参照してください。