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
Ví dụ: |
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
Ví dụ:
|
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.
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 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
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 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 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.