Neoplot MAX — Cẩm Nang Toàn Diện & AI Prompt Hub

Tài Liệu Hướng Dẫn & AI JSON Prompting Engine

Hướng dẫn khai thác toàn diện sức mạnh của Neoplot MAX: Cẩm nang System Prompt cho AI, cấu trúc JSON Schema chuẩn xác 100%, Smart Paste từ Excel/Sheets, và kỹ thuật tinh chỉnh 11 loại biểu đồ chuẩn Agency.

Chủ đề #1 — Getting Started

Giới Thiệu Neoplot & Triết Lý Thiết Kế

Lê Tịnh Minh - Tác giả Neoplot MAX

Lê Tịnh Minh

Creator

Marketing Manager @ YouNet Media · Data Visualization Enthusiast

“Sứ mệnh của Neoplot: Giúp bất kỳ ai cũng có thể tạo ra những biểu đồ đẹp chuẩn mực, đậm chất Agency chỉ trong vài giây thông qua sức mạnh kết hợp giữa AI và giao diện trực quan.”

4 Nỗi Đau Cố Hữu Khi Làm Biểu Đồ Truyền Thống:

1. Phân mảnh & Tùy biến bất nhất

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.

2. Mất thời gian mò mẫm menu

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.

3. Không thể tái sử dụng Template

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.

4. AI sinh mã code chart hay bị ảo giác

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.

Chủ đề #2 — Workflow

Quy Trình 3 Bước Siêu Tốc & Tour Giao Diện Studio

1

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.

2

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.

3

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:

1. Studio Control Bar (Top)

Đổ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.

2. Canvas Preview (Trái)

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.

3. Inspector Panel (Phải)

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).

Chủ đề #3 — AI Hub (Ưu tiên hàng đầu)

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!

Master System Prompt Dành Cho AI (Nhấn để Sao chép)
Bạn là chuyên gia thiết kế trực quan hóa dữ liệu (Data Visualization Expert) cho công cụ Neoplot MAX.
Nhiệm vụ của bạn là nhận dữ liệu thô (văn bản, bảng Excel, CSV, Google Sheets, danh sách số liệu) từ người dùng và tự động chọn loại biểu đồ, phối màu thương hiệu/sắc thái, sau đó xuất ra file JSON chuẩn cấu trúc "chart-generator-full-export" để người dùng nhập (Import/Clone) trực tiếp vào Neoplot.

### 1. QUY TẮC CHỌN LOẠI BIỂU ĐỒ (chartType):
- "donut" hoặc "pie": Thị phần, Cơ cấu %, Tỷ trọng nền tảng (3 - 7 mục). Thiết lập innerRadius: 48, outerRadius: 72, centerKpi nếu có tổng số.
- "bar": Bảng xếp hạng (Top Brands/Sản phẩm), tên danh mục dài. Trục Y hiển thị tên, trục X hiển thị số.
- "column": So sánh các đối tượng độc lập (Doanh thu, Lượng thảo luận Buzz Volume).
- "column-100" hoặc "bar-100": So sánh cơ cấu phần trăm thành phần tích lũy 100% giữa các kỳ/nhóm.
- "line" hoặc "area": Biến động theo chuỗi thời gian (Ngày, Tháng, Quý, Năm). Bật smooth: true, lineWidth: 3.
- "combo": Kết hợp 2 chỉ số khác đơn vị (ví dụ: Doanh thu cột trục Y1 bên trái + % Tăng trưởng đường trục Y2 bên phải).
- "bubble": Phân tích ma trận 3 chiều (Trục X, Trục Y, Kích thước bóng Size). Tự động gán bubbleScatter config.

### 2. QUY TẮC PHỐI MÀU THÔNG MINH:
- Nền tảng Mạng Xã Hội (qua pointLabelOverrides):
  + Facebook Page: "#1877F2" | Facebook User: "#0432FF"
  + TikTok: "#000000" (hoặc "#FE2C55") | YouTube: "#FF0000"
  + Instagram: "#E4405F" | Threads: "#000000"
  + Báo điện tử / Online News: "#009FDB" | Forum/Blog: "#F7941E" | Khác: "#94A3B8"
- Sắc thái thảo luận (Sentiment Analysis):
  + Tích cực (Positive): "#10B981" (Xanh lá)
  + Trung lập (Neutral): "#64748B" (Xám)
  + Tiêu cực (Negative): "#EF4444" (Đỏ)

### 3. QUY TẮC XỬ LÝ SỐ LIỆU:
- Phần trăm "29.3%" -> float 29.3
- Số có dấu phẩy phân tách thập phân "1.234,5" -> 1234.5
- Luôn tái tạo lại chuỗi rawCsv trong preset.chartData.rawCsv để người dùng mở tab Dữ liệu xem được bảng gốc.

### 4. CẤU TRÚC JSON CHUẨN BẮT BUỘC:
Luôn xuất JSON bọc trong khối ```json ... ``` với định dạng:
{
  "version": "1.0.0",
  "type": "chart-generator-full-export",
  "exportedAt": "2026-08-20T00:00:00.000Z",
  "preset": {
    "chartType": "donut",
    "backgroundColor": "#ffffff",
    "font": { "fontFamily": "Plus Jakarta Sans, sans-serif", "fontSize": 14, "fontWeight": "normal", "color": "#334155" },
    "title": { "text": "Tiêu đề biểu đồ", "subtext": "Nguồn: Dữ liệu báo cáo", "visible": true, "fontSize": 18, "fontWeight": "bold", "color": "#0f172a" },
    "legend": { "visible": true, "position": "top", "orient": "horizontal", "fontSize": 12, "color": "#475569" },
    "label": { "visible": true, "position": "outside", "fontSize": 12, "color": "#334155", "formatType": "percentage" },
    "chartData": {
      "categories": ["Facebook", "TikTok", "YouTube", "Khác"],
      "series": [
        {
          "name": "Tỷ trọng",
          "values": [45.2, 32.5, 14.8, 7.5],
          "color": "#1877f2",
          "pointLabelOverrides": {
            "0": { "itemColor": "#1877f2" },
            "1": { "itemColor": "#000000" },
            "2": { "itemColor": "#ff0000" },
            "3": { "itemColor": "#94a3b8" }
          }
        }
      ],
      "rawCsv": "Platform,Share\nFacebook,45.2%\nTikTok,32.5%\nYouTube,14.8%\nKhác,7.5%"
    }
  }
}

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:

Facebook Page
#1877F2
TikTok
#000000 / #FE2C55
YouTube
#FF0000
Instagram
#E4405F
Báo điện tử
#009FDB
Forum / Blog
#F7941E
Tích cực (Positive)
#10B981
Tiêu cực (Negative)
#EF4444
Chủ đề #4 — JSON Schema

Đặ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ínhKiểu dữ liệuGiá trị hợp lệ / Ví dụMục đích & Ý nghĩa
typestring"chart-generator-full-export"Định danh chuẩn định dạng file xuất của Neoplot.
versionstring"1.0.0"Phiên bản schema.
preset.chartTypeenum (11 types)"donut" | "column" | "bar" | "combo" | "line" | "area" | "bubble"...Quyết định cơ chế vẽ biểu đồ chính trong ECharts.
preset.chartDataobject{ 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[].pointLabelOverridesrecord 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.titleobject{ 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.formatTypeenum (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.centerKpiobject{ 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.columnBarobject{ 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.customImagesarray (max 6)[{ url: "...", width: 120, position: "top-right" }]Chèn logo thương hiệu (YouNet, SocialHeat, SocialTrend hoặc logo riêng).
Chủ đề #5 — Thư Viện Prompt & JSON Mẫu

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!

Prompt Mẫu Gửi AI (ChatGPT / Claude / Gemini):

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.

donut_sov.json — Kết quả JSON Chuẩn Neoplot
{
  "version": "1.0.0",
  "type": "chart-generator-full-export",
  "exportedAt": "2026-08-20T08:30:00.000Z",
  "preset": {
    "chartType": "donut",
    "backgroundColor": "#ffffff",
    "currentPaletteId": "social-media",
    "font": {
      "fontFamily": "Plus Jakarta Sans, sans-serif",
      "fontSize": 14,
      "fontWeight": "normal",
      "fontStyle": "normal",
      "color": "#334155"
    },
    "title": {
      "text": "Thị Phần Thảo Luận Mạng Xã Hội Tháng 8/2026",
      "subtext": "Nguồn: Báo cáo Social Listening Q3/2026",
      "visible": true,
      "position": "top",
      "posX": 5,
      "posY": 3,
      "fontSize": 18,
      "fontWeight": "bold",
      "fontStyle": "normal",
      "fontFamily": "Plus Jakarta Sans, sans-serif",
      "color": "#0f172a",
      "opacity": 100,
      "rotate": 0
    },
    "legend": {
      "visible": true,
      "position": "top",
      "orient": "horizontal",
      "fontSize": 12,
      "color": "#475569",
      "fontFamily": "Plus Jakarta Sans, sans-serif",
      "opacity": 100,
      "rotate": 0,
      "icon": "circle",
      "itemGap": 16,
      "posX": 50,
      "posY": 10
    },
    "label": {
      "visible": true,
      "position": "outside",
      "fontSize": 12,
      "fontWeight": "bold",
      "fontStyle": "normal",
      "color": "#1e293b",
      "opacity": 100,
      "rotate": 0,
      "formatType": "percentage",
      "formatter": "{c}%",
      "prefix": "",
      "suffix": "%",
      "decimals": 1,
      "offsetX": 0,
      "offsetY": 0,
      "distance": 8
    },
    "donutPie": {
      "innerRadius": 48,
      "outerRadius": 72,
      "centerX": 50,
      "centerY": 54,
      "padAngle": 2,
      "borderRadius": 6,
      "roseType": false,
      "startAngle": 90,
      "centerKpi": {
        "show": true,
        "title": "TỔNG THẢO LUẬN",
        "value": "2.65M",
        "titleFontSize": 11,
        "valueFontSize": 24,
        "titleColor": "#64748b",
        "valueColor": "#0f172a"
      }
    },
    "chartData": {
      "categories": ["Facebook Page", "TikTok", "YouTube", "Báo điện tử", "Forum"],
      "series": [
        {
          "name": "Thị phần",
          "values": [45.2, 32.8, 14.5, 5.1, 2.4],
          "color": "#1877f2",
          "visible": true,
          "pointLabelOverrides": {
            "0": { "itemColor": "#1877f2" },
            "1": { "itemColor": "#000000" },
            "2": { "itemColor": "#ff0000" },
            "3": { "itemColor": "#009fdb" },
            "4": { "itemColor": "#f7941e" }
          }
        }
      ],
      "rawCsv": "Platform,Share\nFacebook Page,45.2%\nTikTok,32.8%\nYouTube,14.5%\nBáo điện tử,5.1%\nForum,2.4%"
    }
  }
}
Chủ đề #6 — Import & Export

Hướng Dẫn Nhập (Import) & Xuất (Export) JSON Trong Neoplot

Cách Nhập JSON (Clone Biểu Đồ):
  1. Sau khi nhận mã JSON từ AI (hoặc từ đồng nghiệp), sao chép toàn bộ khối JSON.
  2. 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ữ).
  3. Dán đoạn mã JSON vào ô nhập (hoặc tải lên file .json từ máy tính).
  4. 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!
Cách Xuất & Lưu Trữ JSON:
  1. Sau khi thiết kế xong biểu đồ ưng ý, bấm nút “Xuất JSON” trên thanh Control Bar để tải file .json về máy.
  2. 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.
  3. 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.
Chủ đề #7 — Data Input

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.

Nguồn dữ liệu được hỗ trợ:
  • 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.
Mẹo đặt tiêu đề tự động:

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
Chủ đề #8 — Chart Types Handbook

Cẩm Nang 11 Loại Biểu Đồ & Tùy Biến Chuyên Sâu

Column & 100% Stacked Columncolumn

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.

Bar Chart & 100% Stacked Barbar

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ữ.

Donut & Pie Chart (Center KPI)donut

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.

Line & Area Chart (Smooth & Gradient)line / area

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).

Combo Chart Đa Trục (2 Trục Y)combo

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).

3D Bubble & Scatter Matrixbubble

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%.

Chủ đề #9 — Design System

Bảng Màu, Typography & 11 Định Dạng Nhãn Số Liệu

10 Bảng Màu Chủ Đề Tích Hợp (Tự Động Thích Ứng Light / Dark Theme):

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.

11 Tùy Chọn Định Dạng Nhãn Dữ Liệu (DataLabelFormatType):
raw: 120
number: 120,000
compact: 1.5M / 10K
percentage: 45.2%
value_and_percentage: 3,533 (35.3%)
currency_vnd: 120.000 ₫
currency_usd: $120,000
currency_compact_usd: $2.91B
custom: Prefix + V + Suffix
Chủ đề #10 — Overlays & Layout

Quản Lý Logo, Watermark, Hình Họa & Khung Hình Slide

5 Preset Logos Tích Hợp Sẵn:

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í.

6 Tỷ Lệ Khung Hình Chuẩn:

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).

Chủ đề #11 — Export Panel

Xuất Bản Ảnh Retina 2x / 4x HD & Vector SVG Phân Lớp

1. Xuất ảnh Retina HD (2x / 4x):

Độ 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.

2. Nền trong suốt (Transparent):

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.

3. Vector SVG Phân Lớp:

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ử.

Chủ đề #12 — Best Practices

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:

1Không vượt quá 7 lát bánh trên Donut/Pie

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).

2Luôn ưu tiên hiển thị Nhãn số trực tiếp

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ố.

3Tận dụng độ tương phản làm nổi bật mục tiêu

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.

4Ghi rõ nguồn số liệu & chu kỳ thời gian

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.

Sẵn Sàng Trải Nghiệm

Tạo Biểu Đồ Chuẩn Agency Chỉ Trong 10 Giây

Dán dữ liệu từ bảng tính Excel hoặc nạp đoạn mã JSON do AI tạo để sở hữu ngay biểu đồ hoàn hảo phục vụ cho báo cáo của bạn.