Chart

MCP Server Chart

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

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

📋 สารบัญ

• ✨ คุณสมบัติ
• 🤖 การใช้งาน
• 🎨 การใช้ทักษะ
• 🚰 รันด้วย SSE หรือ Streamable transport
• 🎮 ตัวเลือก 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 ใช้แสดงการไหลและปริมาณของข้อมูล แสดงการเคลื่อนที่ของข้อมูลระหว่างโหนดต่างๆ ในรูปแบบซันกี้
21. generate_scatter_chart: สร้างพล็อต scatter ใช้แสดงความสัมพันธ์ระหว่างตัวแปรสองตัว แสดงจุดข้อมูลเป็นจุดกระจายบนระบบพิกัด
22. generate_treemap_chart: สร้าง treemap ใช้แสดงข้อมูลแบบลำดับชั้น แสดงข้อมูลในรูปแบบสี่เหลี่ยมผืนผ้าที่ขนาดของสี่เหลี่ยมแทนค่าของข้อมูล
23. generate_venn_chart: สร้างแผนภาพ venn ใช้แสดงความสัมพันธ์ระหว่างเซต รวมถึงจุดตัด ยูเนียน และผลต่าง
24. generate_violin_chart: สร้างพล็อต violin ใช้แสดงการกระจายของข้อมูล ผสมผสานคุณสมบัติของ boxplot และ density plot เพื่อให้เห็นการกระจายของข้อมูลอย่างละเอียดยิ่งขึ้น
25. generate_word_cloud_chart: สร้าง word-cloud ใช้แสดงความถี่ของคำในข้อมูลข้อความ โดยขนาดตัวอักษรบ่งบอกความถี่ของแต่ละคำ
26. generate_spreadsheet: สร้าง spreadsheet หรือตาราง pivot สำหรับแสดงข้อมูลแบบตาราง เมื่อมีการระบุฟิลด์ 'rows' หรือ 'values' จะแสดงเป็นตาราง pivot (cross-tabulation) มิฉะนั้นจะแสดงเป็นตารางปกติ

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

🤖 การใช้งาน

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

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

บนระบบ Windows:

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

นอกจากนี้ คุณยังสามารถใช้งานบน aliyun, modelscope, glama.ai, smithery.ai หรืออื่นๆ ด้วยโปรโตคอล HTTP และ SSE

🎨 การใช้ทักษะ

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

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

npx skills add antvis/chart-visualization-skills

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

🚰 รันด้วย SSE หรือ Streamable transport

รันโดยตรง

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

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

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

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

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

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

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

การติดตั้งด้วย Docker

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

cd docker

ติดตั้งโดยใช้ docker-compose

docker compose up -d

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

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

🎮 ตัวเลือก CLI

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

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

• เมธอด: POST
• พารามิเตอร์: ซึ่งจะถูกส่งไปยัง GPT-Vis-SSR สำหรับการเรนเดอร์ เช่น { "type": "line", "data": [{ "time": "2025-05", "value": 512 }, { "time": "2025-06", "value": 1024 }] }
• ค่าที่ส่งกลับ: ออบเจกต์ที่ส่งกลับจากบริการ 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 server ตัวอย่างเช่น การกำหนดค่าสำหรับ 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 client ของคุณ หรือเมื่อคุณต้องการจำกัดฟังก์ชันการทำงานที่มีให้

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

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

🔨 การพัฒนา

ติดตั้ง dependencies:

npm install

Build เซิร์ฟเวอร์:

npm run build

เริ่ม MCP server:

npm run start

เริ่ม MCP server ด้วย SSE transport:

node build/index.js -t sse

เริ่ม MCP server ด้วย Streamable transport:

node build/index.js -t streamable

📄 สัญญาอนุญาต

MIT@AntV