組織図

概要

組織図はノードの階層を示す図で、組織内の上位/下位関係を表すために一般的に使用されます。家系図は組織図の一種です。

例

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

読み込んでいます

パッケージ名は 'orgchart' です。

  google.charts.load('current', {packages: ['orgchart']});

ビジュアリゼーションのクラス名は google.visualization.OrgChart です。

  var visualization = new google.visualization.OrgChart(container);

データ形式

3 つの文字列列を持つテーブル。各行は orgchart 内のノードを表します。次の 3 つの列があります。

  • 列 0 - ノード ID。すべてのノードで一意である必要があり、スペースを含む任意の文字を使用できます。これはノードに表示されます。グラフに表示する書式設定された値を指定することもできますが、書式設定されていない値は ID として使用されます。
  • 列 1 - [省略可] 親ノードの ID。別の行の列 0 の書式なし値を指定する必要があります。ルートノードの場合は、未指定のままにします。
  • 列 2 - [省略可] ユーザーがこのノードにカーソルを合わせたときに表示されるツールチップ テキスト。

各ノードには、0 個または 1 個の親ノードと、0 個以上の子ノードを含めることができます。

カスタム プロパティ

DataTable の setProperty() メソッドを使用して、データテーブルの要素に次のカスタム プロパティを割り当てることができます。

プロパティ名
selectedStyle

適用先: DataTable 行

選択されたときに特定のノードに割り当てるインライン スタイル文字列。このオプションを機能させるには、オプション allowHtml=true を設定する必要があります。また、ビジュアリゼーションで draw() を呼び出す前に設定する必要があります。これは、指定したノードの selectionColor オプションをオーバーライドします。

例:   myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

スタイル

適用先: DataTable 行

特定のノードに割り当てるインライン スタイル文字列。これは selectedStyle プロパティでオーバーライドされます。このオプションを機能させるには、オプション allowHtml=true を設定する必要があります。また、ビジュアリゼーションで draw() を呼び出す前に設定する必要があります。これは、指定したノードの color オプションをオーバーライドします。

例:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

構成オプション

名前
allowCollapse

ダブルクリックでノードを折りたたむかどうかを指定します。

タイプ: boolean
デフォルト: false
allowHtml

true に設定した場合、HTML タグを含む名前が HTML としてレンダリングされます。

タイプ: boolean
デフォルト: false
color

サポートを終了しました。代わりに nodeClass を使用してください。orgchart 要素の背景色。

タイプ: string
デフォルト: '#edf7ff'
compactRows

true に設定すると、ノードが重複しない限り、サブツリーは可能な限り近くに配置されます。このオプションを使用すると、描画全体の幅と端の長さを小さくできます。

タイプ: boolean
デフォルト: false
nodeClass

ノード要素に割り当てるクラス名。このクラス名に CSS を適用して、グラフ要素の色やスタイルを指定します。

タイプ: string
デフォルト: default class name
selectedNodeClass

選択したノード要素に割り当てるクラス名。このクラス名に CSS を適用して、選択したグラフ要素の色やスタイルを指定します。

タイプ: string
デフォルト: default class name
selectionColor

サポートを終了しました。代わりに selectedNodeClass を使用してください。選択した orgchart 要素の背景色。

タイプ: string
デフォルト: '#d6e9f8'
サイズ

「small」、「medium」、「large」

タイプ: string
デフォルト: 'medium'

メソッド

メソッド
collapse(row, collapsed)
ノードを折りたたむか展開します。
  • row - 展開または折りたたむ行のインデックス。
  • collapsed: 行を閉じるか展開するかを示します。true は折りたたむことを意味します。
戻り値の型: none
draw(data, options)

グラフを描画します。

戻り値の型: none
getChildrenIndexes(row)

指定したノードの子のインデックスを含む配列を返します。

戻り値の型 Array.<number>
getCollapsedNodes

折りたたまれたノードのインデックスのリストを含む配列を返します。

戻り値の型: Array.<number>
getSelection()

標準の getSelection() 実装。選択要素は、すべての行要素です。選択した複数の行を返すことができます。

戻り値の型: 選択要素の配列
setSelection(selection)

標準 setSelection() 実装。すべての選択エントリを行の選択として扱います。複数の行を選択できます。

戻り値の型: none

イベント

名前
折りたたむ

allowCollapse が true に設定され、ユーザーが子のあるノードをダブルクリックしたときにトリガーされるイベント。

プロパティ:
collapsed - 「折りたたみ」イベントか「展開」イベントかを示すブール値。
row - クリックされたノードに対応する、データテーブル内の行のゼロベースのインデックス。
onmouseover

ユーザーが特定の行にカーソルを合わせるとトリガーされます。

プロパティ:
row - マウスオーバーしたノードに対応する、データテーブル内の行のゼロベース インデックス。
onmouseout

ユーザーが行の外にカーソルを合わせるとトリガーされます。

プロパティ:
row - マウスアウト元のノードに対応する、データテーブル内の行のゼロベースのインデックス。
select

標準選択イベント

プロパティ:
なし
ready

グラフで外部メソッド呼び出しの準備が整いました。グラフを操作し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前にこのイベントのリスナーを設定し、イベントが発生した後にのみメソッドを呼び出す必要があります。

プロパティ:
なし

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはサーバーに送信されません。