Tạo Sơ Đồ Cơ Cấu Tổ Chức Đẹp Mắt Trong Power BI Với HTML Content
6/2/2025
Tạo Sơ Đồ Cơ Cấu Tổ Chức Đẹp Mắt Trong Power BI Với HTML Content
Sơ đồ cơ cấu tổ chức đóng vai trò quan trọng trong việc trực quan hóa hệ thống phân cấp và các mối quan hệ trong một tổ chức. Thông qua sơ đồ này, người xem có thể nhanh chóng nắm bắt được cấu trúc, sự phân công trách nhiệm và luồng thông tin giữa các bộ phận hoặc cá nhân. Việc trực quan hóa này mang lại nhiều lợi ích thiết thực trong quản lý, hoạch định nguồn nhân lực và cải thiện hiệu quả giao tiếp nội bộ. Bài blog này sẽ hướng dẫn bạn từng bước cách tạo sơ đồ cơ cấu tổ chức đẹp mắt và hiệu quả như mẫu dưới đây trong Power BI bằng cách sử dụng “HTML Content”:
Giới thiệu về HTML và Sơ đồ Cơ cấu Tổ chức
HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo cấu trúc và nội dung cho các trang web. HTML còn có thể kết hợp với CSS (Cascading Style Sheets) để kiểm soát giao diện của các phần tử, bao gồm màu sắc, kích thước, bố cục và nhiều thuộc tính hiển thị khác.
Việc xây dựng code HTML và CSS từ đầu là không cần thiết, người dùng có thể tận dụng rất nhiều thư viện JavaScript và CSS đã được phát triển sẵn cho việc tạo sơ đồ cơ cấu tổ chức. Các thư viện như OrgChart JS, yFiles, GoJS, Highcharts, DHTMLX Diagram và Syncfusion JavaScript Diagram cung cấp các giải pháp dựng sẵn. Người dùng có thể tìm kiếm và sử dụng các code HTML và CSS mẫu từ các thư viện này, thường được cung cấp kèm theo tài liệu hướng dẫn hoặc các ví dụ trực tuyến. Thậm chí, các công cụ trí tuệ nhân tạo như ChatGPT cũng có thể hỗ trợ trong việc tạo và kết hợp code HTML và CSS theo yêu cầu của người dùng. Việc tận dụng các nguồn tài nguyên có sẵn này giúp người dùng tiết kiệm đáng kể thời gian và công sức so với việc tự mình xây dựng mọi thứ từ đầu.
Các bước tạo Sơ đồ Cơ cấu Tổ chức bằng HTML Content
1. Chuẩn bị dữ liệu
Để tạo sơ đồ cơ cấu tổ chức, bạn cần chuẩn bị dữ liệu theo cấu trúc phù hợp. Thông thường, dữ liệu sẽ như sau:
2. Soạn thảo code HTML mẫu cho sơ đồ cơ cấu tổ chức:
Tiếp theo, bạn cần soạn thảo code HTML để biểu diễn cấu trúc và giao diện của sơ đồ cơ cấu tổ chức. Ở đây, bạn có thể sử dụng đoạn code HTML sẵn có dưới đây:
<!DOCTYPE html>
<html>
<head>
<style>
.org-chart {
display: flex;
flex-direction: column;
align-items: center;
font-family: Arial, sans-serif;
width: 806px;
Đoạn code trên sử dụng HTML và CSS để tạo ra một sơ đồ tổ chức trực quan. Sơ đồ hiển thị các vị trí/vai trò theo cấu trúc phân cấp, sử dụng màu sắc riêng cho từng loại vai trò, có đường kẻ nối thể hiện mối quan hệ, và cung cấp thông tin chi tiết qua tooltip khi người dùng di chuột qua từng vị trí.
3. Nhập code HTML vào Power BI
Cách 1: Tạo DAX measure để chứa code HTML
Với cùng đoạn code HTML trước đó, bạn sẽ cần phải chỉnh sửa một chút để đoạn code phù hợp để truyền vào hàm DAX. Ở đây, chúng tôi sẽ cung cấp cho bạn hàm DAX hoàn chỉnh, được chỉnh sửa từ đoạn code HTML ở phần trên.
Org Chart HTML =
VAR HTMLContent =
"<!DOCTYPE html>"
& "<html>"
& "<head>"
& "<style>"
& " .org-chart {"
& " display: flex;"
& " flex-direction: column;"
& " align-items: center;"
Đoạn DAX này định nghĩa Measure Org Chart HTML bằng cách sử dụng biến VAR HTMLContent để xây dựng và lưu trữ toàn bộ chuỗi code HTML. Mỗi dòng HTML gốc được chuyển thành một chuỗi văn bản DAX (trong dấu «...») và chúng được ghép nối tuần tự bằng toán tử &. Cuối cùng, lệnh RETURN HTMLContent trả về chuỗi HTML hoàn chỉnh đã được tạo và lưu trong biến.
Tiếp theo, bạn hãy tạo measure mới với đoạn DAX trên:
Cách 2: Sử dụng File Excel để lưu trữ code HTML
Trong cách này, bạn cần tạo một file Excel để lưu trữ code này như ảnh dưới đây, đoạn code HTML đã được chúng tôi cung cấp ở phần đầu của bài viết:
Tiếp theo, bạn hãy import file Excel đã tạo vào Power BI Desktop.
4. Sử dụng visual “HTML Content” để hiển thị sơ đồ
Cuối cùng, bạn sẽ sử dụng visual "HTML Content" để hiển thị sơ đồ cơ cấu tổ chức dựa trên code HTML đã import. Nếu bạn chưa có visual này, hãy import nó từ AppSource. Trên ribbon Home, chọn "More visuals", chọn “From AppSource”.
- Tìm kiếm "HTML Content" và thêm nó vào báo cáo của bạn.
- Trên canvas báo cáo, nhấp vào biểu tượng của visual "HTML Content" để thêm nó vào báo cáo. Visual “HTML Content” sẽ hiện ra trong báo cáo của bạn như thế này:
- Kéo thả cột / measure bạn vừa tạo có chứa đoạn code HTML vào trường Values:
- Sơ đồ cơ cấu tổ chức của bạn sẽ được hiển thị dựa trên code HTML bạn đã cung cấp trước đó. Bạn có thể cần điều chỉnh kích thước và vị trí của visual trên canvas để hiển thị đầy đủ sơ đồ một cách rõ ràng.
Kết luận
Visual "HTML Content" trong Power BI hỗ trợ tương tác như tooltip nhưng người dùng cần lưu ý các hạn chế về hiệu suất, bảo mật, sự khác biệt hiển thị giữa Desktop và Service, lỗi cú pháp, và khả năng gặp vấn đề khi publish báo cáo do chính sách visual của tổ chức.
Hi vọng bài blog này giúp bạn hiểu rõ hơn về cách tạo sơ đồ cơ cấu tổ chức đẹp mắt và tùy biến trong Power BI bằng cách sử dụng visual "HTML Content". Chúng tôi khuyến khích bạn thử nghiệm với các code HTML và CSS khác nhau, cũng như khám phá các thư viện và mẫu có sẵn để tạo ra những sơ đồ cơ cấu tổ chức độc đáo và hiệu quả nhất cho nhu cầu của mình.
Nguồn tham khảo
Microsoft Fabric Community. (2024, tháng 9). HTML Content visual in Power BI report gives error. Truy cập ngày 1 tháng 4 năm 2025, từ https://community.fabric.microsoft.com/t5/Desktop/HTML-Content-visual-in-Power-BI-report-gives-error/td/p/4132985
NextGen BI Guru. (2023, tháng 1). How to use HTML in Power BI for amazing dashboards [Video]. YouTube. Truy cập ngày 1 tháng 4 năm 2025, từ https://www.youtube.com/watch?v=fFyK_-WK2A4
