Biểu đồ tổ chức

Tổng quan

Biểu đồ tổ chức là sơ đồ phân cấp các nút, thường được dùng để mô tả mối quan hệ cấp trên/phụ thuộc trong một tổ chức. Cây gia đình là một loại biểu đồ tổ chức.

Ví dụ:

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

Đang tải

Tên gói là 'orgchart'.

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

Tên lớp của hình ảnh trực quan là google.visualization.OrgChart.

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

Định dạng dữ liệu

Một bảng có ba cột chuỗi, trong đó mỗi hàng đại diện cho một nút trong tổ chức biểu đồ. Sau đây là 3 cột:

  • Cột 0 – Mã nút. Tên này phải là duy nhất trong số tất cả các nút và có thể bao gồm mọi ký tự, bao gồm cả dấu cách. Thông tin này sẽ xuất hiện trên nút. Bạn có thể chỉ định một giá trị được định dạng để hiển thị trên biểu đồ, nhưng giá trị chưa được định dạng vẫn được sử dụng làm mã nhận dạng.
  • Cột 1 – [không bắt buộc] Mã nhận dạng của nút mẹ. Đây phải là giá trị chưa được định dạng từ cột 0 của hàng khác. Để nguyên chưa chỉ định cho nút gốc.
  • Cột 2 – [không bắt buộc] Văn bản trong chú giải công cụ sẽ hiển thị khi người dùng di chuột qua nút này.

Mỗi nút có thể có 0 hoặc 1 nút mẹ và không có hoặc có nhiều nút con.

Thuộc tính tuỳ chỉnh

Bạn có thể chỉ định các thuộc tính tuỳ chỉnh sau cho các phần tử của bảng dữ liệu bằng cách sử dụng phương thức setProperty() của DataTable:

Tên tài sản
Chọn kiểu

Áp dụng cho: hàng DataTable

Chuỗi kiểu nội tuyến để gán cho một nút cụ thể khi được chọn. Bạn phải đặt tùy chọn allowHtml=true để tùy chọn này hoạt động và bạn phải đặt tùy chọn này trước khi gọi draw() trên hình ảnh trực quan. Thao tác này sẽ ghi đè tùy chọn selectionColor cho nút đã chỉ định.

Ví dụ: myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

kiểu

Áp dụng cho: hàng DataTable

Chuỗi kiểu nội tuyến để gán cho một nút cụ thể. Thuộc tính selectedStyle sẽ ghi đè giá trị này. Bạn phải đặt tùy chọn allowHtml=true để tùy chọn này hoạt động và bạn phải đặt tùy chọn này trước khi gọi draw() trên hình ảnh trực quan. Thao tác này sẽ ghi đè tùy chọn color cho nút được chỉ định.

Ví dụ: myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

Các lựa chọn về cấu hình

Tên
cho phép thu gọn

Xác định xem thao tác nhấp đúp có thu gọn một nút hay không.

Loại: boolean
Mặc định: false
allowHtml

Nếu bạn đặt thành true, những tên có thẻ HTML sẽ hiển thị dưới dạng HTML.

Loại: boolean
Mặc định: false
màu

Không dùng nữa. Thay vào đó, hãy sử dụng buttonClass. Màu nền của các phần tử biểu đồ tổ chức.

Loại: string
Mặc định: '#edf7ff'
compactRows

Nếu bạn đặt chính sách này thành true, thì các cây con sẽ được đặt gần nhất có thể, miễn là các nút không chồng chéo nhau. Sử dụng tùy chọn này để giảm chiều rộng và chiều dài cạnh tổng thể của bản vẽ.

Loại: boolean
Mặc định: false
Lớp

Tên lớp để chỉ định cho các phần tử nút. Áp dụng CSS cho tên lớp này để chỉ định màu hoặc kiểu cho các phần tử biểu đồ.

Loại: string
Mặc định: default class name
đã chọn lớp nút

Tên lớp để chỉ định cho các phần tử nút đã chọn. Áp dụng CSS cho tên lớp này để chỉ định màu hoặc kiểu cho các phần tử biểu đồ đã chọn.

Loại: string
Mặc định: default class name
lựa chọn màu

Không dùng nữa. Thay vào đó, hãy chọn selectedNodeClass. Màu nền của các phần tử tổ chức được chọn.

Loại: string
Mặc định: '#d6e9f8'
size

"nhỏ", "trung bình" hoặc "lớn"

Loại: string
Mặc định: 'medium'

Phương thức

Phương thức
collapse(row, collapsed)
Thu gọn hoặc mở rộng nút.
  • row – Chỉ mục của hàng để mở rộng hoặc thu gọn.
  • collapsed Nên thu gọn hay mở rộng hàng, nếu đúng thì nghĩa là thu gọn.
Loại dữ liệu trả về: none
draw(data, options)

Vẽ biểu đồ.

Loại dữ liệu trả về: none
getChildrenIndexes(row)

Trả về một mảng có chỉ mục của phần tử con của nút đã cho.

Loại dữ liệu trả về Array.<number>
getCollapsedNodes

Trả về một mảng với danh sách các chỉ mục của nút đã thu gọn.

Loại dữ liệu trả về: Array.<number>
getSelection()

Triển khai getSelection() chuẩn. Các phần tử lựa chọn đều là các phần tử hàng. Có thể trả về nhiều hàng đã chọn.

Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
setSelection(selection)

Triển khai setSelection() chuẩn. Coi mọi mục lựa chọn là một mục lựa chọn hàng. Hỗ trợ lựa chọn nhiều hàng.

Loại dữ liệu trả về: không có

Sự kiện

Tên
thu gọn

Sự kiện được kích hoạt khi allowCollapse được đặt thành true và người dùng nhấp đúp vào một nút có nút con.

Thuộc tính:
collapsed – Một boolean cho biết đây là sự kiện "thu gọn" hay "mở rộng".
row – Chỉ mục không dựa trên hàng đó trong bảng dữ liệu, tương ứng với nút đang được nhấp vào.
di chuột qua

Được kích hoạt khi người dùng di chuột qua một hàng cụ thể.

Thuộc tính:
row – Chỉ mục không dựa trên hàng đó trong bảng dữ liệu, tương ứng với nút đang được di chuột qua.
on chuộtout

Được kích hoạt khi người dùng di chuột ra khỏi hàng.

Thuộc tính:
row – Chỉ mục không dựa trên hàng đó trong bảng dữ liệu, tương ứng với nút đang được di chuyển ra khỏi chuột.
chọn

Sự kiện chọn chuẩn

Thuộc tính:
Không
sẵn sàng

Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ biểu đồ, bạn nên thiết lập trình nghe cho sự kiện này trước khi gọi phương thức draw và chỉ gọi các phương thức sau khi sự kiện được kích hoạt.

Thuộc tính:
Không

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.