# Habilidades do Agente de Visualização de Gráficos > Transforme conjuntos de dados complexos em gráficos visuais intuitivos com as Habilidades de Visualização de Gráficos AntV, oferecendo mais de 26 tipos de gráficos e geração com tecnologia de IA. Comece a criar histórias de dados impactantes sem esforço. - Canonical: https://nanoskill.ai/pt/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/pt/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: pt - Source type: github - Popularity signal: 523 ## Sources - https://github.com/antvis/chart-visualization-skills ## Install ```shell npx skills add https://github.com/antvis/chart-visualization-skills ``` ## About As Habilidades de Visualização de Gráficos AntV oferecem um conjunto profissional de soluções de visualização projetadas para transformar conjuntos de dados complexos em gráficos visuais intuitivos de forma eficiente e precisa. Iniciada pelo Ant Group, esta coleção de habilidades capacita os usuários a navegar por todo o fluxo de trabalho, desde o design de gráficos e exploração interativa até a análise aprofundada de dados, reduzindo significativamente a barreira de criação por meio de especificações de design inteligentes e uma rica biblioteca de componentes. Fornece suporte robusto para relatórios diários, painéis dinâmicos e análises interativas sofisticadas, tornando os dados visíveis e compreensíveis. O conjunto inclui habilidades especializadas como "chart-visualization" para gerar mais de 26 tipos de gráficos, "infographic-creator" para transformar texto em infográficos visuais envolventes com mais de 50 modelos e "narrative-text-visualization" para converter dados não estruturados em relatórios semanticamente ricos usando a Sintaxe T8. Essas capacidades são ainda mais aprimoradas pela integração de IA, simplificando e automatizando a geração e otimização de visualizações, permitindo que os analistas se concentrem mais em descobrir insights e impulsionar decisões de negócios. Os desenvolvedores também podem aproveitar habilidades dedicadas, como "antv-s2-expert" para tabelas de análise cruzada multidimensional, "antv-g6-graph" para gerar visualizações de gráficos G6 v5 e "antv-g2-chart" para criar gráficos estatísticos G2 v5. Essas ferramentas fornecem código preciso e executável seguindo as melhores práticas, cobrindo funcionalidades principais, vários algoritmos de layout, tipos de componentes e interações. As habilidades podem ser integradas a projetos Node.js via CLI ou API, oferecendo flexibilidade para diferentes necessidades de desenvolvimento. ## Key features - **Geração Abrangente de Gráficos**: Acesse mais de 26 tipos de gráficos inteligentes para diversas necessidades de visualização de dados, incluindo séries temporais, comparações, relacionamentos e dados geográficos. - **Criação de Infográficos com IA**: Gere infográficos bonitos a partir de conteúdo de texto usando mais de 50 modelos, transformando informações em linguagem visual perceptível com símbolos intuitivos. - **Visualizações Estruturadas de Texto Narrativo**: Converta dados não estruturados em relatórios narrativos semanticamente ricos usando a Sintaxe T8, uma linguagem semelhante ao Markdown para narrativas de dados com anotações de entidades e mini gráficos. - **Tabelas de Análise Cruzada Multidimensionais**: Utilize o AntV S2 Expert para desenvolver tabelas dinâmicas, folhas de tabela e células personalizadas, oferecendo orientação abrangente para análise de dados multidimensionais. - **Geração Avançada de Gráficos e Gráficos Estatísticos**: Gere código G6 preciso para grafos de rede, árvore e fluxogramas, e código G2 para visualizações estatísticas como gráficos de barras, linhas e pizza, seguindo as melhores práticas. ## Use cases - **Criar Relatórios Diários e Painéis Dinâmicos**: Transforme rapidamente conjuntos de dados complexos em gráficos visuais intuitivos para relatórios diários e painéis dinâmicos, permitindo tomada de decisão eficiente orientada por dados. - **Desenvolver Ferramentas de Análise Interativa Sofisticadas**: Aproveite o robusto conjunto de ferramentas do AntV para construir aplicações de análise interativa avançadas, fornecendo recursos aprofundados de exploração e visualização de dados. - **Gerar Visualizações Otimizadas por IA**: Simplifique e automatize a geração e otimização de visualizações de dados com capacidades integradas de IA, permitindo que os analistas se concentrem nos insights. - **Transformar Dados em Infográficos Atraentes**: Converta dados, informações e conhecimento em infográficos visualmente atraentes usando uma variedade de modelos para comunicar ideias complexas de forma clara e memorável. ## Result preview Explore um relatório profissional de visualização de dados com tecnologia de IA impulsionado por esta Habilidade. ![A chart visualizing 'Salary Distribution by Department' using box plots for Engineering, Design, Marketing, Sales, and Support. Each box plot shows median, interquartile ranges, whiskers, and outliers, with distinct color coding for each department. The chart clearly conveys salary spread and variability across departments.](https://file.nanoskill.ai/chart-outcome-1.png) ![A line chart titled 'Cumulative Growth Trajectory' showing growth over quarters from Q1 23 to Q4 24. Data points are labeled with numerical values and connected by a green line, with a shaded area beneath to highlight cumulative increase. The chart demonstrates steady upward growth from 1,200 to 6,100.](https://file.nanoskill.ai/chart-outcome-2.png) ![A composite image containing two data visualizations. The upper chart is a scatter plot titled 'Investment vs Performance' comparing investment amounts to performance scores for three groups, represented by color-coded circular markers of varying sizes. The lower chart is a bubble chart titled 'GDP vs Life Expectancy' showing GDP per capita versus life expectancy for countries including Japan, Sweden, USA, Germany, China, Brazil, India, and Kenya. Each country is represented by a colored bubble sized by an additional variable, highlighting global economic and health disparities.](https://file.nanoskill.ai/chart-outcome-3.png) ## Result walkthrough ### Instalar Adicione a Habilidade de Visualização de Gráficos AntV ao seu agente de IA. ![A screenshot of an AI assistant terminal showing the installation of the AntV chart-visualization-skills package. The assistant logs the execution of the command to add the skills repository via 'npx skills add', confirms interactive selection with the '--yes' flag, and lists all 9 installed skills including chart generation, graph visualization, multi-dimensional tables, editing engines, infographics, narrative visualizations, and skill maintenance. The log notes symlinking into Hermes Agent and a security assessment showing low/medium risk with nothing critical.](https://file.nanoskill.ai/chart-visualization-install.png) ### Descrever Descreva a área do tópico que você deseja visualizar, incluindo objetivos, público-alvo e tipos de gráficos ou estilos preferidos. ![A screenshot of an AI assistant task panel for creating a comprehensive AntV chart visualization package. The instructions specify generating multiple chart types, infographics from textual data with templates, and narrative-style reports. Emphasis is on a clean, modern, professional style, ensuring readability, hierarchy, interactivity, dynamic dashboards, drill-down exploration, cross-analysis, and production-ready code snippets for Node.js integration. The final output should be a structured PDF or interactive dashboard, balancing aesthetic elegance with functional clarity.](https://file.nanoskill.ai/chart-visualization-task.png) ### Otimizar Visualizações A Habilidade gera gráficos e painéis otimizados para clareza, layout e insights. ![A screenshot showing the AI assistant output after loading AntV visualization skills and preparing a professional PowerPoint deck. The assistant indicates understanding of all AntV visualization tools and plans to build a data visualization showcase featuring real data across multiple chart types, infographics, narrative visualizations, network graphs, and S2 tables, ready for presentation in PPT format.](https://file.nanoskill.ai/chart-visualization-outcome.png) ## Skill definition # Habilidades de Visualização de Gráficos Transformando dados em uma linguagem visual para um pensamento mais claro. ## Visão Geral Na era da tomada de decisão baseada em dados, a visualização e análise de dados eficientes e precisas são fundamentais. O AntV oferece um conjunto profissional de soluções de visualização, fornecendo um toolkit robusto e um conjunto abrangente de habilidades para todo o fluxo de trabalho — desde o design de gráficos e exploração interativa até a análise aprofundada de dados. Ele capacita os usuários a transformar rapidamente conjuntos de dados complexos em gráficos visuais intuitivos, reduzindo significativamente a barreira de criação por meio de especificações de design inteligentes e uma rica biblioteca de componentes. Seja para relatórios diários, dashboards dinâmicos ou análises interativas sofisticadas, o AntV oferece suporte confiável. Ao integrar capacidades de IA, essas ferramentas simplificam e automatizam ainda mais a geração e otimização de visualizações. Isso permite que os analistas se concentrem mais em descobrir insights e impulsionar decisões de negócios, tornando verdadeiramente os dados visíveis e compreensíveis. > [!WARNING] > Este projeto apenas mescla código gerado por IA. > > **Como contribuir:** > 1. Envie uma issue descrevendo o problema claramente > 2. Atribua-a ao @copilot com seus requisitos ## Uso Adicione este marketplace ao Claude Code: ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Ou você pode instalar diretamente as habilidades para seus múltiplos agentes: ```bash npx skills add antvis/chart-visualization-skills ``` ## Habilidades Disponíveis - 📊 **chart-visualization**: Uma habilidade abrangente de geração de gráficos alimentada pelo AntV que oferece mais de 26 tipos de gráficos para visualização inteligente de dados. `Chart Visualization` seleciona inteligentemente o tipo de gráfico mais apropriado entre mais de 26 opções disponíveis, extrai parâmetros com base em especificações detalhadas e gera imagens de gráficos de alta qualidade. Abrange séries temporais, comparações, partes de um todo, relacionamentos, geográficos, hierárquicos, estatísticos e visualizações especializadas. - 🎨 **infographic-creator**: Cria infográficos bonitos com base no conteúdo de texto fornecido. Use quando os usuários solicitarem a criação de infográficos. `Infographic Creator` usa o AntV Infographic para transformar dados, informações e conhecimento em uma linguagem visual perceptível. Combina design visual com visualização de dados, fornecendo mais de 50 modelos, incluindo listas, sequências, hierarquias, comparações, relações e gráficos. Comprime informações complexas com símbolos intuitivos para ajudar o público a entender e lembrar rapidamente os pontos-chave. - 🖼️ **icon-retrieval**: Pesquisa e recupera strings SVG de ícones da biblioteca de ícones. Retorna até 5 ícones correspondentes por padrão (personalizável). `Icon Search` ajuda os usuários a encontrar ícones apropriados para vários casos de uso, incluindo infográficos, desenvolvimento web, design e muito mais. Pesquise por palavras-chave para descobrir ícones disponíveis e recuperar suas strings SVG diretamente. Cada pesquisa retorna até 5 ícones correspondentes por padrão (personalizável via parâmetro topK) com suas URLs e conteúdo SVG completo. - 📝 **narrative-text-visualization**: Gera visualizações de texto narrativo estruturadas a partir de dados usando a Sintaxe T8. `Narrative Text Visualization` (T8) transforma dados não estruturados em relatórios narrativos semanticamente ricos usando a Sintaxe T8 - uma linguagem declarativa semelhante a Markdown para criar narrativas de dados com anotações de entidades. É amigável a LLMs e agnóstico a framework, funcionando perfeitamente com HTML, React e Vue. Perfeito para criar relatórios de análise de dados, resumos e documentos de insights com entidades como métricas, valores, tendências e dimensões devidamente rotuladas. Os recursos incluem mini gráficos integrados, estilização padronizada e formatação profissional. Suporta fontes de dados autênticas e fornece renderização leve e agnóstica a tecnologia. - 📋 **antv-s2-expert**: Assistente de desenvolvimento de tabelas de análise cruzada multidimensional S2. Use quando os usuários precisarem de ajuda com tabelas dinâmicas S2, planilhas de tabela ou qualquer desenvolvimento relacionado ao @antv/s2. `AntV S2 Expert` ajuda os usuários a desenvolver com o mecanismo de tabela de análise cruzada multidimensional S2. Fornece orientação abrangente sobre o mecanismo central `@antv/s2`, as vinculações de framework `@antv/s2-react` e `@antv/s2-vue`, os componentes de análise avançada `@antv/s2-react-components` e a renderização do lado do servidor `@antv/s2-ssr`. Abrange tabelas dinâmicas, planilhas de tabela, células personalizadas, temas, eventos, interações, ordenação, totais, dicas de ferramentas, linhas/colunas congeladas, ícones, paginação e muito mais. - 🕸️ **antv-g6-graph**: Gerador de código de visualização de grafos G6 v5. Use quando os usuários precisarem gerar grafos G6 — grafos de rede, grafos de árvore, fluxogramas, mapas mentais e qualquer visualização de dados relacional ou estruturada em grafos com a biblioteca G6. `AntV G6 Graph` gera código G6 v5 preciso e executável seguindo as melhores práticas. Abrange a inicialização central do grafo, estruturas de dados (nós, arestas, combos), mais de 10 algoritmos de layout (force, dagre, circular, grid, mindmap, fishbone, etc.), todos os tipos integrados de nó/aresta/combo, gerenciamento de estado, mais de 15 comportamentos (drag-canvas, zoom-canvas, click-select, lasso, etc.), mais de 10 plugins (minimapa, dica de ferramenta, barra de ferramentas, legenda, barra de tempo, etc.), desenvolvimento de elementos personalizados, transformações e animação. Barreiras de proteção integradas evitam armadilhas comuns de migração v4→v5, como usar construtores `G6.Graph()` depreciados, APIs `graph.data()` ou configuração de comportamento baseada em Modo. - 📈 **antv-g2-chart**: Gerador de código de gráficos G2 v5. Use quando os usuários precisarem gerar gráficos G2 — gráficos de barras, gráficos de linhas, gráficos de pizza, gráficos de dispersão, gráficos de área, mapas de calor e qualquer visualização de dados estatísticos com a biblioteca G2. `AntV G2 Chart` gera código G2 v5 preciso e executável seguindo as melhores práticas do Modo de Especificação. Abrange mais de 30 tipos de gráficos (intervalo, linha, área, ponto, retângulo, célula, treemap, sankey, chord, wordCloud, gauge e muito mais), transformações de dados (stackY, dodgeX, binX, fold, etc.), sistemas de coordenadas (cartesiano, polar, theta, radial), escalas, interações (brush, slider, filtro de legenda), componentes (eixo, legenda, dica de ferramenta, anotação) e composições de múltiplas visões. Barreiras de proteção integradas evitam armadilhas comuns de migração v4→v5, como usar APIs encadeadas depreciadas, nomes de paleta inválidos ou referenciar `d3` no código do usuário. **Resultados da Avaliação** A abordagem de Harness Engineering foi rigorosamente testada em 174 casos de teste de geração de gráficos, demonstrando melhorias significativas em relação aos métodos de linha de base: | **Modelo** | **G2** | **G6** | | :---: | :---: | :---: | | qwen3-coder-480b-a35b-instruct | ✨ 98.2% +17.7% | 94.8% +15.6% | | Kimi-K2.5 | 97.7% +17.2% | 96.9% +17.7% | | GLM-5.1 | 93.6% +13.1% | 92.8% +13.6% | | DeepSeek-V3.2 | 90.8% +10.3% | ✨ 97.9% +18.7% | | Context7 Linha de Base | 80.5% | 79.2% | Os resultados mostram que a Harness Engineering permite que LLMs atinjam uma precisão quase pronta para produção (até 98,2%), superando significativamente a abordagem de linha de base Context7. > [!TIP] > Mais habilidades em breve. ## Uso como Biblioteca Pode ser usado como uma biblioteca em seus projetos Node.js com `CLI` e `API`. ### Uso via CLI Também fornecemos uma ferramenta CLI chamada `antv` para uso fácil no seu terminal, instale globalmente: ```bash npm install -g @antv/chart-visualization-skills ``` **Recuperar ou listar habilidades por consulta**: ```bash # Recuperar habilidades por consulta (apenas metadados) antv retrieve \"bar chart\" --library g2 --topk 10 # Recuperar habilidades com conteúdo markdown completo (restrições principais automaticamente anexadas) antv retrieve \"bar chart\" --library g2 --content # Recuperar habilidades e saída como JSON antv retrieve \"bar chart\" --library g2 --output json # Obter uma habilidade pelo seu ID exato antv get g2-mark-interval-basic --library g2 # Listar todas as habilidades disponíveis antv list --library g2 --category core # Listar habilidades e saída como JSON antv list --output json # Mostrar informações da habilidade (restrições principais do SKILL.md) antv info --library g2 # Mostrar informações da habilidade como JSON antv info --library g2 --output json ``` **Uso do comando**: ``` Usage: antv [options] [command] Ferramenta CLI para recuperação de habilidades de visualização de gráficos AntV Opções: -V, --version exibe o número da versão -h, --help exibe ajuda para o comando Comandos: retrieve [options] Pesquisa habilidades que correspondem a uma consulta get [options] Obtém uma habilidade pelo seu ID exato list [options] Lista todas as habilidades disponíveis info [options] Mostra informações da habilidade do SKILL.md help [command] exibe ajuda para o comando Opções para retrieve: --library Filtrar por biblioteca (ex: g2, g6) --topk Número de resultados a retornar (padrão: 7) --content Incluir corpo do conteúdo markdown nos resultados; as restrições principais (Seção 1-2 do SKILL.md) são sempre anexadas como o primeiro resultado --output Formato de saída: json | text (padrão: \"text\") ``` > Nota: `--content` sempre anexa as restrições principais da biblioteca (Seção 1 e 2 do SKILL.md, até o marcador ``) como o primeiro resultado, garantindo que o modelo receba as regras essenciais juntamente com os documentos de referência. ### Uso da API ```typescript import { retrieve } from '@antv/chart-visualization-skills'; // Apenas metadados (sem conteúdo) const skills = retrieve('bar chart', { library: 'g2', topK: 5 }); // Com conteúdo markdown completo (restrições principais automaticamente anexadas como primeiro resultado) const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true }); // Com conteúdo, mas sem restrições principais const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false }); ``` ```typescript retrieve(query: string, options?: RetrieveOptions): Skill[] interface RetrieveOptions { library?: string; // Filtro de biblioteca, ex: 'g2' ou 'g6' topK?: number; // Número de resultados (padrão: 7) content?: boolean; // Incluir corpo do conteúdo markdown (padrão: false) includeInfo?: boolean; // Anexar restrições principais do SKILL.md (padrão: igual a content) } ``` | Opção | Tipo | Padrão | Descrição | | :--- | :--- | :--- | :--- | | `library` | `string` | all | Filtro de biblioteca (`g2` ou `g6`) | | `topK` | `number` | `7` | Número de resultados | | `content` | `boolean` | `false` | Incluir corpo do conteúdo markdown | | `includeInfo` | `boolean` | same as `content` | Anexar restrições principais do SKILL.md (Seção 1-2) como primeiro resultado | > Notas: > - A recuperação padrão retorna objetos de resultado leves sem o campo `content`. > - `content: true` retorna o corpo do conteúdo markdown (metadados do frontmatter são excluídos). > - Quando `includeInfo` é true (o padrão quando `content: true`), o bloco de restrições principais — SKILL.md até `` — é injetado como o primeiro elemento (id prefixado com `__info__`), garantindo que o modelo sempre veja as regras essenciais. ```typescript import { info } from '@antv/chart-visualization-skills'; const skillInfo = info('g2'); // => { name: 'antv-g2-chart', description: '...', content: '...', constraintsContent: '...' } ``` ```typescript info(library?: string): SkillInfo | undefined interface SkillInfo { name: string; description: string; content: string; // Corpo completo do SKILL.md (após o frontmatter) constraintsContent: string; // Corpo do SKILL.md até o marcador ; injetado por retrieve quando includeInfo: true } ``` | Parâmetro | Tipo | Padrão | Descrição | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Biblioteca para obter informações (`g2` ou `g6`) | ## Licença Licença MIT - veja o arquivo [LICENSE](LICENSE) para mais detalhes. ## FAQ ### O que são as Habilidades de Visualização de Gráficos AntV? As Habilidades de Visualização de Gráficos AntV são um conjunto de ferramentas e capacidades alimentadas pelo AntV, projetadas para ajudar os usuários a visualizar e analisar dados de forma eficiente e precisa. Elas incluem recursos para geração de gráficos, criação de infográficos, visualização de texto narrativo e desenvolvimento especializado de gráficos e gráficos estatísticos. ### Quantos tipos de gráficos a habilidade de visualização de gráficos suporta? A habilidade de visualização de gráficos oferece mais de 26 tipos de gráficos para visualização inteligente de dados, cobrindo uma ampla gama de representações de dados, incluindo séries temporais, comparações, relacionamentos e dados geográficos. ### Posso criar infográficos com essas habilidades? Sim, a habilidade de criador de infográficos permite criar infográficos bonitos com base em conteúdo de texto fornecido. Ela usa o AntV Infographic e oferece mais de 50 modelos para transformar dados em uma linguagem visual perceptível. ### O que é Visualização de Texto Narrativo (Sintaxe T8)? A Visualização de Texto Narrativo (T8) transforma dados não estruturados em relatórios narrativos semanticamente ricos usando a Sintaxe T8, uma linguagem declarativa semelhante ao Markdown. Ela foi projetada para criar narrativas de dados com anotações de entidades, mini gráficos e formatação profissional, adequada para relatórios de análise e documentos de insights. ### Como as Habilidades de Visualização de Gráficos AntV ajudam na análise multidimensional? A habilidade antv-s2-expert atua como um assistente de desenvolvimento para o mecanismo de tabela de análise cruzada multidimensional S2. Ela fornece orientação abrangente para trabalhar com tabelas dinâmicas, folhas de tabela, células personalizadas e vários outros recursos do @antv/s2. ### Existem ferramentas para gerar gráficos e gráficos estatísticos específicos? Sim, a habilidade antv-g6-graph gera código G6 v5 para visualizações de grafos, como grafos de rede, grafos de árvore e fluxogramas. A habilidade antv-g2-chart gera código G2 v5 para gráficos estatísticos, como gráficos de barras, gráficos de linhas, gráficos de pizza e gráficos de dispersão, seguindo as melhores práticas.