/ الدليل / الملعب / AntV Chart
← كل الخوادم ↗ GitHub
● رسمي antvis ⚡ فوري

AntV Chart

بواسطة antvis · antvis/mcp-server-chart

حوّل البيانات الخام إلى أكثر من 25 نوع رسم بياني (خط، شريط، sankey، قمع، رادار، سحابة كلمات) عبر AntV من Ant Group — بدون الحاجة للتعامل مع مكتبة معقدة للرسوم البيانية.

@antv/mcp-server-chart ينتج رسوم بيانية مصقولة بصيغة SVG/PNG من مواصفة JSON صغيرة. تغطي الأدوات الخطية والشريطية والمساحية والدائرية والنقطية ورادار و sankey والقمعية والشجرية وسحابات الكلمات والصناديق والرسوم البيانية التكرارية وغيرها. الناتج عنوان URL أو صورة PNG بصيغة base64 — يسهل إدراجها في التقارير.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

antv-chart.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "antv-chart": {
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "antv-chart",
      "command": "npx",
      "args": [
        "-y",
        "@antv/mcp-server-chart"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "antv-chart": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@antv/mcp-server-chart"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add antv-chart -- npx -y @antv/mcp-server-chart

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: AntV Chart

رسم بياني لنتيجة استعلام Postgres في موجه واحد

👤 المحللون الذين يريدون صورة بدلاً من ملف CSV ⏱ ~5 min beginner

متى تستخدمه: لقد قمت للتو بتشغيل استعلام؛ الخطوة الطبيعية التالية هي 'اعرض لي هذا كرسم بياني عمودي'.

المتطلبات الأساسية
  • بيانات على شكل صفوف (من أي MCP آخر أو مُلصقة) — عادةً ناتج استعلام postgres/mongodb/duckdb
الخطوات
  1. اختر نوع الرسم البياني الصحيح
    بالنظر إلى هذه البيانات [الصق الصفوف مع الفئة + القيمة]، أي رسم بياني AntV يناسب بشكل أفضل؟ الخيارات: bar، column، pie، line.✓ تم النسخ
    → اختيار مبرر (على سبيل المثال 'عمودي — فئة مقابل قيمة، ≤20 فئة')
  2. رسم
    أنشئ رسم بياني عمودي مع x=category، y=value، العنوان '<Title>'. أعد عنوان URL للصورة.✓ تم النسخ
    → عنوان URL أو صورة base64
  3. كرر على النمط
    نفس الرسم البياني لكن رتب الأعمدة حسب القيمة تنازلياً، أضف تسميات البيانات، استخدم لوناً واحداً (أزرق بترولي).✓ تم النسخ
    → صورة رسم بياني محسّنة

النتيجة: صورة رسم بياني جاهزة للتقرير في 30 ثانية بدون لمس مكتبة الرسوم البيانية.

المزالق
  • عدد كبير جداً من الفئات يجعل الرسم البياني العمودي غير قابل للقراءة — حدد الحد الأقصى بـ 15 أفضل + 'أخرى'؛ استخدم خريطة شجرية أو خريطة حرارية للبيانات عالية الأصلية
اجمعها مع: postgres

تصور قمع التحويل من عدد الأحداث

👤 محللو النمو / المنتج ⏱ ~15 min intermediate

متى تستخدمه: لديك عدد أحداث خطوة بخطوة (التسجيل → التحقق → الإجراء الأول → مدفوع) وتحتاج إلى رسم بياني قمعي.

الخطوات
  1. احصل على عدد الخطوات
    من Postgres: عد المستخدمين المميزين في كل خطوة قمع خلال آخر 30 يوم، بالترتيب.✓ تم النسخ
    → الخطوة + صفوف العد
  2. رسم القمع
    أنشئ رسم بياني قمعي AntV مع تلك الخطوات. اعرض العد المطلق ونسبة التحويل من خطوة إلى خطوة.✓ تم النسخ
    → صورة القمع مع التسميات
  3. قارن القطاعات
    الآن أنشئ قمعين جنباً إلى جنب: جوال مقابل سطح المكتب. نفس الخطوات؛ أضف حواشي الفروقات الأكبر في الانقطاع.✓ تم النسخ
    → تصور المقارنة

النتيجة: تصور قمعي جاهز للصق مع مقارنة القطاعات.

المزالق
  • عد الأحداث غير الفريدة يضخم الخطوات اللاحقة — عد دائماً user_id المميز لكل خطوة، وليس صفوف الأحداث
اجمعها مع: postgres

توليد رسم تخطيطي sankey أو شجري للعلاقات

👤 أي شخص يشرح التدفقات أو التسلسلات الهرمية ⏱ ~15 min intermediate

متى تستخدمه: تريد إظهار 'حركة المرور حسب المصدر → الهبوط → التحويل' أو مخطط تنظيمي.

الخطوات
  1. شكّل بياناتك
    لدي حواف source → destination → value [الصق]. شكّلها لـ sankey AntV.✓ تم النسخ
    → مصفوفة الحواف الموحدة
  2. رسم sankey
    أنشئ sankey مع تسميات العقد وأوزان الروابط. استخدم لوحة الألوان '3-color'.✓ تم النسخ
    → صورة Sankey
  3. بديل كشجرة
    إذا كانت هرمية بدلاً من ذلك، اعرضها كخريطة شجرية أو شجرة تنظيمية — نفس البيانات، نوع رسم بياني مختلف.✓ تم النسخ
    → تصور بديل

النتيجة: تصور العلاقة الصحيح لقصتك، من المحاولة الأولى.

المزالق
  • Sankey الذي يحتوي على عدد كبير جداً من العقد يصبح معقداً — دمج المصادر الصغيرة في 'أخرى'؛ احتفظ بـ ≤20 عقدة لكل طبقة
اجمعها مع: neo4j

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

antv-chart + postgres

استعلام → رسم بياني في موجه واحد لتقارير PM

استعلم عن التسجيلات الأسبوعية لآخر 12 أسبوع من Postgres، ثم أنشئ رسم بياني خطي AntV للاتجاه.✓ تم النسخ
antv-chart + mongodb

التجميع + تصور بيانات المستندات

جمّع الطلبات حسب البلد هذا الربع من Mongo، اعرضها كرسم بياني عمودي مرتب تنازلياً.✓ تم النسخ
antv-chart + filesystem

احفظ الصورة المُنشأة جنباً إلى جنب مع markdown التقرير

اعرض رسم بياني القمع، احفظ PNG في /reports/funnel-<date>.png، وأدرجه في /reports/weekly.md.✓ تم النسخ
antv-chart + notion

أدرج الرسوم البيانية في صفحة تقرير Notion

أنشئ الثلاثة رسوم بيانية لمؤشرات الأداء الرئيسية الأسبوعية؛ أنشئ صفحة Notion مع إدراج كل عنوان URL للرسم البياني كمربع صورة.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
generate_line_chart / generate_column_chart / generate_bar_chart data: row[], x, y, title?, style? مقارنات السلاسل الزمنية والفئات مجاني
generate_pie_chart / generate_donut_chart data, value, category, title? الأجزاء من الكل عندما تكون الفئات ≤6 مجاني
generate_funnel_chart data: [{step, value}] تدفقات التحويل مجاني
generate_sankey_chart nodes, links: [{source,target,value}] التدفق بين الفئات مجاني
generate_scatter_chart / generate_bubble_chart data, x, y, size?, color? استكشاف الارتباط أو التوزيع مجاني
generate_radar_chart data: {dimensions, series} مقارنة متعددة الأبعاد عبر ≤2 كيان مجاني
generate_word_cloud_chart data: [{word, weight}] تصور تكرار النص مجاني
generate_treemap_chart / generate_histogram_chart / generate_boxplot_chart data, fields التوزيعات والفئات المتداخلة مجاني

التكلفة والحدود

تكلفة التشغيل

حصة API
لا مصادقة؛ حد السرعة العملي يعتمد على الخادم المستضاف (~استخدام تفاعلي معقول)
الرموز لكل استدعاء
المواصفة + الاستجابة: 300–1500 رموز
التكلفة المالية
مجاني — يعمل محلياً عبر npx / مقابل خدمة العرض العامة لـ AntV
نصيحة
احتفظ بنقاط البيانات تحت بضع مئات لكل رسم بياني؛ أرسل البيانات المجمعة، وليس الأحداث الخام.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: لا يلزم
نقل البيانات الخارجي: يتم إرسال البيانات التي تمررها في المواصفة إلى خدمة العرض الخاصة بـ AntV لإنتاج عنوان URL للصورة — لا تُرسل معلومات تحديد الهوية الشخصية أو البيانات السرية

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

صيغة البيانات غير صحيحة / حقل مفقود

كل نوع رسم بياني يتوقع شكلاً محدداً؛ أعد فحص مدخلات الأداة — القمع يريد {step, value}، sankey يريد {source, target, value}.

عاد عنوان URL 404 بعد فترة

عناوين URL المستضافة تنتهي صلاحيتها. احفظ الصورة محلياً (نظام الملفات) مباشرة بعد الإنشاء إذا كنت بحاجة إلى الاستمرارية.

الرسم البياني غير قابل للقراءة — عدد كبير جداً من الأعمدة/العقد

جمّع إلى أفضل N + أخرى، أو بدّل نوع الرسم البياني (sankey/treemap) الأنسب للأصلية.

البدائل

AntV Chart مقابل البدائل

البديلمتى تستخدمهاالمقايضة
QuickChartتريد رسوم بيانية بنمط Chart.js عبر URLعدد أقل من أنواع الرسوم البيانية المتخصصة مقارنة بـ AntV
Mermaid MCPتحتاج إلى رسوم تخطيطية (مخططات انسيابية، متسلسلة)، وليس رسوم بيانية للبياناتغير مناسب لتصور البيانات الرقمية
Vega-Lite MCPتريد نهج قواعد الرسومياتمواصفة أكثر انحداراً؛ مرونة أكثر

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills