Chart

MCP Server Chart

เซิร์ฟเวอร์ Model Context Protocol สำหรับการสร้างแผนภูมิโดยใช้ AntV เราสามารถใช้เซิร์ฟเวอร์ mcp นี้สำหรับ การสร้างแผนภูมิ และ การวิเคราะห์ข้อมูล

นี่คือเซิร์ฟเวอร์ MCP ที่ใช้ TypeScript ซึ่งมีความสามารถในการสร้างแผนภูมิ ช่วยให้คุณสร้างแผนภูมิประเภทต่างๆ ผ่านเครื่องมือ MCP คุณยังสามารถใช้ใน Dify ได้อีกด้วย

📋 สารบัญ

• ✨ คุณสมบัติ
• 🤖 การใช้งาน
• 🎨 การใช้สกิล
• 🚰 รันด้วยการขนส่ง SSE หรือ Streamable
• 🎮 ตัวเลือก CLI
• ⚙️ ตัวแปรสภาพแวดล้อม
  • VIS_REQUEST_SERVER
  • SERVICE_ID
  • DISABLED_TOOLS
• 📠 การปรับใช้ส่วนตัว
• 🗺️ บันทึกการสร้าง
• 🎛️ การกรองเครื่องมือ
• 🔨 การพัฒนา
• 📄 ใบอนุญาต

✨ คุณสมบัติ

ขณะนี้รองรับแผนภูมิมากกว่า 26 ประเภท

1. generate_area_chart: สร้างแผนภูมิ area ใช้เพื่อแสดงแนวโน้มของข้อมูลภายใต้ตัวแปรอิสระต่อเนื่อง ช่วยให้สังเกตแนวโน้มข้อมูลโดยรวม
2. generate_bar_chart: สร้างแผนภูมิ bar ใช้เพื่อเปรียบเทียบค่าข้ามหมวดหมู่ต่างๆ เหมาะสำหรับการเปรียบเทียบแนวนอน
3. generate_boxplot_chart: สร้าง boxplot ใช้เพื่อแสดงการกระจายของข้อมูล รวมถึงค่ามัธยฐาน ควอร์ไทล์ และค่าผิดปกติ
4. generate_column_chart: สร้างแผนภูมิ column ใช้เพื่อเปรียบเทียบค่าข้ามหมวดหมู่ต่างๆ เหมาะสำหรับการเปรียบเทียบแนวตั้ง
5. generate_district_map - สร้าง district-map ใช้เพื่อแสดงเขตการปกครองและการกระจายข้อมูล
6. generate_dual_axes_chart: สร้างแผนภูมิ dual-axes ใช้เพื่อแสดงความสัมพันธ์ระหว่างสองตัวแปรที่มีหน่วยหรือช่วงต่างกัน
7. generate_fishbone_diagram: สร้างแผนภาพ fishbone หรือที่เรียกว่าแผนภาพก้างปลา ใช้เพื่อระบุและแสดงสาเหตุหลักของปัญหา
8. generate_flow_diagram: สร้าง flowchart ใช้เพื่อแสดงขั้นตอนและลำดับของกระบวนการ
9. generate_funnel_chart: สร้างแผนภูมิ funnel ใช้เพื่อแสดงการสูญเสียข้อมูลในขั้นตอนต่างๆ
10. generate_histogram_chart: สร้าง histogram ใช้เพื่อแสดงการกระจายของข้อมูลโดยแบ่งเป็นช่วงและนับจำนวนจุดข้อมูลในแต่ละช่วง
11. generate_line_chart: สร้างแผนภูมิ line ใช้เพื่อแสดงแนวโน้มของข้อมูลตามเวลาหรือตัวแปรต่อเนื่องอื่นๆ
12. generate_liquid_chart: สร้างแผนภูมิ liquid ใช้เพื่อแสดงสัดส่วนของข้อมูล แสดงเปอร์เซ็นต์ในรูปแบบทรงกลมที่เติมน้ำ
13. generate_mind_map: สร้าง mind-map ใช้เพื่อแสดงกระบวนการคิดและข้อมูลลำดับชั้น
14. generate_network_graph: สร้างกราฟ network ใช้เพื่อแสดงความสัมพันธ์และการเชื่อมต่อระหว่างโหนด
15. generate_organization_chart: สร้างแผนภูมิ organizational ใช้เพื่อแสดงโครงสร้างขององค์กรและความสัมพันธ์ของบุคลากร
16. generate_path_map - สร้าง path-map ใช้เพื่อแสดงผลการวางแผนเส้นทางสำหรับ POI
17. generate_pie_chart: สร้างแผนภูมิ pie ใช้เพื่อแสดงสัดส่วนของข้อมูล แบ่งเป็นส่วนๆ ที่แสดงโดยเซกเตอร์ซึ่งแสดงเปอร์เซ็นต์ของแต่ละส่วน
18. generate_pin_map - สร้าง pin-map ใช้เพื่อแสดงการกระจายของ POI
19. generate_radar_chart: สร้างแผนภูมิ radar ใช้เพื่อแสดงข้อมูลหลายมิติอย่างครอบคลุม แสดงหลายมิติในรูปแบบคล้ายเรดาร์
20. generate_sankey_chart: สร้างแผนภูมิ sankey ใช้เพื่อแสดงการไหลและปริมาณข้อมูล แสดงการเคลื่อนที่ของข้อมูลระหว่างโหนดต่างๆ ในรูปแบบ Sankey
21. generate_scatter_chart: สร้างพล็อต scatter ใช้เพื่อแสดงความสัมพันธ์ระหว่างสองตัวแปร แสดงจุดข้อมูลเป็นจุดกระจัดกระจายบนระบบพิกัด
22. generate_treemap_chart: สร้าง treemap ใช้เพื่อแสดงข้อมูลลำดับชั้น แสดงข้อมูลในรูปแบบสี่เหลี่ยมผืนผ้าที่ขนาดของสี่เหลี่ยมแสดงถึงค่าของข้อมูล
23. generate_venn_chart: สร้างแผนภาพ venn ใช้เพื่อแสดงความสัมพันธ์ระหว่างเซต รวมถึงอินเตอร์เซกชัน ยูเนียน และผลต่าง
24. generate_violin_chart: สร้างพล็อต violin ใช้เพื่อแสดงการกระจายของข้อมูล รวมคุณสมบัติของบ็อกซ์พล็อตและเดนซิตี้พล็อตเพื่อให้มุมมองที่ละเอียดขึ้นของการกระจายข้อมูล
25. generate_word_cloud_chart: สร้าง word-cloud ใช้เพื่อแสดงความถี่ของคำในข้อมูลข้อความ โดยขนาดฟอนต์บ่งบอกความถี่ของแต่ละคำ
26. generate_spreadsheet: สร้าง spreadsheet หรือตาราง pivot สำหรับแสดงข้อมูลตาราง เมื่อระบุฟิลด์ 'rows' หรือ 'values' จะแสดงผลเป็นตาราง pivot (ตารางไขว้) มิฉะนั้นจะแสดงผลเป็นตารางปกติ

[!NOTE] เครื่องมือสร้างแผนภูมิการแสดงผลทางภูมิศาสตร์ข้างต้นใช้ บริการ AMap และปัจจุบันรองรับเฉพาะการสร้างแผนที่ภายในประเทศจีน

🤖 การใช้งาน

เพื่อใช้กับ Desktop APP เช่น Claude, VSCode, Cline, Cherry Studio, Cursor และอื่นๆ ให้เพิ่มการกำหนดค่าเซิร์ฟเวอร์ MCP ด้านล่าง บนระบบ Mac:

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

บนระบบ Window:

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

นอกจากนี้ คุณสามารถใช้บน aliyun, modelscope, glama.ai, smithery.ai หรืออื่นๆ ด้วย HTTP, SSE Protocol

🎨 การใช้สกิล

หากคุณใช้ AI IDE ที่รองรับสกิล (เช่น Claude Code) คุณสามารถใช้สกิล chart-visualization เพื่อเลือกประเภทแผนภูมิที่ดีที่สุดและสร้างการแสดงผลข้อมูลโดยอัตโนมัติ

คุณสามารถเพิ่มสกิลจาก https://github.com/antvis/chart-visualization-skills โดยใช้:

npx skills add antvis/chart-visualization-skills

จากนั้นระบุข้อมูลของคุณหรืออธิบายการแสดงผลข้อมูลที่คุณต้องการ สกิลจะเลือกจากแผนภูมิมากกว่า 25 ประเภทอย่างชาญฉลาดและสร้างแผนภูมิให้คุณ

🚰 รันด้วยการขนส่ง SSE หรือ Streamable

รันโดยตรง

ติดตั้งแพ็คเกจแบบ global

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

รันเซิร์ฟเวอร์ด้วยตัวเลือกการขนส่งที่คุณต้องการ:

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

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

จากนั้นคุณสามารถเข้าถึงเซิร์ฟเวอร์ได้ที่:

• การขนส่ง SSE: http://localhost:1122/sse
• การขนส่ง Streamable: http://localhost:1122/mcp

การปรับใช้ด้วย Docker

เข้าสู่ไดเรกทอรี docker

cd docker

ปรับใช้โดยใช้ docker-compose

docker compose up -d

จากนั้นคุณสามารถเข้าถึงเซิร์ฟเวอร์ได้ที่:

• การขนส่ง SSE: http://localhost:1123/sse
• การขนส่ง Streamable: http://localhost:1122/mcp

🎮 ตัวเลือก CLI

คุณยังสามารถใช้ตัวเลือก CLI ต่อไปนี้เมื่อรันเซิร์ฟเวอร์ MCP ตัวเลือกคำสั่งโดยรัน cli ด้วย -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

⚙️ ตัวแปรสภาพแวดล้อม

ตัวแปร	คำอธิบาย	ค่าเริ่มต้น	ตัวอย่าง
VIS_REQUEST_SERVER	URL บริการสร้างแผนภูมิแบบกำหนดเองสำหรับการปรับใช้ส่วนตัว	https://antv-studio.alipay.com/api/gpt-vis	https://your-server.com/api/chart
SERVICE_ID	ตัวระบุบริการสำหรับบันทึกการสร้างแผนภูมิ	-	your-service-id-123
DISABLED_TOOLS	รายชื่อเครื่องมือที่ต้องการปิดใช้งาน คั่นด้วยเครื่องหมายจุลภาค	-	generate_fishbone_diagram,generate_mind_map

📠 การปรับใช้ส่วนตัว

MCP Server Chart ให้บริการสร้างแผนภูมิฟรีตามค่าเริ่มต้น สำหรับผู้ใช้ที่ต้องการการปรับใช้ส่วนตัว สามารถลองใช้ VIS_REQUEST_SERVER เพื่อปรับแต่งบริการสร้างแผนภูมิของตนเอง

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

คุณสามารถใช้โปรเจกต์ GPT-Vis-SSR ของ AntV เพื่อปรับใช้บริการ HTTP ในสภาพแวดล้อมส่วนตัว จากนั้นส่งที่อยู่ URL ผ่าน env VIS_REQUEST_SERVER

• Method: POST
• Parameter: ซึ่งจะถูกส่งไปยัง GPT-Vis-SSR สำหรับการเรนเดอร์ เช่น { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }
• Return: ออบเจกต์การส่งกลับของบริการ HTTP
  • success: boolean ว่าสร้างภาพแผนภูมิสำเร็จหรือไม่
  • resultObj: string URL รูปภาพแผนภูมิ
  • errorMessage: string เมื่อ success = false ส่งกลับข้อความแสดงข้อผิดพลาด

[!NOTE] โซลูชันการปรับใช้ส่วนตัวปัจจุบันไม่รองรับการสร้างแผนภูมิการแสดงผลทางภูมิศาสตร์ รวมถึง 3 เครื่องมือ: geographic-district-map, geographic-path-map, geographic-pin-map

🗺️ บันทึกการสร้าง

ตามค่าเริ่มต้น ผู้ใช้จำเป็นต้องบันทึกผลลัพธ์ด้วยตนเอง แต่เรายังมีบริการสำหรับดูบันทึกการสร้างแผนภูมิ ซึ่งต้องการให้ผู้ใช้สร้างตัวระบุบริการสำหรับตนเองและกำหนดค่า

ใช้ Alipay สแกนและเปิดมินิโปรแกรมเพื่อสร้างตัวระบุบริการส่วนบุคคล (คลิกเมนู "My" ด้านล่าง เข้าสู่หน้า "My Services" คลิกปุ่ม "Generate" และคลิกปุ่ม "Copy" หลังจากสำเร็จ):

ถัดไป คุณต้องเพิ่มตัวแปรสภาพแวดล้อม SERVICE_ID ในการกำหนดค่าเซิร์ฟเวอร์ MCP ตัวอย่างเช่น การกำหนดค่าสำหรับ Mac เป็นดังนี้ (สำหรับระบบ Windows เพียงเพิ่มตัวแปร env):

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

หลังจากอัปเดตการกำหนดค่า MCP Server คุณต้องรีสตาร์ทแอปพลิเคชันไคลเอนต์ AI ของคุณและตรวจสอบอีกครั้งว่าคุณได้เริ่มต้นและเชื่อมต่อกับ MCP Server สำเร็จหรือไม่ จากนั้นคุณสามารถลองสร้างแผนที่อีกครั้ง หลังจากสร้างสำเร็จ คุณสามารถไปที่หน้า "My Map" ของมินิโปรแกรมเพื่อดูบันทึกการสร้างแผนที่ของคุณ

🎛️ การกรองเครื่องมือ

คุณสามารถปิดใช้งานเครื่องมือสร้างแผนภูมิเฉพาะโดยใช้ตัวแปรสภาพแวดล้อม DISABLED_TOOLS สิ่งนี้มีประโยชน์เมื่อเครื่องมือบางอย่างมีปัญหาความเข้ากันได้กับไคลเอนต์ MCP ของคุณ หรือเมื่อคุณต้องการจำกัดฟังก์ชันการทำงานที่มีอยู่

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

ชื่อเครื่องมือที่ใช้ได้สำหรับการกรอง ดู ✨ คุณสมบัติ

🔨 การพัฒนา

ติดตั้งการพึ่งพา:

npm install

สร้างเซิร์ฟเวอร์:

npm run build

เริ่มเซิร์ฟเวอร์ MCP:

npm run start

เริ่มเซิร์ฟเวอร์ MCP ด้วยการขนส่ง SSE:

node build/index.js -t sse

เริ่มเซิร์ฟเวอร์ MCP ด้วยการขนส่ง Streamable:

node build/index.js -t streamable

📄 ใบอนุญาต

MIT@AntV