Erstellen Sie professionelle Diagramme in natürlicher Sprache in AI IDE mit AntV MCP Chart

Datenvisualisierung erfordert in der Regel mühsame Programmierung oder komplexe GUI-Manipulation, aber jetzt gibt es neue Möglichkeiten. Die Open-Source-Bibliothek der Ant Group zur Datenvisualisierung AntV ökologisch @antv/mcp-server-chart Projekt, das es den Nutzern ermöglicht, mit Hilfe von Befehlen in natürlicher Sprache schnell eine Vielzahl von Mainstream-Diagrammen zu erstellen, wodurch der Umwandlungsprozess von Daten in Grafiken erheblich vereinfacht wird.

In diesem Artikel wird detailliert beschrieben, wie dieses Tool konfiguriert und verwendet wird, und seine leistungsstarken Funktionen werden anhand von Beispielen aus der Praxis demonstriert.

Was ist MCP?

MCP (Middleware Communication Protocol) ist ein Middleware-Kommunikationsprotokoll, das einen standardisierten Datenaustausch zwischen verschiedenen Anwendungen oder Diensten ermöglicht. Im AntV in der Ökologie derMCP Er fungiert als Brücke zwischen Front-End-Anwendungen und Back-End-Diagrammerstellungsdiensten.@antv/mcp-server-chart Es ist eine gute Idee, sich auf die MCP s Diagrammdienst, der Befehle empfängt und Visualisierungsergebnisse liefert.

Der Dienst wird derzeit gehostet auf NPM on, abrufbar unter https://www.npmjs.com/package/@antv/mcp-server-chart

Es unterstützt mehr als 25 Arten von Mainstream-Diagrammen, die im Grunde alle Bedürfnisse der täglichen Datenanalyse abdecken.

Konfigurieren des MCP-Chart-Dienstes

Der Konfigurationsprozess ist sehr einfach und erfordert nur eine Konfigurationsdatei, aber die Konfigurationsanweisungen unterscheiden sich leicht von einer Betriebssystemumgebung zur anderen.

Mac-Systemkonfiguration

existieren Mac Computer mit der folgenden Konfigurationsdatei:

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

Windows-Systemkonfiguration

existieren Windows Computer ist es aufgrund von Unterschieden in den Befehlszeilenumgebungen erforderlich, die cmd anrufen npx.

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

Integration in Trae Tools

Als nächstes müssen wir eine neue Datei zu einer Datei hinzufügen, die die MCP Client-seitige Tools (dieser Artikel basiert auf dem Trae (zum Beispiel), um diesen Dienst zu laden.

1. Gehen Sie zunächst zu Trae (in Form eines Nominalausdrucks) MCP Konfigurationsschnittstelle.
   
2. Wählen Sie in der Liste der Dienste "Manuell hinzufügen".
   
3. Öffnen Sie anschließend den Bearbeitungsmodus "Raw Configuration (JSON)".
   
4. entspricht den Einstellungen Ihres Betriebssystems JSON Der Konfigurationscode wird kopiert und in die Datei mcpServers unterhalb des Knotens. Im Folgenden wird die Windows Beispiele für Systeme.

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

   

5. Warten Sie nach dem Speichern der Konfiguration, bis der Status des Dienstes erfolgreich aktualisiert wurde. Wenn Sie sehen, dass der Status zu "Running" wechselt, ist der Dienst bereit.
   

Beispiel für die Erstellung von Diagrammen durch natürliche Sprache

Nach der Konfiguration können Sie mit einfachen Konversationsbefehlen mit der Erstellung von Diagrammen beginnen. Diese Interaktion ist besonders freundlich für Produktmanager und Datenanalysten, die Dateneinblicke schnell validieren müssen.

Histogramm

Geben Sie Befehle ein, die die Art der anzuzeigenden Daten und Diagramme beschreiben.

帮我生成一个柱状图，显示2025年前半年的销售数据：
1月: 120万, 2月: 150万, 3月: 180万, 4月: 160万, 5月: 180万, 6月: 230万

Der Dienst liefert sofort ein übersichtliches Balkendiagramm.

Kreisdiagramm

Auch für die Erstellung eines Tortendiagramms ist nur ein Satz erforderlich.

帮我画个饼图，显示2025年前半年智能手机市场份额：
苹果：15%, 小米：17%, OPPO：14%, vivo：16%, 华为：17%, 其他：21%

Trenddarstellung

Bei mehrdimensionalen Daten wählt es auf intelligente Weise den geeigneten Diagrammtyp aus, z. B. ein Liniendiagramm zur Darstellung von Trends.

生成一个折线图，显示某电商平台2025年前半年的核心指标：
1月：用户数150万，订单数18万，GMV 520万
2月：用户数155万，订单数19万，GMV 535万
3月：用户数162万，订单数21万，GMV 565万
4月：用户数158万，订单数20万，GMV 550万
5月：用户数168万，订单数23万，GMV 595万
6月：用户数175万，订单数25万，GMV 625万

Wortwolkendiagramm

Das Wortwolkendiagramm visualisiert die Häufigkeit der Schlüsselwörter in den Textdaten.

根据这些技术关键词生成词云图：
JavaScript(100), Python(190), React(80), Vue(70), Node.js(65), TypeScript(60), Docker(155), Kubernetes(150), Java(160), Redis(60), MongoDB(135), MySQL(130)

Visualisierung der Karte

Auch die Visualisierung von Geodaten ist einfach und unterstützt sowohl statische als auch dynamische interaktive Modi.

生成一个中国地图，显示各省份2025年的销售额分布：
北京：2000万, 上海：1800万, 广东：2500万, 浙江：1200万, 江苏：1500万, 陕西：1500万, 贵州：1300万, 湖北：1500万

Statische Karten bieten einen Überblick über die Daten.

Dynamische interaktive Karten ermöglichen es dem Benutzer, durch Bewegen der Maus und andere Aktionen detailliertere Dateninformationen anzuzeigen.

Die Kombination von Natural Language Processing (NLP) mit Datenvisualisierung senkt nicht nur die Schwelle für professionelles Charting, sondern eröffnet auch neue phantasievolle Möglichkeiten für die zukünftige Mensch-Computer-Interaktion. Mit der zunehmenden Leistungsfähigkeit von Modellen können komplexe Datenanalysen und die Erstellung von Berichten in Zukunft mit nur einem Satz abgeschlossen werden.