組織図

概要

組織図は、ノードの階層構造を図したものです。組織内の上位 / 下位関係を示すためによく使用されます。ファミリー ツリーは組織図の一種です。

<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 個以上の子ノードを持つことができます。

カスタム プロパティ

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

プロパティ名
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');

設定オプション

名前
allow 折りたたみ

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

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

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

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

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

タイプ: string
デフォルト: '#edf7ff'
コンパクト行

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

タイプ: boolean
デフォルト: false
ノードクラス

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

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

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

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

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

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

「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() 実装。すべての選択エントリを行の選択として扱います。複数行の選択をサポートします。

戻り値の型: なし

イベント

名前
折りたたむ

allowCollapsetrue に設定され、ユーザーが子を持つノードをダブルクリックするとトリガーされるイベント。

プロパティ:
collapsed - これが「折りたたみ」イベントと「拡張」イベントのどちらであるかを示すブール値。
row - クリックされたノードに対応するデータテーブルの行の 0 から始まるインデックス。
Onmouseover

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

プロパティ:
row - マウスオーバーされたノードに対応するデータテーブルの行の 0 から始まるインデックス。
Onmouseout

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

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

標準の選定イベント

プロパティ:
なし
ready

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

プロパティ:
なし

データポリシー

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