Giao diện

Câu hỏi thường gặp (FAQ) — Data Visualization Pro ​

Cài đặt ​

Bật plugin nhưng không thấy các biểu đồ Pro? ​

Kiểm tra:

  1. Đã khởi động lại server sau khi bật plugin chưa?
  2. Plugin data-visualization (bản cơ bản) đã được bật chưa? Plugin Pro yêu cầu bản cơ bản
  3. Xóa cache trình duyệt và tải lại trang (Ctrl+Shift+R)
  4. Kiểm tra console trình duyệt có lỗi JavaScript không

Plugin Pro có cần plugin cơ bản không? ​

Có, bắt buộc. Plugin Pro chỉ bổ sung thêm các loại biểu đồ ECharts và theme. Toàn bộ logic truy vấn dữ liệu, cache, và ACL đều nằm trong plugin cơ bản data-visualization.

Làm sao phân biệt biểu đồ cơ bản và Pro? ​

Biểu đồ cơ bản sử dụng G2Plot renderer, còn biểu đồ Pro sử dụng ECharts renderer. Trong Chart Designer:

  • Biểu đồ G2Plot: giao diện cấu hình đơn giản
  • Biểu đồ ECharts: có thêm tùy chọn theme, axis title, mark line, label type

Sử dụng ​

Làm sao chọn theme cho biểu đồ? ​

Trong Chart Designer, phần cấu hình giao diện có hai dropdown:

  • Light mode theme: Chọn theme hiển thị khi giao diện ở chế độ sáng (mặc định: walden)
  • Dark mode theme: Chọn theme khi giao diện ở chế độ tối (mặc định: defaultDark)

Biểu đồ sẽ tự động chuyển theme khi người dùng đổi chế độ sáng/tối.

Làm sao thêm đường tham chiếu (Mark Line)? ​

  1. Mở Chart Designer
  2. Trong phần cấu hình, tìm Mark Line
  3. Thêm đường tham chiếu với:
    • Name: Tên hiển thị (ví dụ: "Mục tiêu")
    • Value: Giá trị trên trục Y
    • Color: Màu đường

Ví dụ: thêm đường "Mục tiêu doanh thu" tại giá trị 1.000.000 VNĐ.

Biểu đồ Funnel hiển thị như thế nào? ​

Biểu đồ Funnel (phễu) hiển thị từ rộng → hẹp, thể hiện quá trình chuyển đổi. Ví dụ:

  • Truy cập website → Đăng ký → Mua hàng → Quay lại mua

Cấu hình:

  • Dimension: Trường phân loại giai đoạn (ví dụ: stage)
  • Measure: Trường số liệu (ví dụ: count)

Biểu đồ Radar cần cấu hình gì? ​

Radar cần ít nhất 3 dimensions để tạo hình đa giác. Mỗi dimension là một trục của radar.

Cấu hìnhMô tả
DimensionsCác trục radar (tối thiểu 3)
MeasuresGiá trị trên mỗi trục
Series FieldPhân nhóm để so sánh nhiều đối tượng

Word Cloud hiển thị dữ liệu gì? ​

Word Cloud hiển thị tần suất xuất hiện của từ khóa. Cần:

  • Dimension: Trường chứa từ khóa (text)
  • Measure: Trường đếm/tổng hợp (xác định kích thước từ)

Làm sao xoay nhãn trục X khi nhãn quá dài? ​

Trong cấu hình biểu đồ, tìm X-Axis label rotate và nhập góc xoay (độ):

  • 0 — Nằm ngang (mặc định)
  • 45 — Xoay 45 độ
  • 90 — Xoay dọc

Stacked chart (biểu đồ chồng) hoạt động thế nào? ​

Bật tùy chọn Is Stack để chồng các series lên nhau:

  • Column/Bar stacked: Cột chồng lên nhau thể hiện tổng và thành phần
  • Area stacked: Vùng chồng lên nhau thể hiện xu hướng tích lũy

Yêu cầu: phải có Series Field để phân nhóm.

Hiệu năng ​

Biểu đồ tải chậm với dữ liệu lớn? ​

Cách khắc phục:

  1. Sử dụng aggregation thay vì hiển thị từng bản ghi
  2. Giới hạn phạm vi dữ liệu bằng filter (ví dụ: chỉ 3 tháng gần nhất)
  3. Tạo index trên database cho các trường dùng trong biểu đồ
  4. Bật cache trong cấu hình biểu đồ
  5. Giảm số lượng biểu đồ trên cùng một trang

ECharts có nặng hơn G2Plot không? ​

ECharts có bundle size lớn hơn nhưng hiệu năng render tương đương. ECharts sử dụng Canvas/SVG renderer và xử lý tốt lượng dữ liệu lớn. Sự khác biệt chủ yếu ở thời gian tải ban đầu (initial load), không ảnh hưởng đến trải nghiệm runtime.

Lỗi thường gặp ​

Biểu đồ hiển thị trống (không có lỗi)? ​

Kiểm tra:

  1. Collection có dữ liệu không
  2. Measures và dimensions đã cấu hình đúng chưa
  3. Series field có giá trị null/undefined không (hiển thị là "null" trong legend)
  4. Filter có quá chặt không

Theme không áp dụng? ​

  • Đảm bảo đã chọn theme trong cả Light mode và Dark mode
  • Một số theme chỉ có cho light hoặc dark mode
  • Thử reload trang nếu theme mới đăng ký không xuất hiện

Mark Line không hiển thị? ​

Mark Line chỉ hoạt động với biểu đồ có trục Y (Column, Bar, Line, Area). Không áp dụng cho Pie, Radar, Funnel, Treemap, Word Cloud. Kiểm tra value không để trống.

Nâng cao ​

Có thể đăng ký theme tùy chỉnh không? ​

Có. Sử dụng EChart.registerTheme():

typescript
import { EChart } from '@digiforce-nc/plugin-data-visualization-pro/client';

const myTheme = {
  color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980'],
  // ... cấu hình theme ECharts
};

EChart.registerTheme('myCustomTheme', myTheme, 'light');

Theme mới sẽ xuất hiện trong dropdown chọn theme.

Sự khác nhau giữa dataset transform và series data? ​

Plugin Pro sử dụng ECharts dataset API với custom transform:

  • data-visualization:transform: Chuyển đổi field labels và format
  • data-visualization:toSeries: Pivot dữ liệu theo seriesField

Cách tiếp cận này hiệu quả hơn việc xử lý dữ liệu thủ công trước khi đưa vào biểu đồ.