# Compétences de l'agent de visualisation de graphiques > Transformez des ensembles de données complexes en graphiques visuels intuitifs avec les compétences de visualisation de graphiques AntV, offrant plus de 26 types de graphiques et une génération alimentée par l'IA. Commencez à créer des histoires de données percutantes sans effort. - Canonical: https://nanoskill.ai/fr/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/fr/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: fr - 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 Les compétences de visualisation de graphiques AntV offrent une suite professionnelle de solutions de visualisation conçues pour transformer des ensembles de données complexes en graphiques visuels intuitifs de manière efficace et précise. Initiée par Ant Group, cette collection de compétences permet aux utilisateurs de naviguer dans l'ensemble du flux de travail, de la conception de graphiques et de l'exploration interactive à l'analyse approfondie des données, réduisant considérablement la barrière à la création grâce à des spécifications de conception intelligentes et une riche bibliothèque de composants. Elle fournit un support robuste pour les rapports quotidiens, les tableaux de bord dynamiques et l'analyse interactive sophistiquée, rendant les données visibles et compréhensibles. La suite comprend des compétences spécialisées telles que « visualisation-de-graphiques » pour générer plus de 26 types de graphiques, « créateur-d'infographies » pour transformer du texte en infographies visuelles attrayantes avec plus de 50 modèles, et « visualisation-de-texte-narratif » pour convertir des données non structurées en rapports sémantiquement riches à l'aide de la syntaxe T8. Ces capacités sont encore améliorées par l'intégration de l'IA, rationalisant et automatisant la génération et l'optimisation des visualisations, permettant aux analystes de se concentrer davantage sur la découverte d'aperçus et la prise de décisions commerciales. Les développeurs peuvent également tirer parti de compétences dédiées telles que « expert-antv-s2 » pour les tableaux d'analyse croisée multidimensionnels, « antv-g6-graphe » pour générer des visualisations de graphes G6 v5, et « antv-g2-graphique » pour créer des graphiques statistiques G2 v5. Ces outils fournissent un code précis et exécutable suivant les meilleures pratiques, couvrant les fonctionnalités de base, divers algorithmes de mise en page, types de composants et interactions. Les compétences peuvent être intégrées dans des projets Node.js via CLI ou API, offrant une flexibilité pour différents besoins de développement. ## Key features - **Génération complète de graphiques**: Accédez à plus de 26 types de graphiques intelligents pour divers besoins de visualisation de données, notamment les séries chronologiques, les comparaisons, les relations et les données géographiques. - **Création d'infographies alimentée par l'IA**: Générez de belles infographies à partir de contenu textuel à l'aide de plus de 50 modèles, transformant l'information en un langage visuel perceptible avec des symboles intuitifs. - **Visualisations structurées de textes narratifs**: Convertissez des données non structurées en rapports narratifs sémantiquement riches à l'aide de la syntaxe T8, un langage similaire au Markdown pour les récits de données avec des annotations d'entités et des mini-graphiques. - **Tableaux d'analyse croisée multidimensionnelle**: Utilisez l'expert AntV S2 pour développer des tableaux croisés dynamiques, des feuilles de table et des cellules personnalisées, offrant des conseils complets pour l'analyse de données multidimensionnelle. - **Génération avancée de graphiques et diagrammes statistiques**: Générez un code G6 précis pour les graphiques de réseau, les arborescences et les diagrammes de flux, et un code G2 pour les visualisations statistiques telles que les diagrammes à barres, les graphiques linéaires et les diagrammes circulaires, en suivant les meilleures pratiques. ## Use cases - **Créer des rapports quotidiens et des tableaux de bord dynamiques**: Transformez rapidement des ensembles de données complexes en graphiques visuels intuitifs pour les rapports quotidiens et les tableaux de bord dynamiques, permettant une prise de décision efficace basée sur les données. - **Développer des outils d'analyse interactive sophistiqués**: Tirez parti de la boîte à outils robuste d'AntV pour créer des applications d'analyse interactive avancées, offrant des capacités d'exploration et de visualisation approfondies des données. - **Générer des visualisations optimisées par l'IA**: Simplifiez et automatisez la génération et l'optimisation des visualisations de données grâce aux capacités d'IA intégrées, permettant aux analystes de se concentrer sur les informations. - **Transformer les données en infographies attrayantes**: Convertissez les données, informations et connaissances en infographies visuellement attrayantes à l'aide d'une variété de modèles pour communiquer des idées complexes de manière claire et mémorable. ## Result preview Explorez un rapport de visualisation de données professionnel alimenté par l'IA et propulsé par cette compétence. ![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 ### Installer Ajoutez la compétence de visualisation de graphiques AntV à votre agent 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) ### Décrire Décrivez le domaine que vous souhaitez visualiser, y compris les objectifs, le public cible et les types ou styles de graphiques préférés. ![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) ### Optimiser les visualisations La compétence génère des graphiques et des tableaux de bord optimisés pour la clarté, la mise en page et les informations. ![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 # Compétences de visualisation graphique Transformer les données en un langage visuel pour une meilleure réflexion. ## Aperçu À l'ère de la prise de décision basée sur les données, une visualisation et une analyse des données efficaces et précises sont primordiales. AntV propose une suite professionnelle de solutions de visualisation, offrant une boîte à outils robuste et un ensemble complet de compétences pour l'ensemble du flux de travail, de la conception de graphiques et de l'exploration interactive à l'analyse approfondie des données. Il permet aux utilisateurs de transformer rapidement des ensembles de données complexes en graphiques visuels intuitifs, réduisant considérablement la barrière à la création grâce à des spécifications de conception intelligentes et une riche bibliothèque de composants. Que ce soit pour les rapports quotidiens, les tableaux de bord dynamiques ou les analyses interactives sophistiquées, AntV offre un support fiable. En intégrant des capacités d'IA, ces outils simplifient et automatisent davantage la génération et l'optimisation des visualisations. Cela permet aux analystes de se concentrer davantage sur la découverte d'informations et la prise de décisions commerciales, rendant véritablement les données visibles et compréhensibles. > [!WARNING] > Ce projet fusionne uniquement du code généré par l'IA. > > **Comment contribuer :** > 1. Soumettez un ticket décrivant clairement le problème > 2. Assignez-le à @copilot avec vos exigences ## Utilisation Ajoutez ce marketplace à Claude Code : ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Ou vous pouvez installer directement les compétences pour vos multiples agents : ```bash npx skills add antvis/chart-visualization-skills ``` ## Compétences disponibles - 📊 **chart-visualization** : Une compétence complète de génération de graphiques propulsée par AntV, offrant plus de 26 types de graphiques pour une visualisation intelligente des données. `Chart Visualization` sélectionne intelligemment le type de graphique le plus approprié parmi plus de 26 options disponibles, extrait les paramètres en fonction de spécifications détaillées et génère des images de graphiques de haute qualité. Il couvre les séries temporelles, les comparaisons, les parties d'un tout, les relations, les visualisations géographiques, hiérarchiques, statistiques et spécialisées. - 🎨 **infographic-creator** : Créez de magnifiques infographies à partir d'un contenu textuel donné. À utiliser lorsque les utilisateurs demandent de créer des infographies. `Infographic Creator` utilise AntV Infographic pour transformer les données, les informations et les connaissances en un langage visuel perceptible. Il combine le design visuel et la visualisation de données, offrant plus de 50 modèles, y compris des listes, des séquences, des hiérarchies, des comparaisons, des relations et des graphiques. Il compresse des informations complexes à l'aide de symboles intuitifs pour aider le public à comprendre et à mémoriser rapidement les points clés. - 🖼️ **icon-retrieval** : Recherchez et récupérez des chaînes SVG d'icônes à partir de la bibliothèque d'icônes. Renvoie jusqu'à 5 icônes correspondantes par défaut (personnalisable). `Icon Search` aide les utilisateurs à trouver des icônes appropriées pour divers cas d'utilisation, notamment les infographies, le développement web, le design, etc. Recherchez par mots-clés pour découvrir les icônes disponibles et récupérer directement leurs chaînes SVG. Chaque recherche renvoie jusqu'à 5 icônes correspondantes par défaut (personnalisable via le paramètre topK) avec leurs URL et le contenu SVG complet. - 📝 **narrative-text-visualization** : Générez des visualisations de texte narratif structuré à partir de données en utilisant la syntaxe T8. `Narrative Text Visualization` (T8) transforme les données non structurées en rapports narratifs riches sémantiquement en utilisant la syntaxe T8 - un langage déclaratif de type Markdown pour créer des récits de données avec des annotations d'entités. Il est compatible avec les LLM et indépendant du framework, fonctionnant parfaitement avec HTML, React et Vue. Idéal pour créer des rapports d'analyse de données, des résumés et des documents d'informations avec des entités telles que les métriques, les valeurs, les tendances et les dimensions correctement étiquetées. Les fonctionnalités incluent des mini-graphiques intégrés, un style standardisé et un formatage professionnel. Prend en charge des sources de données authentiques et fournit un rendu léger et indépendant de la technologie. - 📋 **antv-s2-expert** : Assistant de développement de tableaux d'analyse croisée multidimensionnelle S2. À utiliser lorsque les utilisateurs ont besoin d'aide avec les tableaux croisés dynamiques S2, les feuilles de tableau, ou tout développement lié à @antv/s2. `AntV S2 Expert` aide les utilisateurs à développer avec le moteur de table d'analyse croisée multidimensionnelle S2. Il fournit des conseils complets sur le moteur principal `@antv/s2`, les liaisons de framework `@antv/s2-react` et `@antv/s2-vue`, les composants d'analyse avancés `@antv/s2-react-components` et le rendu côté serveur `@antv/s2-ssr`. Couvre les tableaux croisés dynamiques, les feuilles de tableau, les cellules personnalisées, la thématisation, les événements, les interactions, le tri, les totaux, les infobulles, les lignes/colonnes figées, les icônes, la pagination, et plus encore. - 🕸️ **antv-g6-graph** : Générateur de code de visualisation de graphes G6 v5. À utiliser lorsque les utilisateurs ont besoin de générer des graphes G6 — graphes de réseau, arborescences, organigrammes, cartes mentales, et toute visualisation de données relationnelles ou structurées en graphe avec la bibliothèque G6. `AntV G6 Graph` génère du code G6 v5 précis et exécutable en suivant les meilleures pratiques. Il couvre l'initialisation du graphe de base, les structures de données (nœuds, arêtes, combos), plus de 10 algorithmes de disposition (force, dagre, circulaire, grille, carte mentale, arête de poisson, etc.), tous les types intégrés de nœuds/arêtes/combos, la gestion d'état, plus de 15 comportements (drag-canvas, zoom-canvas, click-select, lasso, etc.), plus de 10 plugins (minimap, tooltip, toolbar, legend, timebar, etc.), le développement d'éléments personnalisés, les transformations et les animations. Des garde-fous intégrés empêchent les pièges courants de migration de v4 à v5, comme l'utilisation de constructeurs `G6.Graph()` obsolètes, d'API `graph.data()`, ou de configuration de comportement basée sur le mode. - 📈 **antv-g2-chart** : Générateur de code de graphiques G2 v5. À utiliser lorsque les utilisateurs ont besoin de générer des graphiques G2 — diagrammes à barres, graphiques linéaires, diagrammes circulaires, nuages de points, graphiques en aires, cartes de chaleur, et toute visualisation de données statistiques avec la bibliothèque G2. `AntV G2 Chart` génère du code G2 v5 précis et exécutable en suivant les meilleures pratiques du mode Spec. Il couvre plus de 30 types de graphiques (intervalle, ligne, aire, point, rect, cellule, treemap, sankey, chord, wordCloud, gauge, etc.), les transformations de données (stackY, dodgeX, binX, fold, etc.), les systèmes de coordonnées (cartésien, polaire, theta, radial), les échelles, les interactions (brush, slider, filtre de légende), les composants (axe, légende, infobulle, annotation) et les compositions multi-vues. Des garde-fous intégrés empêchent les pièges courants de migration de v4 à v5, comme l'utilisation d'API chaînées obsolètes, de noms de palette invalides ou le référencement de `d3` dans le code utilisateur. **Résultats de l'évaluation** L'approche Harness Engineering a été rigoureusement testée sur 174 cas de test de génération de graphiques, démontrant des améliorations significatives par rapport aux méthodes de référence : | **Modèle** | **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 Référence | 80.5% | 79.2% | Les résultats montrent que Harness Engineering permet aux LLM d'atteindre une précision quasi opérationnelle (jusqu'à 98,2 %), surpassant significativement l'approche de référence Context7. > [!TIP] > Plus de compétences arrivent bientôt. ## Utilisation de la bibliothèque Elle peut être utilisée comme une bibliothèque dans vos projets Node.js avec `CLI` et `API`. ### Utilisation en ligne de commande Nous fournissons également un outil CLI nommé `antv` pour une utilisation facile dans votre terminal, installez-le globalement : ```bash npm install -g @antv/chart-visualization-skills ``` **Récupérer ou lister les compétences par requête** : ```bash # Retrieve skills by query (metadata only) antv retrieve "bar chart" --library g2 --topk 10 # Retrieve skills with full markdown content (core constraints auto-prepended) antv retrieve "bar chart" --library g2 --content # Retrieve skills and output as JSON antv retrieve "bar chart" --library g2 --output json # Get a skill by its exact ID antv get g2-mark-interval-basic --library g2 # List all available skills antv list --library g2 --category core # List skills and output as JSON antv list --output json # Show skill info (core constraints from SKILL.md) antv info --library g2 # Show skill info as JSON antv info --library g2 --output json ``` **Usage de la commande** : ``` Usage: antv [options] [command] CLI tool for AntV chart visualization skills retrieval Options: -V, --version output the version number -h, --help display help for command Commands: retrieve [options] Search for skills matching a query get [options] Get a skill by its exact ID list [options] List all available skills info [options] Show skill info from SKILL.md help [command] display help for command Options for retrieve: --library Filter by library (e.g. g2, g6) --topk Number of results to return (default: 7) --content Include markdown content body in results; core constraints (SKILL.md Section 1-2) are always prepended as the first result --output Output format: json | text (default: "text") ``` > Note : `--content` ajoute toujours les contraintes principales de la bibliothèque (Sections 1 et 2 de SKILL.md, jusqu'au marqueur ``) comme premier résultat, garantissant que le modèle reçoive les règles essentielles en même temps que les documents de référence. ### Utilisation de l'API ```typescript import { retrieve } from '@antv/chart-visualization-skills'; // Metadata only (no content) const skills = retrieve('bar chart', { library: 'g2', topK: 5 }); // With full markdown content (core constraints auto-prepended as first result) const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true }); // With content but without core constraints const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false }); ``` ```typescript retrieve(query: string, options?: RetrieveOptions): Skill[] interface RetrieveOptions { library?: string; // Library filter, e.g. 'g2' or 'g6' topK?: number; // Number of results (default: 7) content?: boolean; // Include markdown content body (default: false) includeInfo?: boolean; // Prepend SKILL.md core constraints (default: same as content) } ``` | Option | Type | Par défaut | Description | | :--- | :--- | :--- | :--- | | `library` | `string` | all | Filtre de bibliothèque (`g2` ou `g6`) | | `topK` | `number` | `7` | Nombre de résultats | | `content` | `boolean` | `false` | Inclure le contenu du corps en markdown | | `includeInfo` | `boolean` | identique à `content` | Ajouter les contraintes principales de SKILL.md (Sections 1-2) comme premier résultat | > Notes : > - La récupération par défaut renvoie des objets de résultat légers sans le champ `content`. > - `content: true` renvoie le contenu du corps en markdown (les métadonnées du frontmatter sont exclues). > - Lorsque `includeInfo` est vrai (par défaut lorsque `content: true`), le bloc des contraintes principales — SKILL.md jusqu'à `` — est injecté comme premier élément (id préfixé par `__info__`), garantissant que le modèle voie toujours les règles essentielles. ```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; // Full SKILL.md body (after frontmatter) constraintsContent: string; // SKILL.md body up to marker; injected by retrieve when includeInfo: true } ``` | Paramètre | Type | Par défaut | Description | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Bibliothèque pour laquelle obtenir les informations (`g2` ou `g6`) | ## Licence Licence MIT - voir le fichier [LICENSE](LICENSE) pour plus de détails. ## FAQ ### Que sont les compétences de visualisation de graphiques AntV ? Les compétences de visualisation de graphiques AntV sont une suite d'outils et de capacités alimentés par AntV, conçus pour aider les utilisateurs à visualiser et analyser les données de manière efficace et précise. Elles incluent des fonctionnalités de génération de graphiques, de création d'infographies, de visualisation de textes narratifs et de développement de graphiques et diagrammes statistiques spécialisés. ### Combien de types de graphiques la compétence de visualisation de graphiques prend-elle en charge ? La compétence de visualisation de graphiques fournit plus de 26 types de graphiques pour la visualisation intelligente des données, couvrant un large éventail de représentations de données, notamment les séries chronologiques, les comparaisons, les relations et les données géographiques. ### Puis-je créer des infographies avec ces compétences ? Oui, la compétence de création d'infographies vous permet de créer de belles infographies à partir d'un contenu textuel donné. Elle utilise AntV Infographic et propose plus de 50 modèles pour transformer les données en un langage visuel perceptible. ### Qu'est-ce que la visualisation de textes narratifs (syntaxe T8) ? La visualisation de textes narratifs (T8) transforme les données non structurées en rapports narratifs sémantiquement riches à l'aide de la syntaxe T8, un langage déclaratif similaire au Markdown. Elle est conçue pour créer des récits de données avec des annotations d'entités, des mini-graphiques et une mise en forme professionnelle, adaptée aux rapports d'analyse et aux documents d'informations. ### Comment les compétences de visualisation de graphiques AntV aident-elles à l'analyse multidimensionnelle ? La compétence antv-s2-expert agit comme un assistant de développement pour le moteur de table d'analyse croisée multidimensionnelle S2. Elle fournit des conseils complets pour travailler avec des tableaux croisés dynamiques, des feuilles de table, des cellules personnalisées et diverses autres fonctionnalités de @antv/s2. ### Existe-t-il des outils pour générer des graphiques et diagrammes statistiques spécifiques ? Oui, la compétence antv-g6-graph génère du code G6 v5 pour les visualisations de graphiques telles que les graphiques de réseau, les arborescences et les diagrammes de flux. La compétence antv-g2-chart génère du code G2 v5 pour les graphiques statistiques tels que les diagrammes à barres, les graphiques linéaires, les diagrammes circulaires et les nuages de points, en suivant les meilleures pratiques.