AntV G2 Chartpor antvis

AntV G2 Chart Skill.

Usa la gramática de G2 v5 de forma deliberada, en lugar de mezclar sintaxis de otras bibliotecas de gráficos.

Data Visualization
Gráficos
JavaScript

Revisión de la fuente · AntV G2 ChartSKILL.md

Tarea Data Visualization Produce • Una especificación completa de gráfico G2 v5 con configuración del contenedor y del renderizado. • Elecciones corregidas de marcas, codificaciones, transformaciones y composición. • Una revisión específica del gráfico sobre etiquetas, semántica del color, tooltips y significado de los datos. Antes de empezar Requiere @antv/g2 v5 o el bundle de navegador documentado. La consulta opcional de referencias usa el servicio de contexto externo AntV.

Resumen editorial · fuente revisada 2026-10-07 · no es un ejemplo generado

01 Qué hace

Escribe gráficos en el modo de especificación de G2 v5

Una guía de implementación de G2 v5 que combina reglas de especificación declarativa, consulta de referencias específicas, prevención de errores comunes y decisiones visuales basadas en los datos.

Flujo de trabajo basado en la fuenteNo es un benchmark de ejecución

Cómo se trabaja

AntV G2 Chart se centra en la implementación de gráficos con @antv/g2 v5. Parte de una especificación declarativa completa para los ejemplos generados y cubre fallos habituales como contenedores ausentes, nombres de marca incorrectos, propiedades de etiqueta en singular y transformaciones mal ubicadas. También ofrece un endpoint de consulta de documentación para conceptos y ejemplos concretos de G2.

La fuente es especialmente clara sobre la composición de varias marcas: una línea y puntos van dentro de los children de una vista, en lugar de repetir cambios de tipo en la raíz. Su guía visual separa los valores predeterminados del motor de las sustituciones elegidas por el Skill, y pide añadir unidades, etiquetas de origen y títulos solo cuando se conozca su significado. No es una herramienta AntV general para grafos, editores de diagramas ni tablas dinámicas.

Entregables esperados

Una especificación completa de gráfico G2 v5 con configuración del contenedor y del renderizado.
Elecciones corregidas de marcas, codificaciones, transformaciones y composición.
Una revisión específica del gráfico sobre etiquetas, semántica del color, tooltips y significado de los datos.

Ver el brief de ejemplo

Del brief a la revisión

01
Lee los datos y la intención
Identifica campos, unidades, necesidades de comparación y la pregunta del gráfico sin inventar semántica que falte.
02
Consulta la referencia relevante
Usa el servicio de consulta de G2 documentado cuando haya que confirmar detalles de API o del tipo de gráfico.
03
Construye una especificación completa
Elige marcas y canales válidos, usa arrays de transformaciones y compón las superposiciones dentro de una vista.
04
Renderiza y revisa
Comprueba las marcas reales, etiquetas, leyendas, temas y el comportamiento con datos densos en el contenedor de destino.

02 Cuándo usarlo

Cuándo usarlo

Requiere @antv/g2 v5 o el bundle de navegador documentado. La consulta opcional de referencias usa el servicio de contexto externo AntV.

Buen encaje

Implementación de G2 v5Útil para crear gráficos con el estilo de especificación declarativa de la biblioteca.
Migración y depuraciónAyuda a identificar sintaxis copiada de usos antiguos de G2 o de otras gramáticas de visualización.
Gráficos con varias marcasAclara cómo deben componerse las superposiciones independientes.

Límites que conviene revisar

No es para cualquier biblioteca AntVLas redes de G6, los diagramas de X6 y las tablas dinámicas de S2 quedan fuera del alcance indicado.
Renderizar no es validar los datosQue el gráfico se renderice correctamente no demuestra que los datos, la agregación o la interpretación sean válidos.
Las referencias necesitan acceso a la redEl endpoint de consulta documentado es un servicio externo cuya disponibilidad debe comprobarse al usarlo.

Aporta estos datos de entrada

Conjunto de datos y significado de los camposProporciona valores reales, tipos, unidades y cualquier agregación permitida.
Pregunta de visualizaciónExplica qué debe comparar o mostrar el gráfico.
Contexto de ejecuciónIndica la versión de G2, el contenedor, el tema y los requisitos de interacción.

03 Decisiones importantes

Decisiones importantes

Especificaciones iniciales completas
Una especificación completa hace que un gráfico generado sea más fácil de razonar que una serie de cambios parciales en la raíz.
Color semántico
El color debe codificar un grupo o estado con significado, no añadir un arcoíris a una comparación de una sola serie.
Valores predeterminados y sustituciones son cosas distintas
La fuente distingue los valores elegidos de radio, ancho y opacidad del comportamiento del motor que sustituyen.

04 Ejemplo de brief

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración del skill antes de usarlo.

Revisa la configuración

Instala el Skill desde la vía compatible del repositorio y añade @antv/g2 a la aplicación de destino según corresponda. El paquete de gráficos y el Skill del agente son dependencias distintas.

Archivo de la fuente original

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

Requiere @antv/g2 v5 o el bundle de navegador documentado. La consulta opcional de referencias usa el servicio de contexto externo AntV.

Empieza con un solo entregable

Adapta el alcance, el material de origen y las restricciones de este brief antes de ejecutar el skill.

Brief de ejemplo

Usa antv-g2-chart para crear un gráfico G2 v5 a partir de los datos de ingresos mensuales proporcionados. Superpón una línea y puntos con view y children, conserva las unidades de moneda proporcionadas y usa una especificación inicial completa con un contenedor explícito y una llamada de renderizado. Evita leyendas de color redundantes y revisa las etiquetas en datos densos antes de añadirlas.

Inspecciona el resultado

Comprueba el resultado real con estos criterios observables.

El gráfico tiene un contenedor explícito y una llamada de renderizado.
Las marcas superpuestas se componen como children independientes de una vista.
Las etiquetas, unidades y codificaciones de color coinciden con el significado de los datos proporcionados.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que el skill esté incluido ni que lo estén sus herramientas externas, credenciales y dependencias de software.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fijada de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: antvis
Repositorio: antvis/chart-visualization-skills
Archivo del skill: skills/antv-g2-chart/SKILL.md
Licencia: MIT
Versión revisada: 2026-10-07 · a105fa12a9fa

Resumen editorial de la fuente

Una guía de implementación de G2 v5 que combina reglas de especificación declarativa, consulta de referencias específicas, prevención de errores comunes y decisiones visuales basadas en los datos.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no un uso del skill ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Puedo superponer marcas cambiando dos veces el tipo de la raíz?

La fuente dice que no: eso actualiza la marca raíz en lugar de crear superposiciones independientes. Usa una vista con children.

¿Cubre los diagramas de red de G6?

No. La fuente excluye explícitamente las tareas de G6, X6 y S2 de este Skill de gráficos G2.

¿Los valores de estilo sugeridos son valores predeterminados del motor de G2?

No todos. La fuente distingue las sustituciones explícitas que recomienda de los valores predeterminados propios del motor.

OpenDesign

Deja espacio para la siguiente iteración de diseño.

Mantén juntos tu brief, el material de origen y el trabajo de diseño en un espacio de trabajo local. Revisa la configuración propia del skill antes de añadirlo a tu flujo de trabajo.

Descargar OpenDesign Explorar skills de diseño