Giao diện
Cài đặt và sử dụng — Charts
Tổng quan
Plugin biểu đồ cơ bản cho phép tạo các loại chart phổ biến (Bar, Line, Pie, Area) từ dữ liệu collection. Admin chọn collection, field aggregation, và loại biểu đồ — plugin tự động query dữ liệu và render.
Plugin đã Deprecated
Plugin plugin-charts đã được thay thế bởi plugin-data-visualization và plugin-data-visualization-pro với nhiều tính năng mạnh hơn. Với dự án mới, hãy sử dụng plugin mới. Plugin này vẫn hoạt động cho các dự án đang dùng.
Yêu cầu hệ thống
- Server Digiforce đang chạy
- Ít nhất một collection có dữ liệu để tạo biểu đồ
Bước 1: Kích hoạt plugin
Vào Settings → Plugin Manager, tìm plugin-charts và bật. Khởi động lại server.
Bước 2: Thêm biểu đồ vào trang
- Trên trang muốn thêm biểu đồ, nhấn Add Block → Chart
- Chọn loại biểu đồ
- Cấu hình data source
Loại biểu đồ được hỗ trợ
| Loại | Mô tả | Phù hợp cho |
|---|---|---|
| Bar | Biểu đồ cột dọc/ngang | So sánh giá trị giữa các nhóm |
| Line | Biểu đồ đường | Xu hướng theo thời gian |
| Pie | Biểu đồ tròn | Tỷ lệ phần trăm, phân bổ |
| Area | Biểu đồ vùng | Xu hướng tích luỹ theo thời gian |
Bước 3: Cấu hình biểu đồ
Data Source (Nguồn dữ liệu)
| Tham số | Mô tả | Ví dụ |
|---|---|---|
| Collection | Nguồn dữ liệu (bảng) | orders, products, users |
| Measures | Trường số liệu + hàm tổng hợp | SUM(amount), COUNT(id) |
| Dimensions | Trường phân nhóm (group by) | createdAt (theo tháng), category |
| Filter | Điều kiện lọc dữ liệu | status = 'completed' |
| Sort | Sắp xếp kết quả | Theo dimension hoặc measure |
| Limit | Giới hạn số lượng kết quả | 10, 20, 50 |
Hàm tổng hợp (Aggregation Functions)
| Hàm | Mô tả | Ví dụ |
|---|---|---|
COUNT | Đếm số bản ghi | Số đơn hàng theo tháng |
SUM | Tổng giá trị | Tổng doanh thu theo sản phẩm |
AVG | Trung bình | Giá trị đơn hàng trung bình |
MIN | Giá trị nhỏ nhất | Đơn hàng nhỏ nhất |
MAX | Giá trị lớn nhất | Đơn hàng lớn nhất |
Ví dụ cấu hình
Biểu đồ doanh thu theo tháng:
| Tham số | Giá trị |
|---|---|
| Collection | orders |
| Measure | SUM(totalAmount) |
| Dimension | createdAt (group by month) |
| Filter | status = 'completed' |
| Chart type | Line |
Bước 4: Tuỳ chỉnh hiển thị
| Tuỳ chọn | Mô tả |
|---|---|
| Title | Tiêu đề biểu đồ |
| Colors | Bảng màu cho series |
| Legend | Hiển thị/ẩn chú thích |
| Auto-refresh | Tự động cập nhật dữ liệu mỗi N giây |
| Show values | Hiển thị giá trị trên biểu đồ |
Auto-refresh
Biểu đồ có thể tự cập nhật theo chu kỳ:
Tạo Dashboard với nhiều biểu đồ
Thêm nhiều Chart blocks trên cùng một trang để tạo dashboard:
- Trang tổng quan bán hàng: Line (doanh thu) + Bar (top sản phẩm) + Pie (phân bổ theo vùng)
- Trang quản lý nhân sự: Bar (headcount) + Pie (phân bổ phòng ban)
Migration sang plugin-data-visualization
Nếu cần tính năng nâng cao, chuyển sang plugin-data-visualization:
| Tính năng | plugin-charts | plugin-data-visualization |
|---|---|---|
| Chart types cơ bản | ✅ | ✅ |
| Chart types nâng cao (scatter, radar, heatmap) | ❌ | ✅ |
| Dashboard kéo-thả | ❌ | ✅ |
| Query builder nâng cao | ❌ | ✅ |
| Export PDF/PNG | ❌ | ✅ |
| Custom SQL query | ❌ | ✅ |
| Real-time update | Cơ bản | Nâng cao |
Lưu ý quan trọng
- Biểu đồ cơ bản chỉ hỗ trợ 4 loại thông dụng (Bar, Line, Pie, Area)
- Để có biểu đồ nâng cao, cài
plugin-data-visualization-pro - Plugin sử dụng thư viện @ant-design/charts (G2/AntV) để render
- Aggregation query chạy trực tiếp trên database — đảm bảo collection có index phù hợp để tránh query chậm
- Với dữ liệu lớn (> 100,000 bản ghi), sử dụng filter và limit để giảm thời gian render