AntV G2 Chartpar antvis

AntV G2 Chart Skill.

Utilisez la grammaire G2 v5 de façon délibérée, sans mélanger la syntaxe d'autres bibliothèques de graphiques.

Data Visualization
Graphiques
JavaScript

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · AntV G2 ChartSKILL.md

Tâche Data Visualization Produit • Une spécification de graphique G2 v5 complète, avec conteneur et configuration du rendu. • Des choix corrigés de marks, d'encodages, de transformations et de composition. • Une revue propre au graphique des étiquettes, de la sémantique des couleurs, des infobulles et du sens des données. Avant de commencer Nécessite @antv/g2 v5 ou le bundle navigateur documenté. La récupération facultative de références utilise le service de contexte externe AntV.

Résumé éditorial · source examinée 2026-10-07 · exemple non généré

01 Fonctionnement

Écrire des graphiques en mode spec G2 v5

Un guide d'implémentation G2 v5 qui combine règles de spécification déclarative, récupération ciblée de références, prévention des erreurs courantes et choix visuels adaptés aux données.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

L'approche de travail

AntV G2 Chart se concentre sur l'implémentation de graphiques avec @antv/g2 v5. Il part, pour les exemples générés, d'une spécification déclarative complète et couvre les points d'échec courants : conteneurs manquants, noms de marks incorrects, propriétés d'étiquette au singulier et transformations mal placées. Il fournit aussi un point d'accès de récupération de documentation pour des concepts et exemples G2 ciblés.

La source est particulièrement claire sur la composition multi-marks : une ligne et des points se placent dans les children d'une view, plutôt que de répéter des changements de type à la racine. Ses conseils visuels distinguent les valeurs par défaut du moteur des surcharges choisies par le Skill, et demandent de n'ajouter unités, libellés de source et titres que si leur sens est connu. Ce n'est pas un outil AntV généraliste pour les graphes, les éditeurs de diagrammes ou les tableaux croisés dynamiques.

Livrables attendus

Une spécification de graphique G2 v5 complète, avec conteneur et configuration du rendu.
Des choix corrigés de marks, d'encodages, de transformations et de composition.
Une revue propre au graphique des étiquettes, de la sémantique des couleurs, des infobulles et du sens des données.

Voir l'exemple de brief

Du brief à la revue

01
Lire les données et l'intention
Identifier les champs, les unités, les besoins de comparaison et la question du graphique, sans inventer de sémantique manquante.
02
Récupérer la référence pertinente
Utiliser le service de récupération G2 documenté lorsque l'API ou les détails d'un type de graphique doivent être confirmés.
03
Construire une spécification complète
Choisir des marks et des canaux valides, utiliser des tableaux de transformations et composer les superpositions dans une view.
04
Rendre et vérifier
Vérifier dans le conteneur cible les marks réels, les étiquettes, les légendes, les thèmes et le comportement avec des données denses.

02 Cas d’usage

Quand l'utiliser

Nécessite @antv/g2 v5 ou le bundle navigateur documenté. La récupération facultative de références utilise le service de contexte externe AntV.

Bon choix

Implémentation G2 v5Utile pour créer des graphiques dans le style de spécification déclarative de la bibliothèque.
Migration et débogageAide à repérer une syntaxe copiée d'anciens usages de G2 ou d'autres grammaires de visualisation.
Graphiques multi-marksClarifie la manière de composer des superpositions indépendantes.

Limites à vérifier

Pas toutes les bibliothèques AntVLes réseaux G6, les diagrammes X6 et les tableaux croisés dynamiques S2 sont hors du périmètre indiqué.
Un rendu n'est pas une validation des donnéesUn rendu correct n'établit pas que les données, l'agrégation ou l'interprétation sont valides.
Les références nécessitent un accès réseauLe point d'accès de récupération documenté est un service externe dont la disponibilité doit être vérifiée à l'usage.

Apportez ces éléments

Jeu de données et sens des champsFournissez les valeurs réelles, les types, les unités et toute agrégation autorisée.
Question de visualisationExpliquez ce que le graphique doit comparer ou révéler.
Contexte d'exécutionIndiquez la version de G2, le conteneur, le thème et les besoins d'interaction.

03 Décisions importantes

Les décisions qui comptent

Spécifications initiales complètes
Une spécification complète rend un graphique généré plus facile à comprendre qu'une suite de changements partiels à la racine.
Couleur sémantique
La couleur doit encoder un groupe ou un statut significatif, et non ajouter un arc-en-ciel à une comparaison à série unique.
Valeurs par défaut et surcharges sont distinctes
La source distingue les valeurs choisies de rayon, de largeur et d'opacité du comportement du moteur qu'elles remplacent.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Installez le Skill par la voie prise en charge du dépôt et ajoutez @antv/g2 à l'application cible selon les besoins. Le paquet de graphiques et le Skill d'agent sont des dépendances distinctes.

Fichier source amont

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

Nécessite @antv/g2 v5 ou le bundle navigateur documenté. La récupération facultative de références utilise le service de contexte externe AntV.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief

Utilise antv-g2-chart pour construire un graphique G2 v5 à partir des données de revenus mensuels fournies. Superpose une ligne et des points avec view et children, conserve les unités monétaires fournies et utilise une spécification initiale complète avec un conteneur explicite et un appel de rendu. Évite les légendes de couleur redondantes et vérifie les étiquettes denses avant d'en ajouter.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Le graphique a un conteneur explicite et un appel de rendu.
Les marks superposées sont composées comme des children indépendants d'une view.
Les étiquettes, les unités et les encodages de couleur correspondent au sens des données fournies.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus ni que ses outils externes, ses identifiants et ses dépendances logicielles sont fournis.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source épinglée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: antvis
Dépôt: antvis/chart-visualization-skills
Fichier du skill: skills/antv-g2-chart/SKILL.md
Licence: MIT
Version examinée: 2026-10-07 · a105fa12a9fa

Résumé éditorial de la source

Un guide d'implémentation G2 v5 qui combine règles de spécification déclarative, récupération ciblée de références, prévention des erreurs courantes et choix visuels adaptés aux données.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un signal de popularité daté, pas une mesure d'usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Puis-je superposer des marks en changeant deux fois le type racine ?

La source dit que non : cela met à jour la mark racine au lieu de créer des superpositions indépendantes. Utilisez une view avec children.

Couvre-t-il les diagrammes de réseau G6 ?

Non. La source exclut explicitement les tâches G6, X6 et S2 de ce Skill de graphiques G2.

Les valeurs de style suggérées sont-elles les valeurs par défaut du moteur G2 ?

Pas toutes. La source distingue les surcharges explicites qu'elle recommande des valeurs par défaut propres au moteur.

OpenDesign

Préparez la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesign Parcourir les skills de design