概要
組織図は、ノードの階層構造を図したものです。組織内の上位 / 下位関係を示すためによく使用されます。ファミリー ツリーは組織図の一種です。
例
<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 行
選択したときに特定のノードに割り当てるインライン スタイルの文字列。これを機能させるには、オプション
例: |
スタイル |
適用先: DataTable 行
特定のノードに割り当てるインライン スタイルの文字列。これは
例:
|
設定オプション
名前 | |
---|---|
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) |
ノードを折りたたみまたは展開します。
戻り値の型:
none |
draw(data, options) |
グラフを描画します。 戻り値の型:
none |
getChildrenIndexes(row) |
指定したノードの子のインデックスを示す配列を返します。 戻り値の型
Array.<number> |
getCollapsedNodes |
折りたたみノードのインデックスのリストを含む配列を返します。 戻り値の型:
Array.<number> |
getSelection() |
標準の 戻り値の型: 選択要素の配列
|
setSelection(selection) |
標準的な 戻り値の型: なし
|
イベント
名前 | |
---|---|
折りたたむ |
プロパティ:
collapsed - これが「折りたたみ」イベントと「拡張」イベントのどちらであるかを示すブール値。row - クリックされたノードに対応するデータテーブルの行の 0 から始まるインデックス。
|
Onmouseover |
ユーザーが特定の行にカーソルを合わせるとトリガーされます。 プロパティ:
row - マウスオーバーされたノードに対応するデータテーブルの行の 0 から始まるインデックス。
|
Onmouseout |
ユーザーが行外にカーソルを合わせるとトリガーされます。 プロパティ:
row - データテーブル内の行のゼロベースのインデックス。マウスアウト元のノードに対応します。
|
select |
標準の選定イベント プロパティ:
なし
|
ready |
外部メソッド呼び出しのグラフの準備が完了しました。グラフを操作し、描画後にメソッドを呼び出す場合は、 プロパティ:
なし
|
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。