組織圖

總覽

組織圖是節點階層的圖表，通常用於描繪組織中的優越/從屬關係。家族樹是一種組織圖，

範例

 
<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() 方法，將下列自訂屬性指派給資料表元素：

資源名稱
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
顏色

已淘汰。請改用 nodeClass。組織圖元素的背景顏色。

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

如果將這項政策設為 True，只要節點不重疊，系統就會盡可能靠近子樹狀結構。 使用這個選項可降低整體繪圖寬度和邊緣長度。

類型： boolean
預設： false
nodeClass

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

類型： string
預設： default class name
selectedNodeClass

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

類型： string
預設： default class name
selectionColor

已淘汰。請改用 selectedNodeClass。所選機構組織元素的背景顏色。

類型： string
預設： '#d6e9f8'
大小

「小」、「中」或「大」

類型： 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 方法，並只在事件觸發後呼叫這些方法。

資源：
無

資料政策

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