Giao diện

Hướng dẫn cài đặt — Data Visualization Pro ​

Yêu cầu ​

Thành phầnYêu cầu
Plugin data-visualizationPhải được kích hoạt trước (bản cơ bản)
Server DigiforcePhiên bản >= 1.0
EChartsTự động cài đặt cùng plugin

Lưu ý

Plugin Pro mở rộng tính năng của plugin cơ bản data-visualization. Cần bật cả hai plugin cùng lúc.

Bước 1: Kích hoạt plugin ​

  1. Vào Settings → Plugin Manager
  2. Tìm plugin-data-visualization-pro
  3. Bật công tắc Enable
  4. Khởi động lại server

Sau khi kích hoạt, giao diện Chart Designer sẽ hiển thị thêm các loại biểu đồ nâng cao.

Bước 2: Sử dụng biểu đồ Pro ​

Các loại biểu đồ được thêm ​

Loại biểu đồMô tảPhù hợp cho
ColumnBiểu đồ cột dọc (ECharts)So sánh giá trị giữa các nhóm
BarBiểu đồ cột ngang (ECharts)So sánh khi nhãn dài
Diverging BarBiểu đồ cột phân kỳSo sánh giá trị dương/âm
LineBiểu đồ đường (ECharts)Xu hướng thời gian
AreaBiểu đồ vùngXu hướng tích lũy
PieBiểu đồ tròn (ECharts)Tỷ lệ phần trăm
ScatterBiểu đồ phân tánTương quan giữa hai biến
FunnelBiểu đồ phễuQuy trình chuyển đổi (conversion)
RadarBiểu đồ radarSo sánh đa chiều
TreemapBiểu đồ câyCấu trúc phân cấp
Word CloudĐám mây từ khóaTần suất từ khóa

Cách thêm biểu đồ Pro ​

  1. Thêm Chart block vào trang
  2. Trong Chart Designer, danh sách loại biểu đồ sẽ bao gồm cả biểu đồ Pro
  3. Chọn loại biểu đồ mong muốn
  4. Cấu hình dữ liệu (measures, dimensions) và tùy chỉnh giao diện

Bước 3: Tùy chỉnh giao diện biểu đồ ​

Plugin Pro cung cấp nhiều tùy chọn giao diện hơn bản cơ bản:

Cấu hình chung cho mọi biểu đồ ​

Tùy chọnMô tả
X FieldTrường hiển thị trên trục X
Series FieldTrường phân nhóm (tạo nhiều đường/cột)
SizeKích thước biểu đồ
PaddingKhoảng cách lề (left, right, top, bottom)

Cấu hình Legend (Chú giải) ​

Tùy chọnMô tảGiá trị
Show LegendHiển thị chú giảitrue / false
Legend OrientHướng chú giảihorizontal / vertical
Legend PositionVị trí chú giảileft, right, top, bottom

Cấu hình trục (Axis) ​

Tùy chọnMô tả
X-Axis titleTiêu đề trục X (vị trí: end, middle, none)
Y-Axis titleTiêu đề trục Y
X-Axis label rotateXoay nhãn trục X (độ) — hữu ích khi nhãn dài
Split LineĐường chia lưới (X, Y hoặc cả hai)

Cấu hình Label (Nhãn giá trị) ​

KiểuMô tả
0Ẩn nhãn
1Hiển thị giá trị
2Hiển thị tên nhóm
3Hiển thị cả tên và giá trị

Tùy chọn bổ sung ​

Tùy chọnMô tả
SmoothĐường cong mượt (cho Line/Area)
Is StackChồng cột/vùng (stacked chart)
Mark LineThêm đường tham chiếu (ví dụ: đường trung bình, mục tiêu)

Bước 4: Chọn Theme (Giao diện màu sắc) ​

Plugin Pro tích hợp nhiều theme từ ECharts:

Light Mode Themes ​

ThemePhong cách
walden (mặc định)Tông xanh nhẹ nhàng
vintageCổ điển, ấm áp
westerosTông trung tính
essosTông ấm
infographicPhong cách infographic
macaronsPastel nhiều màu
romaTông nóng
shineSáng và rõ ràng
wonderlandTông xanh tím

Dark Mode Themes ​

ThemePhong cách
defaultDark (mặc định)Nền tối chuẩn
chalkNền tối kiểu phấn
halloweenTông cam đen
purple-passionTông tím đậm

Mark Line — Đường tham chiếu ​

Mark Line cho phép thêm đường ngang trên biểu đồ để đánh dấu ngưỡng:

json
{
  "markLine": [
    { "name": "Mục tiêu", "value": 1000000, "color": "#ff4d4f" },
    { "name": "Trung bình", "value": 500000, "color": "#1890ff" }
  ]
}

Lưu ý ​

  • Biểu đồ ECharts có thể tùy chỉnh sâu hơn qua JSON config nâng cao
  • Tham khảo tài liệu ECharts: https://echarts.apache.org/en/option.html
  • Plugin Pro bổ sung renderer ECharts — các biểu đồ G2Plot cơ bản vẫn hoạt động bình thường
  • Với biểu đồ phức tạp, nên bật cache để tránh query lại mỗi lần render