# Ferdigheter for diagramvisualiseringsagent

> Gjør komplekse datasett om til intuitive visuelle diagrammer med AntV-diagramvisualiseringsferdigheter, som tilbyr over 26 diagramtyper og AI-drevet generering. Begynn å skape virkningsfulle datafortellinger uten anstrengelse.

- Canonical: https://nanoskill.ai/nb/skills/chart-visualization-skills
- Markdown: https://nanoskill.ai/nb/skills/chart-visualization-skills.md
- Author: antvis
- Published: 2026-06-09T05:00:00.000Z
- Updated: 2026-07-25T04:33:38.870Z
- Language: nb
- 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-diagramvisualiseringsferdigheter tilbyr en profesjonell pakke med visualiseringsløsninger utviklet for å omdanne komplekse datasett til intuitive visuelle diagrammer på en effektiv og nøyaktig måte. Lansert av Ant-gruppen gir denne samlingen av ferdigheter brukere muligheten til å navigere hele arbeidsflyten fra diagramdesign og interaktiv utforskning til dybdedataanalyse, noe som senker terskelen for å skape betydelig gjennom intelligente designspesifikasjoner og et rikt bibliotek av komponenter. Den gir robust støtte for daglig rapportering, dynamiske dashbord og sofistikert interaktiv analyse, noe som gjør data synlige og forståelige.

Pakken inkluderer spesialiserte ferdigheter som "diagramvisualisering" for å generere over 26 diagramtyper, "infografikk-skaper" for å omdanne tekst til engasjerende visuelle infografikker med over 50 maler, og "narrativ-tekstvisualisering" for å konvertere ustrukturerte data til semantisk rike rapporter ved hjelp av T8-syntaks. Disse funksjonene forbedres ytterligere av AI-integrasjon, som strømlinjeformer og automatiserer generering og optimalisering av visualiseringer, slik at analytikere kan fokusere mer på å avdekke innsikt og drive forretningsbeslutninger.

Utviklere kan også dra nytte av dedikerte ferdigheter som "antv-s2-ekspert" for flerdimensjonale kryssanalysetabeller, "antv-g6-graf" for å generere G6 v5 grafvisualiseringer, og "antv-g2-diagram" for å skape G2 v5 statistiske diagrammer. Disse verktøyene gir nøyaktig, kjørbar kode som følger beste praksis, og dekker kjernefunksjonaliteter, ulike layoutalgoritmer, komponenttyper og interaksjoner. Ferdighetene kan integreres i Node.js-prosjekter via CLI eller API, noe som gir fleksibilitet for ulike utviklingsbehov.

## Key features

- **Omfattende diagramgenerering**: Få tilgang til over 26 intelligente diagramtyper for varierte datavisualiseringsbehov, inkludert tidsserier, sammenligninger, relasjoner og geografiske data.
- **AI-drevet infografikkskaping**: Generer vakker infografikk fra tekstinnhold ved hjelp av over 50 maler, og transformer informasjon til et forståelig visuelt språk med intuitive symboler.
- **Strukturerte narrative tekstvisualiseringer**: Konverter ustrukturerte data til semantisk rike narrative rapporter ved hjelp av T8-syntaks, et Markdown-lignende språk for datanarrativer med entitetsannoteringer og minidiagrammer.
- **Flerdimensjonale kryssanalysetabeller**: Benytt AntV S2-eksperten for å utvikle pivottabeller, tabellark og tilpassede celler, og tilby omfattende veiledning for flerdimensjonal dataanalyse.
- **Avansert generering av grafer og statistiske diagrammer**: Generer nøyaktig G6-grafkode for nettverks-, tre- og flytdiagrammer, og G2-diagramkode for statistiske visualiseringer som søyle-, linje- og sektordiagrammer, i henhold til beste praksis.

## Use cases

- **Opprett daglige rapporter og dynamiske dashbord**: Transformer raskt komplekse datasett til intuitive visuelle diagrammer for daglig rapportering og dynamiske dashbord, noe som muliggjør effektiv datadrevet beslutningstaking.
- **Utvikle sofistikerte interaktive analyseverktøy**: Dra nytte av AntVs robuste verktøysett for å bygge avanserte interaktive analyseapplikasjoner, som tilbyr dyptgående datautforsknings- og visualiseringsmuligheter.
- **Generer AI-optimaliserte visualiseringer**: Effektiviser og automatiser genereringen og optimaliseringen av datavisualiseringer med integrerte AI-funksjoner, slik at analytikere kan fokusere på innsikt.
- **Transformer data til engasjerende infografikk**: Konverter data, informasjon og kunnskap til visuelt tiltalende infografikk ved hjelp av en rekke maler for å kommunisere komplekse ideer klart og minneverdig.

## Result preview

Utforsk en profesjonell AI-drevet datavisualiseringsrapport drevet av denne ferdigheten.

![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

Legg til AntV-diagramvisualiseringsferdigheten til din 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)

### Beskriv

Beskriv temaområdet du vil ha visualisert, inkludert mål, målgruppe og foretrukne diagramtyper eller stiler.

![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)

### Optimaliser visualiseringer

Ferdigheten genererer diagrammer og dashbord optimalisert for klarhet, layout og innsikt.

![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

# Ferdigheter for diagramvisualisering

Gjør data til et visuelt språk for bedre tenkning.

## Oversikt

I en tid med datadrevne beslutninger er effektiv og nøyaktig datavisualisering og -analyse avgjørende. AntV tilbyr en profesjonell pakke med visualiseringsløsninger, med et robust verktøysett og et omfattende sett med ferdigheter for hele arbeidsflyten – fra diagramdesign og interaktiv utforskning til dybdeanalyse av data. Det gjør det mulig for brukere å raskt transformere komplekse datasett til intuitive visuelle diagrammer, og senker terskelen for å skape betydelig gjennom intelligente designspesifikasjoner og et rikt bibliotek av komponenter. Enten det gjelder daglig rapportering, dynamiske dashbord eller avansert interaktiv analyse, leverer AntV pålitelig støtte. Ved å integrere AI-funksjoner strømlinjeformer og automatiserer disse verktøyene ytterligere generering og optimalisering av visualiseringer. Dette gjør at analytikere kan fokusere mer på å avdekke innsikt og drive forretningsbeslutninger, og virkelig gjøre data synlige og forståelige.

> [!WARNING]
> Dette prosjektet slår bare sammen AI-generert kode.
>
> **Slik bidrar du:**
> 1. Send inn en issue som tydelig beskriver problemet
> 2. Tildel den til @copilot med dine krav

## Bruk

Legg til denne markedsplassen i Claude Code:
```bash
/plugin marketplace add antvis/chart-visualization-skills
```

Eller du kan installere ferdighetene direkte for dine flere agenter:

```bash
npx skills add antvis/chart-visualization-skills
```

## Tilgjengelige ferdigheter

- 📊 **chart-visualization**: En omfattende ferdighet for diagramgenerering drevet av AntV som tilbyr 26+ diagramtyper for intelligent datavisualisering.

`Chart Visualization` velger intelligent den mest passende diagramtypen fra 26+ tilgjengelige alternativer, trekker ut parametere basert på detaljerte spesifikasjoner og genererer diagrambilder av høy kvalitet. Den dekker tidsserier, sammenligninger, del-av-helhet, relasjoner, geografiske, hierarkiske, statistiske og spesialiserte visualiseringer.

- 🎨 **infographic-creator**: Lag vakre infografikker basert på gitt tekstinnhold. Bruk når brukere ber om å lage infografikker.

`Infographic Creator` bruker AntV Infographic til å transformere data, informasjon og kunnskap til et sansbart visuelt språk. Den kombinerer visuell design med datavisualisering, og tilbyr 50+ maler inkludert lister, sekvenser, hierarkier, sammenligninger, relasjoner og diagrammer. Den komprimerer kompleks informasjon med intuitive symboler for å hjelpe publikum raskt å forstå og huske nøkkelpunkter.

- 🖼️ **icon-retrieval**: Søk og hent SVG-strenger for ikoner fra ikonbiblioteket. Returnerer opptil 5 matchende ikoner som standard (kan tilpasses).

`Icon Search` hjelper brukere med å finne passende ikoner for ulike bruksområder, inkludert infografikk, webutvikling, design og mer. Søk på nøkkelord for å oppdage tilgjengelige ikoner og hente deres SVG-strenger direkte. Hvert søk returnerer opptil 5 matchende ikoner som standard (kan tilpasses via topK-parameteren) med URL-ene deres og fullstendig SVG-innhold.

- 📝 **narrative-text-visualization**: Generer strukturerte narrative tekstvisualiseringer fra data ved hjelp av T8 Syntax.

`Narrative Text Visualization` (T8) transformerer ustrukturerte data til semantisk rike narrative rapporter ved hjelp av T8 Syntax – et deklarativt, Markdown-lignende språk for å lage datanarrativer med entitetsannoteringer. Det er LLM-vennlig og rammeverk-agnostisk, og fungerer sømløst med HTML, React og Vue. Perfekt for å lage dataanalyserapporter, sammendrag og innsiktsdokumenter med entiteter som metrikker, verdier, trender og dimensjoner korrekt merket. Funksjoner inkluderer innebygde minidiagrammer, standardisert styling og profesjonell formatering. Støtter autentiske datakilder og tilbyr lettvekts, teknologinøytral rendering.

- 📋 **antv-s2-expert**: Utviklingsassistent for S2 flerdimensjonale kryss-analysetabeller. Bruk når brukere trenger hjelp med S2-pivottabeller, tabellark eller annen utvikling relatert til @antv/s2.

`AntV S2 Expert` hjelper brukere med å utvikle med S2-motoren for flerdimensjonale kryss-analysetabeller. Den gir omfattende veiledning om `@antv/s2` kjernemotor, `@antv/s2-react`- og `@antv/s2-vue`-rammeverksbindinger, `@antv/s2-react-components` avanserte analysekomponenter og `@antv/s2-ssr` server-side rendering. Dekker pivottabeller, tabellark, tilpassede celler, tematisering, hendelser, interaksjoner, sortering, totaler, verktøytips, frosne rader/kolonner, ikoner, paginering og mer.

- 🕸️ **antv-g6-graph**: G6 v5 grafvisualiseringskodegenerator. Bruk når brukere trenger å generere G6-grafer – nettverksgrafer, tregrafer, flytdiagrammer, tankekart og enhver relasjons- eller grafstrukturert datavisualisering med G6-biblioteket.

`AntV G6 Graph` genererer nøyaktig, kjørbar G6 v5-kode som følger beste praksis. Den dekker kjerneinitialisering av graf, datastrukturer (noder, kanter, kombinasjoner), 10+ layoutalgoritmer (force, dagre, circular, grid, mindmap, fishbone, etc.), alle innebygde node-/kant-/kombinasjonstyper, tilstandsstyring, 15+ atferder (drag-canvas, zoom-canvas, click-select, lasso, etc.), 10+ plugins (minimap, tooltip, toolbar, legend, timebar, etc.), utvikling av tilpassede elementer, transformasjoner og animasjon. Innebygde sikkerhetsmekanismer forhindrer vanlige migrasjonsfeller fra v4→v5, som å bruke utdaterte `G6.Graph()`-konstruktører, `graph.data()`-API-er eller modusbasert atferdskonfigurasjon.

- 📈 **antv-g2-chart**: G2 v5 diagramkodegenerator. Bruk når brukere trenger å generere G2-diagrammer – stolpediagrammer, linjediagrammer, sektordiagrammer, spredningsplott, arealdiagrammer, varmekart og enhver statistisk datavisualisering med G2-biblioteket.

`AntV G2 Chart` genererer nøyaktig, kjørbar G2 v5-kode som følger beste praksis for Spec Mode. Den dekker 30+ diagramtyper (intervall, linje, område, punkt, rektangel, celle, treemap, sankey, chord, wordCloud, gauge og mer), datatransformasjoner (stackY, dodgeX, binX, fold, etc.), koordinatsystemer (kartesisk, polart, theta, radialt), skalaer, interaksjoner (brush, slider, legend filter), komponenter (akse, legend, tooltip, annotasjon) og multivis-komposisjoner. Innebygde sikkerhetsmekanismer forhindrer vanlige migrasjonsfeller fra v4→v5, som å bruke utdaterte kjede-API-er, ugyldige palettnavn eller referanser til `d3` i brukerkode.

**Evalueringsresultater**

Harness Engineering-tilnærmingen er grundig testet mot 174 testtilfeller for diagramgenerering, og viser betydelige forbedringer i forhold til grunnlinjemetoder:

| **Modell** | **G2** | **G6** |
| :---: | :---: | :---: |
| qwen3-coder-480b-a35b-instruct | ✨ 98,2 % <sup><sub>+17,7 %</sub></sup> | 94,8 % <sup><sub>+15,6 %</sub></sup> |
| Kimi-K2.5 | 97,7 % <sup><sub>+17,2 %</sub></sup> | 96,9 % <sup><sub>+17,7 %</sub></sup> |
| GLM-5.1 | 93,6 % <sup><sub>+13,1 %</sub></sup> | 92,8 % <sup><sub>+13,6 %</sub></sup> |
| DeepSeek-V3.2 | 90,8 % <sup><sub>+10,3 %</sub></sup> | ✨ 97,9 % <sup><sub>+18,7 %</sub></sup> |
| Context7 <sub>grunnlinje</sub> | 80,5 % | 79,2 % |

Resultatene viser at Harness Engineering gjør det mulig for LLM-er å oppnå nær produksjonsklar nøyaktighet (opptil 98,2 %), og overgår betydelig Context7-grunnlinjetilnærmingen.

> [!TIP]
> Flere ferdigheter kommer snart.

## Biblioteksbruk

Det kan brukes som et bibliotek i Node.js-prosjektene dine med `CLI` og `API`.

### CLI-bruk

Vi tilbyr også et CLI-verktøy kalt `antv` for enkel bruk i terminalen din, installer globalt:

```bash
npm install -g @antv/chart-visualization-skills
```

**Hent eller list ferdigheter etter søk**:

```bash
# Hent ferdigheter etter søk (kun metadata)
antv retrieve "bar chart" --library g2 --topk 10

# Hent ferdigheter med fullt markdown-innhold (kjernebegrensninger forhåndsvedlagt)
antv retrieve "bar chart" --library g2 --content

# Hent ferdigheter og skriv ut som JSON
antv retrieve "bar chart" --library g2 --output json

# Få en ferdighet etter dens nøyaktige ID
antv get g2-mark-interval-basic --library g2

# List alle tilgjengelige ferdigheter
antv list --library g2 --category core

# List ferdigheter og skriv ut som JSON
antv list --output json

# Vis ferdighetsinfo (kjernebegrensninger fra SKILL.md)
antv info --library g2

# Vis ferdighetsinfo som JSON
antv info --library g2 --output json
```

**Bruk av kommandoen**:

```
Bruk: antv [alternativer] [kommando]

CLI-verktøy for å hente ferdigheter for AntV-diagramvisualisering

Alternativer:
  -V, --version               skriv ut versjonsnummeret
  -h, --help                  vis hjelp for kommando

Kommandoer:
  retrieve [alternativer] <søk>  Søk etter ferdigheter som samsvarer med et søk
  get [alternativer] <id>        Hent en ferdighet etter dens nøyaktige ID
  list [alternativer]            List alle tilgjengelige ferdigheter
  info [alternativer]            Vis ferdighetsinfo fra SKILL.md
  help [kommando]                vis hjelp for kommando

Alternativer for retrieve:
  --library <lib>             Filtrer etter bibliotek (f.eks. g2, g6)
  --topk <n>                  Antall resultater som skal returneres (standard: 7)
  --content                   Inkluder markdown-innhold i resultatene; kjernebegrensninger (SKILL.md Seksjon 1-2) forhåndsvedlegges alltid som det første resultatet
  --output <format>           Utdataformat: json | text (standard: "text")
```

> Merk: `--content` forhåndsvedlegger alltid bibliotekets kjernebegrensninger (Seksjon 1 og 2 i SKILL.md, opp til `<!-- CONSTRAINTS:END -->`-markøren) som det første resultatet, og sikrer at modellen mottar essensielle regler sammen med referansedokumentene.

### API-bruk

```typescript
import { retrieve } from '@antv/chart-visualization-skills';

// Kun metadata (uten innhold)
const skills = retrieve('bar chart', { library: 'g2', topK: 5 });

// Med fullt markdown-innhold (kjernebegrensninger forhåndsvedlagt som første resultat)
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true });

// Med innhold men uten kjernebegrensninger
const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false });
```

```typescript
retrieve(query: string, options?: RetrieveOptions): Skill[]

interface RetrieveOptions {
  library?: string;   // Biblioteksfilter, f.eks. 'g2' eller 'g6'
  topK?: number;      // Antall resultater (standard: 7)
  content?: boolean;  // Inkluder markdown-innhold (standard: false)
  includeInfo?: boolean; // Forhåndsvedlegg SKILL.md kjernebegrensninger (standard: samme som content)
}
```

| Alternativ | Type | Standard | Beskrivelse |
| :--- | :--- | :--- | :--- |
| `library` | `string` | all | Biblioteksfilter (`g2` eller `g6`) |
| `topK` | `number` | `7` | Antall resultater |
| `content` | `boolean` | `false` | Inkluder markdown-innhold |
| `includeInfo` | `boolean` | samme som `content` | Forhåndsvedlegg SKILL.md kjernebegrensninger (Seksjon 1-2) som første resultat |

> Merknader:
> - Standard henting returnerer lette resultatobjekter uten `content`-feltet.
> - `content: true` returnerer markdown-innhold (frontmatter-metadata er ekskludert).
> - Når `includeInfo` er true (standard når `content: true`), injiseres blokken med kjernebegrensninger – SKILL.md opp til `<!-- CONSTRAINTS:END -->` – som det første elementet (id med prefikset `__info__`), og sikrer at modellen alltid ser de essensielle reglene.

```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-brødtekst (etter frontmatter)
  constraintsContent: string; // SKILL.md-brødtekst opp til <!-- CONSTRAINTS:END -->-markør; injisert av retrieve når includeInfo: true
}
```

| Parameter | Type | Standard | Beskrivelse |
| :--- | :--- | :--- | :--- |
| `library` | `string` | `'g2'` | Bibliotek å hente info for (`g2` eller `g6`) |

## Lisens

MIT-lisens – se [LICENSE](LICENSE)-filen for detaljer.

## FAQ

### Hva er AntV-diagramvisualiseringsferdigheter?

AntV-diagramvisualiseringsferdigheter er en pakke med verktøy og funksjoner drevet av AntV, utformet for å hjelpe brukere med å visualisere og analysere data effektivt og nøyaktig. De inkluderer funksjoner for diagramgenerering, infografikkskaping, narrativ tekstvisualisering og spesialisert utvikling av grafer og statistiske diagrammer.

### Hvor mange diagramtyper støtter diagramvisualiseringsferdigheten?

Diagramvisualiseringsferdigheten tilbyr over 26 diagramtyper for intelligent datavisualisering, og dekker et bredt spekter av datarepresentasjoner inkludert tidsserier, sammenligninger, relasjoner og geografiske data.

### Kan jeg lage infografikk med disse ferdighetene?

Ja, infografikkskaperferdigheten lar deg lage vakker infografikk basert på gitt tekstinnhold. Den bruker AntV Infographic og tilbyr over 50 maler for å transformere data til et forståelig visuelt språk.

### Hva er narrativ tekstvisualisering (T8-syntaks)?

Narrativ tekstvisualisering (T8) transformerer ustrukturerte data til semantisk rike narrative rapporter ved hjelp av T8-syntaks, et deklarativt, Markdown-lignende språk. Det er utformet for å lage datanarrativer med entitetsannoteringer, minidiagrammer og profesjonell formatering, egnet for analyserapporter og innsiktsdokumenter.

### Hvordan hjelper AntV-diagramvisualiseringsferdigheter med flerdimensjonal analyse?

Antv-s2-ekspertferdigheten fungerer som en utviklingsassistent for S2-motoren for flerdimensjonale kryssanalysetabeller. Den gir omfattende veiledning for arbeid med pivottabeller, tabellark, tilpassede celler og ulike andre funksjoner i @antv/s2.

### Finnes det verktøy for å generere spesifikke grafer og statistiske diagrammer?

Ja, antv-g6-graph-ferdigheten genererer G6 v5-kode for grafvisualiseringer som nettverksgrafer, trestrukturer og flytskjemaer. Antv-g2-chart-ferdigheten genererer G2 v5-kode for statistiske diagrammer som søylediagrammer, linjediagrammer, sektordiagrammer og spredningsplott, i henhold til beste praksis.