# Vaardigheden van de Grafiekvisualisatieagent > Transformeer complexe datasets in intuïtieve visuele grafieken met AntV-grafiekvisualisatievaardigheden, met meer dan 26 grafiektypen en AI-gestuurde generatie. Creëer moeiteloos impactvolle dataverhalen. - Canonical: https://nanoskill.ai/nl/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/nl/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: nl - 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 AntV Grafiekvisualisatievaardigheden bieden een professionele suite van visualisatieoplossingen die ontworpen zijn om complexe datasets efficiënt en nauwkeurig om te zetten in intuïtieve visuele grafieken. Geïnitieerd door Ant Group, stelt deze verzameling vaardigheden gebruikers in staat het volledige workflowtraject te doorlopen, van grafiekontwerp en interactieve verkenning tot diepgaande data-analyse, waardoor de drempel aanzienlijk wordt verlaagd door intelligente ontwerpspecificaties en een rijke bibliotheek aan componenten. Het biedt robuuste ondersteuning voor dagelijkse rapportages, dynamische dashboards en geavanceerde interactieve analyses, waardoor data zichtbaar en begrijpelijk wordt. De suite omvat gespecialiseerde vaardigheden zoals "chart-visualization" voor het genereren van meer dan 26 grafiektypen, "infographic-creator" voor het omzetten van tekst in boeiende visuele infographics met meer dan 50 templates, en "narrative-text-visualization" voor het converteren van ongestructureerde data naar semantisch rijke rapporten met behulp van T8 Syntax. Deze mogelijkheden worden verder verbeterd door AI-integratie, die de generatie en optimalisatie van visualisaties stroomlijnt en automatiseert, waardoor analisten zich meer kunnen richten op het ontdekken van inzichten en het sturen van zakelijke beslissingen. Ontwikkelaars kunnen ook gebruikmaken van toegewijde vaardigheden zoals "antv-s2-expert" voor multidimensionale kruisanalysetabellen, "antv-g6-graph" voor het genereren van G6 v5-grafiekvisualisaties, en "antv-g2-chart" voor het creëren van G2 v5-statistische grafieken. Deze tools bieden nauwkeurige, uitvoerbare code volgens best practices, die kernfunctionaliteiten, verschillende lay-outalgoritmen, componenttypen en interacties omvat. De vaardigheden kunnen worden geïntegreerd in Node.js-projecten via CLI of API, wat flexibiliteit biedt voor verschillende ontwikkelingsbehoeften. ## Key features - **Uitgebreide diagramgeneratie**: Toegang tot 26+ intelligente diagramtypen voor uiteenlopende behoeften op het gebied van gegevensvisualisatie, waaronder tijdreeksen, vergelijkingen, relaties en geografische gegevens. - **AI-aangedreven infographiccreatie**: Genereer prachtige infographics van tekstinhoud met behulp van 50+ sjablonen, die informatie omzetten in waarneembare visuele taal met intuïtieve symbolen. - **Gestructureerde narratieve tekstvisualisaties**: Converteer ongestructureerde gegevens naar semantisch rijke narratieve rapporten met behulp van T8-syntax, een Markdown-achtige taal voor data-narratieven met entiteitsannotaties en minidiagrammen. - **Multidimensionale kruisanalysetabellen**: Maak gebruik van de AntV S2 Expert voor het ontwikkelen van draaitabellen, tabelbladen en aangepaste cellen, die uitgebreide begeleiding biedt voor multidimensionale gegevensanalyse. - **Geavanceerde grafiek- en statistische diagramgeneratie**: Genereer nauwkeurige G6-grafiekcode voor netwerk-, boom- en stroomdiagrammen, en G2-diagramcode voor statistische visualisaties zoals staaf-, lijn- en cirkeldiagrammen, volgens de beste praktijken. ## Use cases - **Maak dagelijkse rapporten en dynamische dashboards**: Transformeer snel complexe datasets in intuïtieve visuele diagrammen voor dagelijkse rapportage en dynamische dashboards, waardoor efficiënte datagestuurde besluitvorming mogelijk wordt. - **Ontwikkel geavanceerde interactieve analysetools**: Maak gebruik van de robuuste toolkit van AntV om geavanceerde interactieve analyse-applicaties te bouwen, die diepgaande gegevensverkenning en visualisatiemogelijkheden bieden. - **Genereer AI-geoptimaliseerde visualisaties**: Stroomlijn en automatiseer de generatie en optimalisatie van gegevensvisualisaties met geïntegreerde AI-mogelijkheden, zodat analisten zich kunnen concentreren op inzichten. - **Transformeer gegevens in aantrekkelijke infographics**: Zet gegevens, informatie en kennis om in visueel aantrekkelijke infographics met behulp van een verscheidenheid aan sjablonen om complexe ideeën duidelijk en gedenkwaardig te communiceren. ## Result preview Verken een professioneel AI-gestuurd datavisualisatierapport dat door deze vaardigheid wordt aangestuurd. ![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 ### Installeren Voeg de AntV Grafiekvisualisatievaardigheid toe aan uw AI-agent. ![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) ### Beschrijf Beschrijf het onderwerpgebied dat u wilt visualiseren, inclusief doelstellingen, doelgroep en voorkeur voor grafiektypen of -stijlen. ![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) ### Optimaliseer visualisaties De vaardigheid genereert grafieken en dashboards die zijn geoptimaliseerd voor duidelijkheid, lay-out en inzichten. ![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 # Grafiekvisualisatievaardigheden Data omzetten in een visuele taal voor beter denken. ## Overzicht In het tijdperk van datagestuurde besluitvorming zijn efficiënte en nauwkeurige datavisualisatie en -analyse van het grootste belang. AntV biedt een professionele reeks visualisatieoplossingen, met een robuuste toolkit en een uitgebreide set vaardigheden voor de gehele workflow—van diagramontwerp en interactieve verkenning tot diepgaande data-analyse. Het stelt gebruikers in staat om complexe datasets snel om te zetten in intuïtieve visuele diagrammen, waarbij de toetredingsdrempel aanzienlijk wordt verlaagd door intelligente ontwerpspecificaties en een uitgebreide componentenbibliotheek. Of het nu gaat om dagelijkse rapportage, dynamische dashboards of geavanceerde interactieve analyse, AntV levert betrouwbare ondersteuning. Door AI-mogelijkheden te integreren, stroomlijnen en automatiseren deze tools de generatie en optimalisatie van visualisaties verder. Dit stelt analisten in staat zich meer te richten op het blootleggen van inzichten en het stimuleren van zakelijke beslissingen, waardoor data echt zichtbaar en begrijpelijk wordt. > [!WARNING] > Dit project voegt alleen door AI gegenereerde code samen. > > **Hoe bij te dragen:** > 1. Dien een issue in waarin het probleem duidelijk wordt beschreven > 2. Wijs het toe aan @copilot met uw vereisten ## Gebruik Voeg deze marktplaats toe aan Claude-code: ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Of u kunt de vaardigheden rechtstreeks installeren voor uw meerdere agenten: ```bash npx skills add antvis/chart-visualization-skills ``` ## Beschikbare vaardigheden - 📊 **chart-visualization**: Een uitgebreide vaardigheid voor diagramgeneratie, aangedreven door AntV, die 26+ diagramtypen biedt voor intelligente datavisualisatie. `Chart Visualization` selecteert op intelligente wijze het meest geschikte diagramtype uit 26+ beschikbare opties, extraheert parameters op basis van gedetailleerde specificaties en genereert diagramafbeeldingen van hoge kwaliteit. Het dekt tijdreeksen, vergelijkingen, deel-van-geheel, relaties, geografische, hiërarchische, statistische en gespecialiseerde visualisaties. - 🎨 **infographic-creator**: Maak prachtige infographics op basis van gegeven tekstinhoud. Te gebruiken wanneer gebruikers vragen om infographics te maken. `Infographic Creator` gebruikt AntV Infographic om data, informatie en kennis om te zetten in een waarneembare visuele taal. Het combineert visueel ontwerp met datavisualisatie en biedt 50+ sjablonen, waaronder lijsten, sequenties, hiërarchieën, vergelijkingen, relaties en diagrammen. Het comprimeert complexe informatie met intuïtieve symbolen om het publiek te helpen belangrijke punten snel te begrijpen en te onthouden. - 🖼️ **icon-retrieval**: Zoek en haal SVG-tekenreeksen van pictogrammen op uit de pictogrambibliotheek. Retourneert standaard maximaal 5 overeenkomende pictogrammen (aanpasbaar). `Icon Search` helpt gebruikers geschikte pictogrammen te vinden voor verschillende toepassingsgebieden, waaronder infographics, webontwikkeling, ontwerp en meer. Zoek op trefwoorden om beschikbare pictogrammen te ontdekken en hun SVG-tekenreeksen rechtstreeks op te halen. Elke zoekopdracht retourneert standaard maximaal 5 overeenkomende pictogrammen (aanpasbaar via de parameter topK) met hun URL's en volledige SVG-inhoud. - 📝 **narrative-text-visualization**: Genereer gestructureerde narratieve tekstvisualisaties uit data met behulp van T8 Syntax. `Narrative Text Visualization` (T8) transformeert ongestructureerde data in semantisch rijke narratieve rapporten met behulp van T8 Syntax - een declaratieve, op Markdown lijkende taal voor het creëren van data-narratieven met entiteitannotaties. Het is vriendelijk voor LLM's en framework-agnostisch, werkt naadloos met HTML, React en Vue. Perfect voor het maken van data-analyserapporten, samenvattingen en inzichten-documenten met entiteiten zoals metrieken, waarden, trends en dimensies die correct worden gelabeld. Kenmerken zijn onder meer ingebouwde mini-diagrammen, gestandaardiseerde stijlen en professionele opmaak. Ondersteunt authentieke databronnen en biedt lichtgewicht, technologie-onafhankelijke weergave. - 📋 **antv-s2-expert**: S2 multidimensionale kruisanalyse-tabelontwikkelingsassistent. Te gebruiken wanneer gebruikers hulp nodig hebben met S2-draaitabellen, tabelbladen of elke ontwikkeling gerelateerd aan @antv/s2. `AntV S2 Expert` helpt gebruikers bij het ontwikkelen met de S2 multidimensionale kruisanalyse-tabelengine. Het biedt uitgebreide begeleiding over de `@antv/s2` kernengine, `@antv/s2-react` en `@antv/s2-vue` frameworkbindingen, `@antv/s2-react-components` geavanceerde analysecomponenten, en `@antv/s2-ssr` server-side rendering. Omvat draaitabellen, tabelbladen, aangepaste cellen, thema's, gebeurtenissen, interacties, sorteren, totalen, tooltips, bevroren rijen/kolommen, pictogrammen, paginering en meer. - 🕸️ **antv-g6-graph**: G6 v5 grafiekvisualisatie codegenerator. Te gebruiken wanneer gebruikers G6-grafieken moeten genereren — netwerkgrafieken, boomgrafieken, stroomdiagrammen, mindmaps en elke relationele of grafiekgestructureerde datavisualisatie met de G6-bibliotheek. `AntV G6 Graph` genereert nauwkeurige, uitvoerbare G6 v5-code volgens best practices. Het omvat de initialisatie van de kerngrafiek, datastructuren (nodes, edges, combos), 10+ layout-algoritmen (force, dagre, circular, grid, mindmap, fishbone, etc.), alle ingebouwde node/edge/combo typen, statusbeheer, 15+ gedragingen (drag-canvas, zoom-canvas, click-select, lasso, etc.), 10+ plugins (minimap, tooltip, toolbar, legend, timebar, etc.), aangepaste elementontwikkeling, transformaties en animatie. Ingebouwde guard rails voorkomen veelvoorkomende v4→v5 migratieproblemen, zoals het gebruik van verouderde `G6.Graph()` constructors, `graph.data()` API's of mode-gebaseerde gedragsconfiguratie. - 📈 **antv-g2-chart**: G2 v5 diagramcodegenerator. Te gebruiken wanneer gebruikers G2-diagrammen moeten genereren — staafdiagrammen, lijndiagrammen, cirkeldiagrammen, spreidingsdiagrammen, vlakdiagrammen, heatmaps en elke statistische datavisualisatie met de G2-bibliotheek. `AntV G2 Chart` genereert nauwkeurige, uitvoerbare G2 v5-code volgens Spec Mode best practices. Het omvat 30+ diagramtypen (interval, line, area, point, rect, cell, treemap, sankey, chord, wordCloud, gauge en meer), datatransformaties (stackY, dodgeX, binX, fold, etc.), coördinatensystemen (cartesian, polar, theta, radial), schalen, interacties (brush, slider, legend filter), componenten (axis, legend, tooltip, annotation) en multi-view composities. Ingebouwde guard rails voorkomen veelvoorkomende v4→v5 migratieproblemen, zoals het gebruik van verouderde chain API's, ongeldige paletnamen of het verwijzen naar `d3` in gebruikerscode. **Evaluatieresultaten** De Harness Engineering-aanpak is rigoureus getest tegen 174 testcases voor diagramgeneratie, wat aanzienlijke verbeteringen ten opzichte van basismethoden laat zien: | **Model** | **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 Baseline | 80.5% | 79.2% | De resultaten tonen aan dat Harness Engineering LLM's in staat stelt om bijna productieklare nauwkeurigheid te bereiken (tot 98,2%), waarbij de Context7-baseline-aanpak aanzienlijk wordt overtroffen. > [!TIP] > Binnenkort meer vaardigheden. ## Bibliotheekgebruik Het kan als bibliotheek worden gebruikt in uw Node.js-projecten met `CLI` en `API`. ### CLI-gebruik We bieden ook een CLI-tool genaamd `antv` voor eenvoudig gebruik in uw terminal, wereldwijd installeren: ```bash npm install -g @antv/chart-visualization-skills ``` **Vaardigheden ophalen of weergeven op query**: ```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 ``` **Gebruik voor de opdracht**: ``` 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") ``` > Opmerking: `--content` voegt altijd de kernbeperkingen van de bibliotheek (sectie 1 & 2 van SKILL.md, tot aan de `` markering) toe als eerste resultaat, zodat het model de essentiële regels samen met de referentiedocumenten ontvangt. ### API-gebruik ```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) } ``` | Optie | Type | Standaard | Beschrijving | | :--- | :--- | :--- | :--- | | `library` | `string` | alle | Bibliotheekfilter (`g2` of `g6`) | | `topK` | `number` | `7` | Aantal resultaten | | `content` | `boolean` | `false` | Markdown-inhoud opnemen | | `includeInfo` | `boolean` | hetzelfde als `content` | Kernbeperkingen van SKILL.md (sectie 1-2) als eerste resultaat toevoegen | > Opmerkingen: > - Standaard geeft ophalen lichte resultaatobjecten zonder het `content` veld. > - `content: true` retourneert de markdown-inhoud (frontmatter-metadata is uitgesloten). > - Wanneer `includeInfo` true is (de standaardwaarde wanneer `content: true`), wordt het kernbeperkingenblok — SKILL.md tot aan `` — geïnjecteerd als het eerste element (id met prefix `__info__`), zodat het model altijd de essentiële regels ziet. ```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 } ``` | Parameter | Type | Standaard | Beschrijving | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Bibliotheek waarover info moet worden opgevraagd (`g2` of `g6`) | ## Licentie MIT-licentie - zie het [LICENSE](LICENSE) bestand voor details. ## FAQ ### Wat zijn AntV-grafiekvisualisatievaardigheden? AntV-grafiekvisualisatievaardigheden zijn een reeks tools en mogelijkheden aangedreven door AntV, ontworpen om gebruikers te helpen gegevens efficiënt en nauwkeurig te visualiseren en te analyseren. Ze omvatten functies voor diagramgeneratie, infographiccreatie, narratieve tekstvisualisatie en gespecialiseerde grafiek- en statistische diagramontwikkeling. ### Hoeveel diagramtypen ondersteunt de diagramvisualisatievaardigheid? De diagramvisualisatievaardigheid biedt 26+ diagramtypen voor intelligente gegevensvisualisatie, die een breed scala aan gegevensrepresentaties dekken, waaronder tijdreeksen, vergelijkingen, relaties en geografische gegevens. ### Kan ik infographics maken met deze vaardigheden? Ja, de infographic-maker-vaardigheid stelt u in staat prachtige infographics te maken op basis van gegeven tekstinhoud. Het maakt gebruik van AntV Infographic en biedt 50+ sjablonen om gegevens om te zetten in een waarneembare visuele taal. ### Wat is narratieve tekstvisualisatie (T8-syntax)? Narratieve tekstvisualisatie (T8) zet ongestructureerde gegevens om in semantisch rijke narratieve rapporten met behulp van T8-syntax, een declaratieve Markdown-achtige taal. Het is ontworpen voor het creëren van data-narratieven met entiteitsannotaties, minidiagrammen en professionele opmaak, geschikt voor analyserapporten en inzichtendocumenten. ### Hoe helpen AntV-grafiekvisualisatievaardigheden bij multidimensionale analyse? De antv-s2-expert-vaardigheid fungeert als ontwikkelassistent voor de S2 multidimensionale kruisanalysetabel-engine. Het biedt uitgebreide begeleiding voor het werken met draaitabellen, tabelbladen, aangepaste cellen en diverse andere functies van @antv/s2. ### Zijn er tools voor het genereren van specifieke grafieken en statistische diagrammen? Ja, de antv-g6-grafiek-vaardigheid genereert G6 v5-code voor grafiekvisualisaties zoals netwerkgrafieken, boomgrafieken en stroomdiagrammen. De antv-g2-diagram-vaardigheid genereert G2 v5-code voor statistische diagrammen zoals staafdiagrammen, lijndiagrammen, cirkeldiagrammen en spreidingsdiagrammen, volgens de beste praktijken.