Crie gráficos profissionais em linguagem natural no AI IDE com o AntV MCP Chart

A visualização de dados geralmente requer uma programação tediosa ou uma manipulação complexa da GUI, mas agora há novas opções. Biblioteca de visualização de dados de código aberto do Ant Group AntV ecológico @antv/mcp-server-chart permitindo que os usuários gerem rapidamente uma variedade de gráficos convencionais por meio de comandos de linguagem natural, simplificando bastante o processo de conversão de dados em gráficos.

Este artigo detalhará como configurar e usar essa ferramenta e demonstrará seus recursos avançados por meio de exemplos reais.

O que é MCP?

MCP (Middleware Communication Protocol) é um protocolo de comunicação de middleware que permite a troca padronizada de dados entre diferentes aplicativos ou serviços. No AntV na ecologia doMCP Atua como uma ponte entre os aplicativos de front-end e os serviços de geração de gráficos de back-end.@antv/mcp-server-chart É uma ótima ideia basear MCP s, que recebe comandos e retorna resultados de visualização.

Atualmente, o serviço está hospedado em NPM on, acessado em https://www.npmjs.com/package/@antv/mcp-server-chart

Ele oferece suporte a mais de 25 tipos de gráficos convencionais, atendendo basicamente a todas as necessidades da análise diária de dados.

Configuração do serviço de gráficos MCP

O processo de configuração é muito simples e requer apenas um arquivo de configuração, mas as instruções de configuração variam ligeiramente de um ambiente de sistema operacional para outro.

Configuração do sistema Mac

existir Mac computador com o seguinte arquivo de configuração:

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

Configuração do sistema Windows

existir Windows computador, devido a diferenças nos ambientes de linha de comando, é necessário passar o cmd para chamar npx.

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

Integração nas ferramentas do Trae

Em seguida, precisamos adicionar um novo arquivo a um arquivo que suporte o MCP ferramentas do lado do cliente (este artigo é baseado no Trae (por exemplo) para carregar esse serviço.

1. Em primeiro lugar, vá para Trae (usado em uma expressão nominal) MCP Interface de configuração.
   
2. Na lista de serviços, selecione "Add manually" (Adicionar manualmente).
   
3. Em seguida, abra o modo de edição "Raw Configuration (JSON)".
   
4. corresponderá ao JSON O código de configuração é copiado e colado no arquivo mcpServers sob o nó. A seguir, a Windows Exemplos de sistemas.

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

   

5. Depois de salvar a configuração, aguarde até que o status do serviço seja atualizado com êxito. Quando você vir o status mudar para "Running" (Em execução), isso significa que o serviço está pronto.
   

Exemplo de geração de gráficos por meio de linguagem natural

Depois de configurado, você pode começar a criar gráficos com comandos simples de conversação. Essa interação é especialmente amigável para gerentes de produtos e analistas de dados que precisam validar insights de dados rapidamente.

histograma

Digite os comandos que descrevem o tipo de dados e gráficos a serem exibidos.

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

O serviço retorna imediatamente um gráfico de barras claro.

gráfico de pizza

Da mesma forma, a geração de um gráfico de pizza requer apenas uma frase.

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

gráfico de tendências

Para dados multidimensionais, ele seleciona de forma inteligente o tipo de gráfico apropriado, como um gráfico de linhas para mostrar tendências.

生成一个折线图，显示某电商平台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万

diagrama de nuvem de palavras

O gráfico de nuvem de palavras visualiza a frequência de palavras-chave dos dados de texto.

根据这些技术关键词生成词云图：
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)

Visualização de mapas

A visualização de dados geoespaciais também é fácil e suporta modos interativos estáticos e dinâmicos.

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

Os mapas estáticos fornecem uma visão geral dos dados.

Os mapas interativos dinâmicos permitem que o usuário visualize informações de dados mais detalhadas ao passar o mouse e outras ações.

A combinação do Processamento de Linguagem Natural (PLN) com a visualização de dados não apenas reduz o limite para a elaboração de gráficos profissionais, mas também abre novas possibilidades imaginativas para a futura interação homem-computador. Com a crescente capacidade dos modelos, a análise de dados complexos e a geração de relatórios poderão ser concluídas no futuro com apenas uma frase.