Giới Thiệu Neoplot & Triết Lý Thiết Kế
Lê Tịnh Minh
CreatorMarketing Manager @ YouNet Media · Data Visualization Enthusiast
4 Nỗi Đau Cố Hữu Khi Làm Biểu Đồ Truyền Thống:
Excel, Google Sheets, Canva, Tableau mỗi bên một giao diện. Cần đổi màu 1 cột riêng lẻ hay bo góc thì app này có, app kia giấu kín.
Mỗi lần cần chỉnh font, kích thước nhãn hoặc khoảng cách cột lại phải bấm qua 4-5 tầng menu phức tạp, rất tốn thời gian khi làm báo cáo gấp.
Khó khăn khi muốn đóng gói toàn bộ quy chuẩn thiết kế (Font, Màu, Nhãn, Layout) thành một file nhẹ nhàng để gửi cho team hoặc tái sử dụng ở kỳ báo cáo sau.
Nhờ AI viết Python/ECharts trực tiếp rất dễ lỗi cú pháp, sai font tiếng Việt, mất màu thương hiệu và khó căn chỉnh lại nếu không rành lập trình.
Quy Trình 3 Bước Siêu Tốc & Tour Giao Diện Studio
Dán Data hoặc Nhập JSON
Copy bảng từ Excel/Google Sheets rồi paste vào tab Dữ liệu (hỗ trợ Smart Paste) hoặc bấm Nhập JSON (Clone) để nạp mã do AI sinh ra.
Chọn Loại & Tinh Chỉnh
Lựa chọn 1 trong 11 loại biểu đồ, chọn Bảng màu chủ đề, tinh chỉnh Bo góc, Center KPI, Màu từng cột và lớp phủ Logo / Watermark.
Xuất Bản Retina 2x / SVG
Tải ảnh PNG sắc nét (1x, 2x Retina, 4x Ultra HD) với nền trong suốt hoặc xuất file Vector SVG để chèn slide PowerPoint/Google Slides.
Cấu Trúc 3 Khu Vực Trong Studio Làm Việc:
Đổi tên biểu đồ trực tiếp, xem badge số lượng danh mục/chuỗi số, dropdown chọn 11 loại biểu đồ và các nút Lưu Mẫu / Xuất JSON / Xuất ảnh nhanh.
Xem trước biểu đồ thời gian thực với thanh Quick Canvas Bar bên dưới: chọn tỷ lệ (16:9, 4:3, 1:1, 9:16, 21:9) và chuyển nhanh màu nền.
Gồm 3 Tabs chuyên nghiệp: Dữ liệu (CSV Editor & Smart Paste), Thiết kế (5 sub-tabs chi tiết), và Xuất bản (4 chế độ xuất).
Cẩm Nang Master AI Prompt Cho ChatGPT, Claude, Gemini & DeepSeek
Chỉ cần sao chép đoạn Master System Prompt dưới đây và dán vào cửa sổ chat với bất kỳ AI nào (ChatGPT, Claude, Gemini, DeepSeek, Grok) kèm bảng dữ liệu của bạn. AI sẽ tự động phân tích bản chất số liệu, chọn loại biểu đồ tối ưu, phối màu thương hiệu chuẩn mực và trả về đoạn mã JSON hoàn chỉnh để bạn nạp vào Neoplot!
Bảng Mã Màu Chuẩn Nhận Diện Mạng Xã Hội & Sắc Thái (Social & Sentiment HEX)
Khi AI tạo JSON cho biểu đồ có các kênh MXH hoặc Sắc thái, AI sẽ tự động gán vào pointLabelOverrides theo các mã HEX chuẩn này:
Đặc Tả Chi Tiết Cấu Trúc JSON Schema (chart-generator-full-export)
Khi xuất file hoặc sao lưu mẫu trong Neoplot, hệ thống đóng gói toàn bộ trạng thái (dữ liệu số liệu + mọi tham số thiết kế) thành 1 snapshot JSON chuẩn. Dưới đây là giải thích tường tận từng đối tượng:
| Khối / Thuộc tính | Kiểu dữ liệu | Giá trị hợp lệ / Ví dụ | Mục đích & Ý nghĩa |
|---|---|---|---|
| type | string | "chart-generator-full-export" | Định danh chuẩn định dạng file xuất của Neoplot. |
| version | string | "1.0.0" | Phiên bản schema. |
| preset.chartType | enum (11 types) | "donut" | "column" | "bar" | "combo" | "line" | "area" | "bubble"... | Quyết định cơ chế vẽ biểu đồ chính trong ECharts. |
| preset.chartData | object | { categories: [...], series: [...], rawCsv: "..." } | Khối chứa toàn bộ dữ liệu danh mục, các chuỗi số liệu và bảng CSV gốc. |
| series[].pointLabelOverrides | record index | { "0": { itemColor: "#1877f2" }, "1": { ... } } | Cho phép đổi màu và nhãn riêng cho từng lát tròn, từng cột cụ thể mà không ảnh hưởng toàn series. |
| preset.title | object | { text: "...", subtext: "...", visible: true, fontSize: 18 } | Cấu hình tiêu đề chính, mô tả phụ, kích thước chữ, màu sắc và vị trí hiển thị. |
| preset.label.formatType | enum (11 types) | "percentage" | "number" | "compact" | "currency_vnd"... | Định dạng số liệu hiển thị trên nhãn (tự động thêm %, rút gọn 1.2M, thêm dấu phẩy). |
| preset.donutPie.centerKpi | object | { show: true, title: "TỔNG SỐ", value: "2.65M" } | Cấu hình tiêu đề và con số lớn hiển thị ngay chính giữa vòng Donut Chart. |
| preset.columnBar | object | { borderRadius: 6, barGap: 30, stacked: false } | Bo góc cột, khoảng cách giữa các cột và chế độ xếp chồng (Stacked). |
| preset.axis (x, y, y2) | object | { x: {...}, y: {...}, y2: { visible: true, name: "%" } } | Bật/tắt đường kẻ lưới grid, nhãn trục, và trục Y thứ 2 (dành cho Combo Chart). |
| preset.customImages | array (max 6) | [{ url: "...", width: 120, position: "top-right" }] | Chèn logo thương hiệu (YouNet, SocialHeat, SocialTrend hoặc logo riêng). |
Bộ Ví Dụ Prompt & JSON Mẫu Cho 5 Tình Huống Kinh Điển
Chọn một trong 5 tình huống thực tế dưới đây để xem prompt mẫu gửi AI và kết quả JSON hoàn chỉnh được sinh ra. Bạn có thể sao chép nhanh mã JSON để thử nhập (Clone) ngay vào Neoplot!
Hãy vẽ biểu đồ thị phần thảo luận thương hiệu trên các nền tảng MXH tháng 8/2026 cho Neoplot: Facebook Page: 45.2% (1.2M thảo luận) TikTok: 32.8% (870K thảo luận) YouTube: 14.5% (385K thảo luận) Báo chí: 5.1% (135K thảo luận) Forum: 2.4% (64K thảo luận) Tổng thảo luận: 2.65M. Hãy đặt Center KPI là 2.65M và phối màu chuẩn cho từng nền tảng.
Hướng Dẫn Nhập (Import) & Xuất (Export) JSON Trong Neoplot
- Sau khi nhận mã JSON từ AI (hoặc từ đồng nghiệp), sao chép toàn bộ khối JSON.
- Tại giao diện Studio Neoplot, nhấn nút “Nhập JSON (Clone)” ở góc trên bên phải thanh Navbar (hoặc tab Thiết kế > Mẫu & Lưu trữ).
- Dán đoạn mã JSON vào ô nhập (hoặc tải lên file
.jsontừ máy tính). - Bấm “Nạp & Áp dụng ngay”. Biểu đồ sẽ render lập tức với 100% dữ liệu và styling chính xác!
- Sau khi thiết kế xong biểu đồ ưng ý, bấm nút “Xuất JSON” trên thanh Control Bar để tải file
.jsonvề máy. - Hoặc bấm “Lưu Mẫu” để lưu lại snapshot thiết kế vào bộ nhớ trình duyệt (
localStorage), dễ dàng tái sử dụng bất cứ lúc nào. - Gửi file JSON này cho đồng đội để họ mở lại chính xác biểu đồ mà không cần chỉnh lại màu sắc hay font chữ từ đầu.
Smart Paste Dữ Liệu Từ Excel, Google Sheets, Markdown & CSV
Neoplot MAX tích hợp bộ phân tích thông minh clipboard-table-parser giúp tự động nhận diện và chuyển đổi mọi nguồn dữ liệu dạng bảng.
- • Excel & Google Sheets: Bôi đen vùng dữ liệu trong bảng tính $\rightarrow$ Ctrl+C $\rightarrow$ Dán trực tiếp vào tab Dữ liệu.
- • Markdown Tables: Dạng bảng
| Cột 1 | Cột 2 |từ ChatGPT/Notion. - • HTML Tables: Copy từ website báo chí hoặc email.
- • CSV / TSV thô: Dữ liệu phân cách bởi dấu phẩy hoặc tab.
Bạn có thể viết tiêu đề trực tiếp ngay trên đầu bảng dữ liệu:
# Báo Cáo Doanh Thu Q3/2026 ## Đơn vị: Triệu VNĐ Tháng,Kênh Online,Kênh Đại Lý T7,120,450 T8,180,520 T9,240,610
Cẩm Nang 11 Loại Biểu Đồ & Tùy Biến Chuyên Sâu
So sánh các danh mục độc lập hoặc theo dõi chu kỳ thời gian. Hỗ trợ bo góc thông minh, tùy chỉnh độ rộng cột, khoảng cách nhóm (barCategoryGap) và hiển thị Tổng lũy kế trên đỉnh cột chồng.
Lựa chọn số 1 cho các bảng xếp hạng (Top Brands, Top SKU) và khi tên các mục quá dài. Trục ngang biểu diễn giá trị số, trục đứng hiển thị tên danh mục rõ ràng không bị đè chữ.
Biểu diễn tỷ trọng thị phần (Share of Voice). Cho phép chỉnh bán kính trong/ngoài, rãnh cắt giữa các lát (padAngle), bo góc lát bánh và đặt Chỉ số trung tâm (Center KPI) nổi bật.
Theo dõi chuỗi thời gian liên tục. Hỗ trợ đường cong mềm mại (Smooth), chế độ bậc thang (Step), hiệu ứng chuyển sắc Gradient Area và tùy biến kích thước/hình dáng điểm mốc (Symbol).
Kết hợp đồng thời 2 chỉ số khác đơn vị: Trục Y1 bên trái dành cho Cột (Doanh thu/Volume), Trục Y2 bên phải dành cho Đường (Tỷ suất lợi nhuận / % Tăng trưởng / Điểm NPS).
Ma trận phân tích 3 chiều dữ liệu đồng thời: Trục X (Volume), Trục Y (Sentiment/ROI) và Độ lớn bóng Size (Audience). Thuật toán Area-Proportional Scaling giúp hiển thị tỷ lệ chính xác 100%.
Bảng Màu, Typography & 11 Định Dạng Nhãn Số Liệu
Bao gồm: Modern Tech, Sunset Glow, Ocean Breeze, Forest Emerald, Cyberpunk Dark, Pastel Dream, Corporate Slate, Social Platforms, Sentiment Sắc Thái, và Vibrant Rainbow. Khi chọn bảng màu Dark, toàn bộ màu chữ, màu trục và tooltip tự động đảo tông tương phản hoàn hảo.
Quản Lý Logo, Watermark, Hình Họa & Khung Hình Slide
Sử dụng ngay logo YouNet Media, SocialHeat, SocialTrend, Verified Badge hoặc Growth Icon. Ngoài ra bạn có thể tải lên ảnh PNG logo doanh nghiệp với tùy chỉnh độ mờ, kích thước và vị trí.
Lựa chọn tỷ lệ hiển thị phù hợp: 16:9 (Slide PowerPoint / Keynote), 4:3 (Báo cáo in ấn), 1:1 (Bài đăng Facebook/LinkedIn), 9:16 (TikTok/Story) hoặc 21:9 (Ultra-wide).
Xuất Bản Ảnh Retina 2x / 4x HD & Vector SVG Phân Lớp
Độ phân giải siêu cao, sắc nét đến từng đường nét khi chiếu trên màn hình lớn hoặc zoom in trên slide thuyết trình.
Tải ảnh PNG không nền để dán đè lên slide thuyết trình có màu nền gradient hoặc hình ảnh mà không bị viền trắng.
Xuất file SVG mở trong Figma hoặc Adobe Illustrator, tự do chỉnh sửa từng text, đường kẻ hoặc màu sắc của từng phần tử.
6 Nguyên Tắc Vàng Trực Quan Hóa Số Liệu Dành Cho C-Level
Đúc kết kinh nghiệm làm báo cáo Social Listening & Market Research cho Ban Giám Đốc:
Nếu có nhiều hơn 7 mục nhỏ, hãy gom lại thành nhóm “Khác (Others)” hoặc chuyển sang dùng Bar Chart (Cột ngang).
Trên slide tĩnh, người xem không thể rê chuột xem tooltip. Bật Data Labels ở đỉnh cột hoặc ngoài lát bánh để thấy ngay con số.
Tô màu thương hiệu bạn nổi bật (ví dụ: Xanh dương đậm hoặc Đỏ) và để các đối thủ khác màu xám trung tính để hướng sự chú ý của người xem.
Tận dụng trường Subtext để ghi rõ: “Nguồn: Báo cáo Social Listening Q3/2026” giúp gia tăng tối đa độ tin cậy.