組織圖

簡介

組織圖是節點階層圖，通常用於呈現機構中的高階/從屬關係。家庭樹是一種機構圖表。

範例

 
<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);

資料格式

資料表有三個字串欄，其中每一列代表機構圖中的一個節點。以下是三個資料欄：

  • 第 0 欄 - 節點 ID。節點名稱不得重複，且可包含任何字元，包括空格。顯示在節點上。您可以指定要在圖表上顯示的格式化值，不過該格式仍會使用未格式化的值做為 ID。
  • 第 1 欄 - [選填] 父項節點的 ID。這應為另一個資料列第 0 欄的未格式化值。為根節點指定未指定值。
  • 第 2 欄 - [選用] 當使用者將遊標移到這個節點上時要顯示的工具提示文字。

每個節點可以有零或一個父項節點，以及零或多個子節點。

自訂屬性

您可以使用 DataTable 的 setProperty() 方法，將下列自訂屬性指派給資料表元素：

資源名稱
所選樣式

套用至：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。組織圖元素的背景顏色。

類型：string
預設：'#edf7ff'
compactRows

設為 true 時，只要節點不重疊，子樹狀結構會盡可能靠近。使用這個選項可以減少整體繪圖寬度和邊緣長度。

類型：boolean
預設：false
nodeClass

要指派給節點元素的類別名稱。將 CSS 套用至這個類別名稱，即可為圖表元素指定顏色或樣式。

類型：string
預設：default class name
已選取節點類別

要指派給所選節點元素的類別名稱。將 CSS 套用至這個類別名稱，以便為所選圖表元素指定顏色或樣式。

類型：string
預設：default class name
選項顏色

已不適用。請改用 selectedNodeClass。所選機構圖表元素的背景顏色。

類型：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() 實作。將每個選取項目視為列選項。支援選取多個資料列。

傳回類型：無

活動

名稱
收合

當 allowCollapse 設為 true，且使用者按兩下有子項的節點時，就會觸發事件。

屬性：
collapsed - 表示這是「收合」或「展開」事件的布林值。
row - 資料表中資料列的零索引，對應要點擊的節點。
Onmouseover

當使用者將滑鼠遊標懸停在特定資料列上時觸發。

屬性：
row - 資料表中資料列的零索引，對應滑鼠遊標懸停的節點。
Onmouseout

在使用者將滑鼠遊標懸停在資料列上時觸發。

屬性：
row - 資料表中資料列的零索引，對應要移出的節點。
選取

標準選取事件

屬性：
無
已就緒

圖表可供外部方法呼叫使用。如果您想要與圖表互動，並在繪製圖表後呼叫方法，請先為這個事件設定監聽器，然後再呼叫 draw 方法，並且只在事件觸發後呼叫這些方法。

屬性：
無

資料政策

系統會處理所有程式碼和資料，並在瀏覽器中顯示。系統不會將資料傳送至任何伺服器。