Chart MCP Server

ทางการ

เซิร์ฟเวอร์ Model Context Protocol สำหรับสร้างแผนภูมิภาพโดยใช้ AntV

เอกสาร

MCP Server Chart

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

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

✨ คุณสมบัติ

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

generate_area_chart: สร้างแผนภูมิ area ใช้เพื่อแสดงแนวโน้มของข้อมูลภายใต้ตัวแปรอิสระต่อเนื่อง ช่วยให้สังเกตแนวโน้มข้อมูลโดยรวม
generate_bar_chart: สร้างแผนภูมิ bar ใช้เพื่อเปรียบเทียบค่าข้ามหมวดหมู่ต่างๆ เหมาะสำหรับการเปรียบเทียบแนวนอน
generate_boxplot_chart: สร้าง boxplot ใช้เพื่อแสดงการกระจายของข้อมูล รวมถึงค่ามัธยฐาน ควอร์ไทล์ และค่าผิดปกติ
generate_column_chart: สร้างแผนภูมิ column ใช้เพื่อเปรียบเทียบค่าข้ามหมวดหมู่ต่างๆ เหมาะสำหรับการเปรียบเทียบแนวตั้ง
generate_district_map - สร้าง district-map ใช้เพื่อแสดงเขตการปกครองและการกระจายข้อมูล
generate_dual_axes_chart: สร้างแผนภูมิ dual-axes ใช้เพื่อแสดงความสัมพันธ์ระหว่างสองตัวแปรที่มีหน่วยหรือช่วงต่างกัน
generate_fishbone_diagram: สร้างแผนภาพ fishbone หรือที่เรียกว่าแผนภาพก้างปลา ใช้เพื่อระบุและแสดงสาเหตุหลักของปัญหา
generate_flow_diagram: สร้าง flowchart ใช้เพื่อแสดงขั้นตอนและลำดับของกระบวนการ
generate_funnel_chart: สร้างแผนภูมิ funnel ใช้เพื่อแสดงการสูญเสียข้อมูลในขั้นตอนต่างๆ
generate_histogram_chart: สร้าง histogram ใช้เพื่อแสดงการกระจายของข้อมูลโดยแบ่งเป็นช่วงและนับจำนวนจุดข้อมูลในแต่ละช่วง
generate_line_chart: สร้างแผนภูมิ line ใช้เพื่อแสดงแนวโน้มของข้อมูลตามเวลาหรือตัวแปรต่อเนื่องอื่นๆ
generate_liquid_chart: สร้างแผนภูมิ liquid ใช้เพื่อแสดงสัดส่วนของข้อมูล แสดงเปอร์เซ็นต์ในรูปแบบทรงกลมที่เติมน้ำ
generate_mind_map: สร้าง mind-map ใช้เพื่อแสดงกระบวนการคิดและข้อมูลลำดับชั้น
generate_network_graph: สร้างกราฟ network ใช้เพื่อแสดงความสัมพันธ์และการเชื่อมต่อระหว่างโหนด
generate_organization_chart: สร้างแผนภูมิ organizational ใช้เพื่อแสดงโครงสร้างขององค์กรและความสัมพันธ์ของบุคลากร
generate_path_map - สร้าง path-map ใช้เพื่อแสดงผลการวางแผนเส้นทางสำหรับ POI
generate_pie_chart: สร้างแผนภูมิ pie ใช้เพื่อแสดงสัดส่วนของข้อมูล แบ่งเป็นส่วนๆ ที่แสดงโดยเซกเตอร์ซึ่งแสดงเปอร์เซ็นต์ของแต่ละส่วน
generate_pin_map - สร้าง pin-map ใช้เพื่อแสดงการกระจายของ POI
generate_radar_chart: สร้างแผนภูมิ radar ใช้เพื่อแสดงข้อมูลหลายมิติอย่างครอบคลุม แสดงหลายมิติในรูปแบบคล้ายเรดาร์
generate_sankey_chart: สร้างแผนภูมิ sankey ใช้เพื่อแสดงการไหลและปริมาณข้อมูล แสดงการเคลื่อนที่ของข้อมูลระหว่างโหนดต่างๆ ในรูปแบบ Sankey
generate_scatter_chart: สร้างพล็อต scatter ใช้เพื่อแสดงความสัมพันธ์ระหว่างสองตัวแปร แสดงจุดข้อมูลเป็นจุดกระจัดกระจายบนระบบพิกัด
generate_treemap_chart: สร้าง treemap ใช้เพื่อแสดงข้อมูลลำดับชั้น แสดงข้อมูลในรูปแบบสี่เหลี่ยมผืนผ้าที่ขนาดของสี่เหลี่ยมแสดงถึงค่าของข้อมูล
generate_venn_chart: สร้างแผนภาพ venn ใช้เพื่อแสดงความสัมพันธ์ระหว่างเซต รวมถึงอินเตอร์เซกชัน ยูเนียน และผลต่าง
generate_violin_chart: สร้างพล็อต violin ใช้เพื่อแสดงการกระจายของข้อมูล รวมคุณสมบัติของบ็อกซ์พล็อตและเดนซิตี้พล็อตเพื่อให้มุมมองที่ละเอียดขึ้นของการกระจายข้อมูล
generate_word_cloud_chart: สร้าง word-cloud ใช้เพื่อแสดงความถี่ของคำในข้อมูลข้อความ โดยขนาดฟอนต์บ่งบอกความถี่ของแต่ละคำ
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