AntV G2 Chartpor antvis

AntV G2 Chart Skill.

Use a gramática do G2 v5 de forma deliberada, em vez de misturar a sintaxe de outras bibliotecas de gráficos.

Data Visualization
Gráficos
JavaScript

Revisão da fonte · AntV G2 ChartSKILL.md

Tarefa Data Visualization Produz • Uma especificação completa de gráfico G2 v5, com configuração de contêiner e renderização. • Escolhas corrigidas de marca, codificação, transformação e composição. • Uma revisão específica do gráfico quanto a rótulos, semântica de cores, tooltips e significado dos dados. Antes de começar Exige @antv/g2 v5 ou o bundle para navegador documentado. A recuperação opcional de referências usa o serviço externo de contexto AntV.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Escreva gráficos no modo de especificação do G2 v5

Um guia de implementação do G2 v5 que combina regras de especificação declarativa, recuperação direcionada de referências, prevenção de erros comuns e escolhas visuais baseadas nos dados.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

AntV G2 Chart foca na implementação de gráficos com @antv/g2 v5. Ela parte de uma especificação declarativa completa nos exemplos gerados e cobre pontos comuns de falha, como contêineres ausentes, nomes de marcas incorretos, propriedades de rótulo no singular e transformações mal posicionadas. Também oferece um endpoint de recuperação de documentação para conceitos e exemplos específicos do G2.

A fonte é especialmente clara sobre composição de várias marcas: uma linha e pontos pertencem aos children de uma view, em vez de repetidas mudanças do tipo na raiz. Sua orientação visual separa os padrões do motor das substituições escolhidas pela Skill e pede que unidades, rótulos de fonte e títulos só sejam adicionados quando seu significado for conhecido. Não é uma ferramenta AntV geral para grafos, editores de diagramas ou tabelas dinâmicas.

Entregas esperadas

Uma especificação completa de gráfico G2 v5, com configuração de contêiner e renderização.
Escolhas corrigidas de marca, codificação, transformação e composição.
Uma revisão específica do gráfico quanto a rótulos, semântica de cores, tooltips e significado dos dados.

Veja o briefing de exemplo

Do briefing à revisão

01
Leia os dados e a intenção
Identifique campos, unidades, necessidades de comparação e a pergunta do gráfico, sem inventar semântica ausente.
02
Recupere a referência relevante
Use o serviço de recuperação documentado do G2 quando for preciso confirmar API ou detalhes de tipos de gráfico.
03
Monte uma especificação completa
Escolha marcas e canais válidos, use arrays de transformação e componha sobreposições dentro de uma view.
04
Renderize e revise
Verifique no contêiner de destino as marcas reais, rótulos, legendas, temas e o comportamento com dados densos.

02 Quando usar

Quando usar

Exige @antv/g2 v5 ou o bundle para navegador documentado. A recuperação opcional de referências usa o serviço externo de contexto AntV.

Boa adequação

Implementação do G2 v5Útil para criar gráficos no estilo de especificação declarativa da biblioteca.
Migração e depuraçãoAjuda a identificar sintaxe copiada de usos antigos do G2 ou de outras gramáticas de visualização.
Gráficos com várias marcasEsclarece como sobreposições independentes devem ser compostas.

Limites a verificar

Nem toda biblioteca AntVRedes G6, diagramas X6 e tabelas dinâmicas S2 estão fora do escopo declarado.
Renderizar não é validar dadosA renderização correta não prova que os dados, a agregação ou a interpretação sejam válidos.
As referências exigem acesso à redeO endpoint de recuperação documentado é um serviço externo, e sua disponibilidade deve ser verificada ao usá-lo.

Traga estes insumos

Conjunto de dados e significado dos camposForneça valores reais, tipos, unidades e qualquer agregação permitida.
Pergunta de visualizaçãoExplique o que o gráfico deve comparar ou revelar.
Contexto de execuçãoInforme a versão do G2, o contêiner, o tema e os requisitos de interação.

03 Decisões importantes

Decisões que importam

Especificações iniciais completas
Uma especificação completa torna um gráfico gerado mais fácil de entender do que uma sequência de alterações parciais na raiz.
Cor semântica
A cor deve codificar um grupo ou status significativo, não acrescentar um arco-íris a uma comparação de série única.
Padrões e substituições são distintos
A fonte distingue os valores escolhidos de raio, largura e opacidade do comportamento do motor que eles substituem.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Instale a Skill pela rota compatível do repositório e adicione @antv/g2 à aplicação de destino, conforme apropriado. O pacote de gráficos e a Skill do agente são dependências separadas.

Arquivo da fonte original

https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-g2-chart/SKILL.md

Exige @antv/g2 v5 ou o bundle para navegador documentado. A recuperação opcional de referências usa o serviço externo de contexto AntV.

Comece com uma única entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use antv-g2-chart para criar um gráfico G2 v5 a partir dos dados de receita mensal fornecidos. Sobreponha uma linha e pontos com view mais children, preserve as unidades monetárias fornecidas e use uma especificação inicial completa, com contêiner explícito e chamada de renderização. Evite legendas de cor redundantes e verifique rótulos em áreas densas antes de adicioná-los.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

O gráfico tem um contêiner explícito e uma chamada de renderização.
As marcas sobrepostas são compostas como children independentes de uma view.
Rótulos, unidades e codificações de cor correspondem ao significado dos dados fornecidos.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Leia o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: antvis
Repositório: antvis/chart-visualization-skills
Arquivo da skill: skills/antv-g2-chart/SKILL.md
Licença: MIT
Versão revisada: 2026-10-07 · a105fa12a9fa

Resumo editorial da fonte

Um guia de implementação do G2 v5 que combina regras de especificação declarativa, recuperação direcionada de referências, prevenção de erros comuns e escolhas visuais baseadas nos dados.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não de uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Posso sobrepor marcas mudando o tipo da raiz duas vezes?

A fonte diz que não: isso atualiza a marca raiz em vez de criar sobreposições independentes. Use uma view com children.

Cobre diagramas de rede do G6?

Não. A fonte exclui explicitamente tarefas de G6, X6 e S2 desta Skill de gráficos G2.

Os valores de estilo sugeridos são padrões do motor G2?

Nem todos. A fonte distingue as substituições explícitas que recomenda dos padrões do próprio motor.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design