Chart

Máy chủ MCP Chart

Máy chủ Giao thức Ngữ cảnh Mô hình (Model Context Protocol) để tạo biểu đồ bằng AntV. Chúng ta có thể sử dụng máy chủ mcp này để tạo biểu đồ và phân tích dữ liệu.

Đây là máy chủ MCP dựa trên TypeScript cung cấp khả năng tạo biểu đồ. Nó cho phép bạn tạo nhiều loại biểu đồ khác nhau thông qua các công cụ MCP. Bạn cũng có thể sử dụng nó trong Dify.

📋 Mục lục

• ✨ Tính năng
• 🤖 Cách sử dụng
• 🎨 Sử dụng Kỹ năng
• 🚰 Chạy với SSE hoặc Streamable transport
• 🎮 Tùy chọn CLI
• ⚙️ Biến môi trường
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 Triển khai riêng tư
• 🗺️ Lịch sử tạo
• 🎛️ Lọc công cụ
• 🔨 Phát triển
• 📄 Giấy phép

✨ Tính năng

Hiện hỗ trợ hơn 26 loại biểu đồ.

1. generate_area_chart: Tạo biểu đồ area, dùng để hiển thị xu hướng của dữ liệu theo một biến độc lập liên tục, cho phép quan sát xu hướng tổng thể của dữ liệu.
2. generate_bar_chart: Tạo biểu đồ bar, dùng để so sánh giá trị giữa các danh mục khác nhau, phù hợp cho so sánh theo chiều ngang.
3. generate_boxplot_chart: Tạo boxplot, dùng để hiển thị phân bố của dữ liệu, bao gồm trung vị, tứ phân vị và các giá trị ngoại lai.
4. generate_column_chart: Tạo biểu đồ column, dùng để so sánh giá trị giữa các danh mục khác nhau, phù hợp cho so sánh theo chiều dọc.
5. generate_district_map - Tạo district-map, dùng để hiển thị phân chia hành chính và phân bố dữ liệu.
6. generate_dual_axes_chart: Tạo biểu đồ dual-axes, dùng để hiển thị mối quan hệ giữa hai biến có đơn vị hoặc phạm vi khác nhau.
7. generate_fishbone_diagram: Tạo sơ đồ fishbone, còn được gọi là sơ đồ Ishikawa, dùng để xác định và hiển thị nguyên nhân gốc rễ của một vấn đề.
8. generate_flow_diagram: Tạo flowchart, dùng để hiển thị các bước và trình tự của một quy trình.
9. generate_funnel_chart: Tạo biểu đồ funnel, dùng để hiển thị mức độ mất dữ liệu ở các giai đoạn khác nhau.
10. generate_histogram_chart: Tạo histogram, dùng để hiển thị phân bố của dữ liệu bằng cách chia nó thành các khoảng và đếm số điểm dữ liệu trong mỗi khoảng.
11. generate_line_chart: Tạo biểu đồ line, dùng để hiển thị xu hướng của dữ liệu theo thời gian hoặc một biến liên tục khác.
12. generate_liquid_chart: Tạo biểu đồ liquid, dùng để hiển thị tỷ lệ của dữ liệu, thể hiện trực quan phần trăm dưới dạng các khối cầu chứa nước.
13. generate_mind_map: Tạo mind-map, dùng để hiển thị quá trình tư duy và thông tin phân cấp.
14. generate_network_graph: Tạo đồ thị network, dùng để hiển thị mối quan hệ và kết nối giữa các nút.
15. generate_organization_chart: Tạo biểu đồ organizational, dùng để hiển thị cơ cấu tổ chức và mối quan hệ nhân sự.
16. generate_path_map - Tạo path-map, dùng để hiển thị kết quả lập kế hoạch tuyến đường cho các điểm quan tâm (POI).
17. generate_pie_chart: Tạo biểu đồ pie, dùng để hiển thị tỷ lệ của dữ liệu, chia nó thành các phần được biểu thị bằng các hình quạt thể hiện phần trăm của từng phần.
18. generate_pin_map - Tạo pin-map, dùng để hiển thị phân bố của các điểm quan tâm (POI).
19. generate_radar_chart: Tạo biểu đồ radar, dùng để hiển thị dữ liệu đa chiều một cách toàn diện, thể hiện nhiều chiều dưới dạng giống radar.
20. generate_sankey_chart: Tạo biểu đồ sankey, dùng để hiển thị luồng dữ liệu và khối lượng, thể hiện sự di chuyển của dữ liệu giữa các nút khác nhau theo phong cách Sankey.
21. generate_scatter_chart: Tạo biểu đồ phân tán scatter, dùng để hiển thị mối quan hệ giữa hai biến, thể hiện các điểm dữ liệu dưới dạng các chấm rải rác trên hệ tọa độ.
22. generate_treemap_chart: Tạo treemap, dùng để hiển thị dữ liệu phân cấp, thể hiện dữ liệu dưới dạng hình chữ nhật trong đó kích thước của hình chữ nhật đại diện cho giá trị của dữ liệu.
23. generate_venn_chart: Tạo sơ đồ venn, dùng để hiển thị mối quan hệ giữa các tập hợp, bao gồm giao, hợp và hiệu.
24. generate_violin_chart: Tạo biểu đồ violin, dùng để hiển thị phân bố của dữ liệu, kết hợp các đặc điểm của biểu đồ hộp và biểu đồ mật độ để cung cấp cái nhìn chi tiết hơn về phân bố dữ liệu.
25. generate_word_cloud_chart: Tạo word-cloud, dùng để hiển thị tần suất của các từ trong dữ liệu văn bản, với kích thước phông chữ cho biết tần suất của từng từ.
26. generate_spreadsheet: Tạo spreadsheet hoặc bảng tổng hợp (pivot table) để hiển thị dữ liệu dạng bảng. Khi các trường 'rows' hoặc 'values' được cung cấp, nó hiển thị dưới dạng bảng tổng hợp (bảng chéo); ngược lại, nó hiển thị dưới dạng bảng thông thường.

[!LƯU Ý] Công cụ tạo biểu đồ trực quan địa lý ở trên sử dụng dịch vụ AMap và hiện chỉ hỗ trợ tạo bản đồ trong phạm vi Trung Quốc.

🤖 Cách sử dụng

Để sử dụng với Desktop APP, chẳng hạn như Claude, VSCode, Cline, Cherry Studio, Cursor, v.v., hãy thêm cấu hình máy chủ MCP bên dưới. Trên hệ thống Mac:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"]
    }
  }
}

Trên hệ thống Windows:

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@antv/mcp-server-chart"]
    }
  }
}

Ngoài ra, bạn có thể sử dụng nó trên aliyun, modelscope, glama.ai, smithery.ai hoặc các nền tảng khác với giao thức HTTP, SSE.

🎨 Sử dụng Kỹ năng

Nếu bạn đang sử dụng một IDE AI có hỗ trợ kỹ năng (như Claude Code), bạn có thể sử dụng kỹ năng chart-visualization để tự động chọn loại biểu đồ tốt nhất và tạo hình ảnh trực quan.

Bạn có thể thêm kỹ năng từ https://github.com/antvis/chart-visualization-skills bằng cách sử dụng:

npx skills add antvis/chart-visualization-skills

Sau đó cung cấp dữ liệu của bạn hoặc mô tả hình ảnh trực quan bạn muốn. Kỹ năng sẽ thông minh lựa chọn từ hơn 25 loại biểu đồ và tạo biểu đồ cho bạn.

🚰 Chạy với SSE hoặc Streamable transport

Chạy trực tiếp

Cài đặt gói trên toàn cầu.

npm install -g @antv/mcp-server-chart

Chạy máy chủ với tùy chọn transport bạn ưa thích:

# For SSE transport (default endpoint: /sse)
mcp-server-chart --transport sse

# For Streamable transport with custom endpoint
mcp-server-chart --transport streamable

Sau đó, bạn có thể truy cập máy chủ tại:

• SSE transport: http://localhost:1122/sse
• Streamable transport: http://localhost:1122/mcp

Triển khai bằng Docker

Vào thư mục docker.

cd docker

Triển khai bằng docker-compose.

docker compose up -d

Sau đó, bạn có thể truy cập máy chủ tại:

• SSE transport: http://localhost:1123/sse
• Streamable transport: http://localhost:1122/mcp

🎮 Tùy chọn CLI

Bạn cũng có thể sử dụng các tùy chọn CLI sau khi chạy máy chủ MCP. Các tùy chọn lệnh bằng cách chạy cli với -H.

MCP Server Chart CLI

Options:
  --transport, -t  Specify the transport protocol: "stdio", "sse", or "streamable" (default: "stdio")
  --host, -h       Specify the host for SSE or streamable transport (default: localhost)
  --port, -p       Specify the port for SSE or streamable transport (default: 1122)
  --endpoint, -e   Specify the endpoint for the transport:
                   - For SSE: default is "/sse"
                   - For streamable: default is "/mcp"
  --help, -H       Show this help message

⚙️ Biến môi trường

Biến	Mô tả	Mặc định	Ví dụ
VIS_REQUEST_SERVER	URL dịch vụ tạo biểu đồ tùy chỉnh cho triển khai riêng tư	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	Định danh dịch vụ cho lịch sử tạo biểu đồ	-	your-service-id-123
DISABLED_TOOLS	Danh sách tên công cụ cần vô hiệu hóa, phân tách bằng dấu phẩy	-	generate_fishbone_diagram,generate_mind_map

📠 Triển khai riêng tư

MCP Server Chart cung cấp dịch vụ tạo biểu đồ miễn phí theo mặc định. Đối với người dùng có nhu cầu triển khai riêng tư, họ có thể thử sử dụng VIS_REQUEST_SERVER để tùy chỉnh dịch vụ tạo biểu đồ của riêng mình.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "VIS_REQUEST_SERVER": "<YOUR_VIS_REQUEST_SERVER>"
      }
    }
  }
}

Bạn có thể sử dụng dự án GPT-Vis-SSR của AntV để triển khai dịch vụ HTTP trong môi trường riêng tư, sau đó truyền địa chỉ URL qua biến môi trường VIS_REQUEST_SERVER.

• Phương thức: POST
• Tham số: Sẽ được chuyển đến GPT-Vis-SSR để kết xuất. Ví dụ: { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }.
• Kết quả trả về: Đối tượng trả về của dịch vụ HTTP.
  • success: boolean Liệu có tạo hình ảnh biểu đồ thành công hay không.
  • resultObj: string URL hình ảnh biểu đồ.
  • errorMessage: string Khi success = false, trả về thông báo lỗi.

[!LƯU Ý] Giải pháp triển khai riêng tư hiện không hỗ trợ tạo biểu đồ trực quan địa lý bao gồm 3 công cụ: geographic-district-map, geographic-path-map, geographic-pin-map.

🗺️ Lịch sử tạo

Theo mặc định, người dùng được yêu cầu tự lưu kết quả, nhưng chúng tôi cũng cung cấp dịch vụ xem lịch sử tạo biểu đồ, yêu cầu người dùng tự tạo định danh dịch vụ và cấu hình nó.

Sử dụng Alipay để quét và mở mini program nhằm tạo định danh dịch vụ cá nhân (nhấp vào menu "Của tôi" bên dưới, vào trang "Dịch vụ của tôi", nhấp vào nút "Tạo", và nhấp vào nút "Sao chép" sau khi thành công):

Tiếp theo, bạn cần thêm biến môi trường SERVICE_ID vào cấu hình máy chủ MCP. Ví dụ: cấu hình cho Mac như sau (đối với hệ thống Windows, chỉ cần thêm biến env):

{
  "mcpServers": {
    "AntV Map": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "SERVICE_ID": "***********************************"
      }
    }
  }
}

Sau khi cập nhật cấu hình Máy chủ MCP, bạn cần khởi động lại ứng dụng khách AI của mình và kiểm tra lại xem bạn đã khởi động và kết nối với Máy chủ MCP thành công hay chưa. Sau đó, bạn có thể thử tạo bản đồ lại. Sau khi tạo thành công, bạn có thể vào trang "Bản đồ của tôi" trong mini program để xem lịch sử tạo bản đồ của mình.

🎛️ Lọc công cụ

Bạn có thể vô hiệu hóa các công cụ tạo biểu đồ cụ thể bằng biến môi trường DISABLED_TOOLS. Điều này hữu ích khi một số công cụ gặp vấn đề tương thích với máy khách MCP của bạn hoặc khi bạn muốn giới hạn chức năng có sẵn.

{
  "mcpServers": {
    "mcp-server-chart": {
      "command": "npx",
      "args": ["-y", "@antv/mcp-server-chart"],
      "env": {
        "DISABLED_TOOLS": "generate_fishbone_diagram,generate_mind_map"
      }
    }
  }
}

Tên công cụ có sẵn để lọc Xem ✨ Tính năng.

🔨 Phát triển

Cài đặt các phụ thuộc:

npm install

Xây dựng máy chủ:

npm run build

Khởi động máy chủ MCP:

npm run start

Khởi động máy chủ MCP với SSE transport:

node build/index.js -t sse

Khởi động máy chủ MCP với Streamable transport:

node build/index.js -t streamable

📄 Giấy phép

MIT@AntV.