Biểu đồ tổ chức

Tổng quan

Biểu đồ tổ chức là sơ đồ gồm một hệ phân cấp các nút, thường dùng để mô tả các mối quan hệ cấp trên/cấp dưới trong một tổ chức. Cây gia phả 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ó 3 cột chuỗi, trong đó mỗi hàng đại diện cho một nút trong biểu đồ tổ chức. Sau đây là 3 cột:

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

Mỗi nút có thể không có hoặc có một 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 thuộc tính
selectedStyle

Á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 tuỳ chọn allowHtml=true để tuỳ chọn này hoạt động và phải được đặt trước khi gọi draw() trên hình ảnh trực quan. Thao tác này sẽ ghi đè lựa 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 cùng dòng để gán cho một nút cụ thể. Thuộc tính này sẽ bị thuộc tính selectedStyle ghi đè. Bạn phải đặt tuỳ chọn allowHtml=true để tuỳ chọn này hoạt động và phải được đặt trước khi gọi draw() trên hình ảnh trực quan. Thao tác này sẽ ghi đè tuỳ chọn color cho nút đã chỉ định.

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

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

Tên
allowCollapse

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 chính sách này thành true, thì các tên chứa 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ụngnodeClass. Màu nền của các phần tử trên biểu đồ tổ chức.

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

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

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

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ử trong biểu đồ.

Loại: string
Mặc định: default class name
selectedNodeClass

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
selectionColor

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

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

"nhỏ", "vừa" 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 cần mở rộng hoặc thu gọn.
  • collapsed Xác định xem cần thu gọn hay mở rộng hàng, trong đó giá trị true có nghĩa là thu gọn.
Loại trả lại hàng: none
draw(data, options)

Vẽ biểu đồ.

Loại trả lại hàng: none
getChildrenIndexes(row)

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

Loại trả lại hàng Array.<number>
getCollapsedNodes

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

Loại trả lại hàng: Array.<number>
getSelection()

Cách triển khai getSelection() chuẩn. Phần tử lựa chọn là tất cả 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ảng gồm các phần tử lựa chọn
setSelection(selection)

Cách triển khai setSelection() tiêu chuẩn. Coi mọi mục nhập lựa chọn là một lựa chọn hàng. Hỗ trợ chọn nhiều hàng.

Loại trả lại: không có

Sự kiện

Tên
thu gọn

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

Tài sản:
collapsed – Giá trị boolean cho biết đây là sự kiện "thu gọn" hay "mở rộng".
row – Chỉ mục từ 0 của hàng trong bảng dữ liệu, tương ứng với nút đang được nhấp.
onmouseover

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

Tài sản:
row – Chỉ mục từ 0 của hàng trong bảng dữ liệu, tương ứng với nút mà bạn di chuột qua.
onmouseout

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

Tài sản:
row – Chỉ mục từ 0 của hàng trong bảng dữ liệu, tương ứng với nút bị di chuột ra.
chọn

Sự kiện chọn chuẩn

Tài sản:
Không có
sẵn sàng

Biểu đồ này đã 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.

Tài sản:
Không có

Chính sách về dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.