# Competenze dell'agente di visualizzazione grafici > Trasforma complessi set di dati in grafici visivi intuitivi con le competenze di visualizzazione grafici AntV, offrendo oltre 26 tipi di grafico e generazione potenziata dall'IA. Inizia a creare storie di dati d'impatto senza sforzo. - Canonical: https://nanoskill.ai/it/skills/chart-visualization-skills - Markdown: https://nanoskill.ai/it/skills/chart-visualization-skills.md - Author: antvis - Published: 2026-06-09T05:00:00.000Z - Updated: 2026-07-25T04:33:38.870Z - Language: it - 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 Le competenze di visualizzazione grafici AntV offrono una suite professionale di soluzioni di visualizzazione progettate per trasformare complessi set di dati in grafici visivi intuitivi in modo efficiente e accurato. Avviata da Ant Group, questa raccolta di competenze consente agli utenti di gestire l'intero flusso di lavoro, dalla progettazione dei grafici e l'esplorazione interattiva all'analisi approfondita dei dati, riducendo significativamente le barriere alla creazione grazie a specifiche di progettazione intelligenti e una ricca libreria di componenti. Fornisce un solido supporto per reportistica quotidiana, dashboard dinamiche e analisi interattive sofisticate, rendendo i dati visibili e comprensibili. La suite include competenze specializzate come "chart-visualization" per generare oltre 26 tipi di grafici, "infographic-creator" per trasformare il testo in infografiche visive coinvolgenti con oltre 50 modelli, e "narrative-text-visualization" per convertire dati non strutturati in report semanticamente ricchi utilizzando la sintassi T8. Queste capacità sono ulteriormente potenziate dall'integrazione dell'IA, che semplifica e automatizza la generazione e l'ottimizzazione delle visualizzazioni, consentendo agli analisti di concentrarsi maggiormente sulla scoperta di approfondimenti e sulla guida delle decisioni aziendali. Gli sviluppatori possono anche sfruttare competenze dedicate come "antv-s2-expert" per tabelle di analisi incrociate multidimensionali, "antv-g6-graph" per generare visualizzazioni di grafi G6 v5 e "antv-g2-chart" per creare grafici statistici G2 v5. Questi strumenti forniscono codice accurato ed eseguibile seguendo le migliori pratiche, coprendo funzionalità principali, vari algoritmi di layout, tipi di componenti e interazioni. Le competenze possono essere integrate in progetti Node.js tramite CLI o API, offrendo flessibilità per diverse esigenze di sviluppo. ## Key features - **Generazione completa di grafici**: Accedi a oltre 26 tipi di grafici intelligenti per diverse esigenze di visualizzazione dei dati, tra cui serie temporali, confronti, relazioni e dati geografici. - **Creazione di infografiche potenziata dall'IA**: Genera bellissime infografiche da contenuti testuali utilizzando oltre 50 modelli, trasformando le informazioni in un linguaggio visivo percepibile con simboli intuitivi. - **Visualizzazioni strutturate di testi narrativi**: Converti dati non strutturati in report narrativi semanticamente ricchi utilizzando la sintassi T8, un linguaggio simile a Markdown per narrazioni di dati con annotazioni di entità e mini grafici. - **Tabelle di analisi incrociata multidimensionale**: Utilizza l'Esperto AntV S2 per sviluppare tabelle pivot, fogli di tabella e celle personalizzate, offrendo una guida completa per l'analisi multidimensionale dei dati. - **Generazione avanzata di grafici e diagrammi statistici**: Genera codice G6 accurato per grafici di rete, ad albero e diagrammi di flusso, e codice G2 per visualizzazioni statistiche come istogrammi, grafici a linee e a torta, seguendo le migliori pratiche. ## Use cases - **Crea report giornalieri e dashboard dinamiche**: Trasforma rapidamente set di dati complessi in grafici visivi intuitivi per report giornalieri e dashboard dinamiche, consentendo un processo decisionale efficiente basato sui dati. - **Sviluppa sofisticati strumenti di analisi interattiva**: Sfrutta il robusto toolkit di AntV per costruire applicazioni di analisi interattiva avanzate, fornendo capacità di esplorazione e visualizzazione approfondita dei dati. - **Genera visualizzazioni ottimizzate dall'IA**: Semplifica e automatizza la generazione e l'ottimizzazione delle visualizzazioni dei dati con capacità di IA integrate, consentendo agli analisti di concentrarsi sugli insight. - **Trasforma i dati in infografiche accattivanti**: Converti dati, informazioni e conoscenza in infografiche visivamente accattivanti utilizzando una varietà di modelli per comunicare idee complesse in modo chiaro e memorabile. ## Result preview Esplora un report professionale di visualizzazione dei dati potenziato dall'IA, alimentato da questa competenza. ![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 ### Installa Aggiungi la competenza di visualizzazione grafici AntV al tuo agente 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) ### Descrivi Descrivi l'area tematica che desideri visualizzare, inclusi obiettivi, pubblico di destinazione e tipi o stili di grafico preferiti. ![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) ### Ottimizza le visualizzazioni La competenza genera grafici e dashboard ottimizzati per chiarezza, layout e approfondimenti. ![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 # Competenze di Visualizzazione Grafica Trasformare i dati in un linguaggio visivo per pensare meglio. ## Panoramica Nell'era delle decisioni basate sui dati, una visualizzazione e un'analisi efficiente e accurata sono fondamentali. AntV offre una suite professionale di soluzioni di visualizzazione, fornendo un robusto toolkit e un insieme completo di competenze per l'intero flusso di lavoro, dalla progettazione del grafico all'esplorazione interattiva fino all'analisi approfondita dei dati. Consente agli utenti di trasformare rapidamente dataset complessi in grafici visivi intuitivi, abbassando significativamente la barriera alla creazione grazie a specifiche di design intelligenti e una ricca libreria di componenti. Che si tratti di reportistica quotidiana, dashboard dinamiche o analisi interattive sofisticate, AntV offre un supporto affidabile. Integrando capacità AI, questi strumenti semplificano e automatizzano ulteriormente la generazione e l'ottimizzazione delle visualizzazioni. Ciò consente agli analisti di concentrarsi maggiormente sulla scoperta di insight e sulla guida delle decisioni aziendali, rendendo veramente i dati visibili e comprensibili. > [!WARNING] > Questo progetto unisce solo codice generato dall'AI. > > **Come contribuire:** > 1. Invia una segnalazione descrivendo chiaramente il problema > 2. Assegnala a @copilot con i tuoi requisiti ## Utilizzo Aggiungi questo marketplace a Claude Code: ```bash /plugin marketplace add antvis/chart-visualization-skills ``` Oppure puoi installare direttamente le competenze per i tuoi agenti multipli: ```bash npx skills add antvis/chart-visualization-skills ``` ## Competenze Disponibili - 📊 **visualizzazione-grafico**: Una competenza completa di generazione di grafici basata su AntV che fornisce oltre 26 tipi di grafici per la visualizzazione intelligente dei dati. `Visualizzazione Grafico` seleziona intelligentemente il tipo di grafico più appropriato tra oltre 26 opzioni disponibili, estrae i parametri in base a specifiche dettagliate e genera immagini di grafici di alta qualità. Copre serie temporali, confronti, composizioni, relazioni, geografiche, gerarchiche, statistiche e visualizzazioni specializzate. - 🎨 **creatore-infografiche**: Crea bellissime infografiche basate sul contenuto testuale fornito. Da usare quando gli utenti richiedono di creare infografiche. `Creatore di Infografiche` utilizza AntV Infographic per trasformare dati, informazioni e conoscenza in un linguaggio visivo percepibile. Combina il design visivo con la visualizzazione dei dati, fornendo oltre 50 modelli inclusi elenchi, sequenze, gerarchie, confronti, relazioni e grafici. Comprime informazioni complesse con simboli intuitivi per aiutare il pubblico a comprendere e ricordare rapidamente i punti chiave. - 🖼️ **recupero-icone**: Cerca e recupera stringhe SVG di icone dalla libreria di icone. Restituisce fino a 5 icone corrispondenti per impostazione predefinita (personalizzabile). `Ricerca Icone` aiuta gli utenti a trovare icone appropriate per vari casi d'uso inclusi infografiche, sviluppo web, design e altro. Cerca per parole chiave per scoprire le icone disponibili e recuperare direttamente le loro stringhe SVG. Ogni ricerca restituisce fino a 5 icone corrispondenti per impostazione predefinita (personalizzabile tramite parametro topK) con i loro URL e il contenuto SVG completo. - 📝 **visualizzazione-testo-narrativo**: Genera visualizzazioni strutturate di testo narrativo dai dati utilizzando la sintassi T8. `Visualizzazione Testo Narrativo` (T8) trasforma dati non strutturati in report narrativi semanticamente ricchi utilizzando la sintassi T8 - un linguaggio dichiarativo simile a Markdown per creare narrazioni di dati con annotazioni di entità. È amichevole per LLM e indipendente dal framework, funzionando senza problemi con HTML, React e Vue. Perfetto per creare report di analisi dei dati, riassunti e documenti di insight con entità come metriche, valori, tendenze e dimensioni opportunamente etichettate. Le funzionalità includono mini grafici integrati, stile standardizzato e formattazione professionale. Supporta fonti di dati autentiche e fornisce un rendering leggero e tecnologicamente agnostico. - 📋 **esperto-antv-s2**: Assistente per lo sviluppo di tabelle multidimensionali di analisi incrociata S2. Da usare quando gli utenti hanno bisogno di aiuto con tabelle pivot S2, fogli di tabella o qualsiasi sviluppo correlato a @antv/s2. `Esperto AntV S2` aiuta gli utenti nello sviluppo con il motore di tabelle di analisi incrociata multidimensionale S2. Fornisce una guida completa su `@antv/s2` motore core, `@antv/s2-react` e `@antv/s2-vue` collegamenti framework, `@antv/s2-react-components` componenti di analisi avanzata e `@antv/s2-ssr` rendering lato server. Copre tabelle pivot, fogli di tabella, celle personalizzate, temi, eventi, interazioni, ordinamento, totali, suggerimenti, righe/colonne bloccate, icone, paginazione e altro. - 🕸️ **grafo-antv-g6**: Generatore di codice per la visualizzazione di grafi G6 v5. Da usare quando gli utenti hanno bisogno di generare grafi G6 — grafi di rete, grafi ad albero, diagrammi di flusso, mappe mentali e qualsiasi visualizzazione di dati relazionali o strutturati a grafo con la libreria G6. `Grafo AntV G6` genera codice accurato ed eseguibile per G6 v5 seguendo le migliori pratiche. Copre l'inizializzazione di base del grafo, strutture dati (nodi, archi, combo), oltre 10 algoritmi di layout (forza, dagre, circolare, griglia, mappa mentale, lisca di pesce, ecc.), tutti i tipi predefiniti di nodi/archi/combo, gestione degli stati, oltre 15 comportamenti (trascina-area, zoom-area, clic-seleziona, lazo, ecc.), oltre 10 plugin (minimappa, suggerimento, barra degli strumenti, legenda, barra temporale, ecc.), sviluppo di elementi personalizzati, trasformazioni e animazione. Le protezioni integrate prevengono trappole comuni nella migrazione da v4 a v5 come l'uso di costruttori deprecati `G6.Graph()`, API `graph.data()` o configurazione dei comportamenti basata su modalità. - 📈 **grafico-antv-g2**: Generatore di codice per grafici G2 v5. Da usare quando gli utenti hanno bisogno di generare grafici G2 — grafici a barre, grafici a linee, grafici a torta, diagrammi a dispersione, grafici ad area, mappe di calore e qualsiasi visualizzazione statistica dei dati con la libreria G2. `Grafico AntV G2` genera codice accurato ed eseguibile per G2 v5 seguendo le migliori pratiche della modalità specifica. Copre oltre 30 tipi di grafici (intervallo, linea, area, punto, rettangolo, cella, mappa ad albero, sankey, corda, nuvola di parole, indicatore, e altri), trasformazioni dei dati (stackY, dodgeX, binX, piega, ecc.), sistemi di coordinate (cartesiano, polare, theta, radiale), scale, interazioni (pennello, cursore, filtro legenda), componenti (assi, legenda, suggerimento, annotazione) e composizioni multi-vista. Le protezioni integrate prevengono trappole comuni nella migrazione da v4 a v5 come l'uso di API a catena deprecate, nomi di tavolozze non validi o riferimenti a `d3` nel codice utente. **Risultati della Valutazione** L'approccio Harness Engineering è stato rigorosamente testato su 174 casi di test di generazione di grafici, dimostrando miglioramenti significativi rispetto ai metodi di base: | **Modello** | **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% | I risultati mostrano che Harness Engineering consente ai LLM di raggiungere un'accuratezza quasi pronta per la produzione (fino al 98,2%), superando significativamente l'approccio baseline Context7. > [!TIP] > Altre competenze sono in arrivo. ## Utilizzo come Libreria Può essere utilizzata come libreria nei tuoi progetti Node.js con `CLI` e `API`. ### Utilizzo CLI Forniamo anche uno strumento CLI chiamato `antv` per un facile utilizzo nel terminale, installalo globalmente: ```bash npm install -g @antv/chart-visualization-skills ``` **Recupera o elenca competenze tramite query**: ```bash # Recupera competenze tramite query (solo metadati) antv retrieve "bar chart" --library g2 --topk 10 # Recupera competenze con contenuto markdown completo (vincoli fondamentali automaticamente anteposti) antv retrieve "bar chart" --library g2 --content # Recupera competenze e restituisci come JSON antv retrieve "bar chart" --library g2 --output json # Ottieni una competenza tramite il suo ID esatto antv get g2-mark-interval-basic --library g2 # Elenca tutte le competenze disponibili antv list --library g2 --category core # Elenca competenze e restituisci come JSON antv list --output json # Mostra informazioni sulle competenze (vincoli fondamentali da SKILL.md) antv info --library g2 # Mostra informazioni sulle competenze come JSON antv info --library g2 --output json ``` **Utilizzo del comando**: ``` Utilizzo: antv [opzioni] [comando] Strumento CLI per il recupero di competenze di visualizzazione grafica AntV Opzioni: -V, --version mostra il numero di versione -h, --help mostra aiuto per il comando Comandi: retrieve [opzioni] Cerca competenze corrispondenti a una query get [opzioni] Ottieni una competenza tramite il suo ID esatto list [opzioni] Elenca tutte le competenze disponibili info [opzioni] Mostra informazioni sulle competenze da SKILL.md help [comando] mostra aiuto per il comando Opzioni per retrieve: --library Filtra per libreria (es. g2, g6) --topk Numero di risultati da restituire (predefinito: 7) --content Includi corpo del contenuto markdown nei risultati; i vincoli fondamentali (SKILL.md Sezione 1-2) sono sempre anteposti come primo risultato --output Formato di output: json | text (predefinito: "text") ``` > Nota: `--content` antepone sempre i vincoli fondamentali della libreria (Sezione 1 e 2 di SKILL.md, fino al marcatore ``) come primo risultato, assicurando che il modello riceva le regole essenziali insieme ai documenti di riferimento. ### Utilizzo API ```typescript import { retrieve } from '@antv/chart-visualization-skills'; // Solo metadati (nessun contenuto) const skills = retrieve('bar chart', { library: 'g2', topK: 5 }); // Con contenuto markdown completo (vincoli fondamentali automaticamente anteposti come primo risultato) const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true }); // Con contenuto ma senza vincoli fondamentali const skills = retrieve('bar chart', { library: 'g2', topK: 5, content: true, includeInfo: false }); ``` ```typescript retrieve(query: string, options?: RetrieveOptions): Skill[] interface RetrieveOptions { library?: string; // Filtro libreria, es. 'g2' o 'g6' topK?: number; // Numero di risultati (predefinito: 7) content?: boolean; // Includi corpo del contenuto markdown (predefinito: false) includeInfo?: boolean; // Anteponi vincoli fondamentali SKILL.md (predefinito: uguale a content) } ``` | Opzione | Tipo | Predefinito | Descrizione | | :--- | :--- | :--- | :--- | | `library` | `string` | tutti | Filtro libreria (`g2` o `g6`) | | `topK` | `number` | `7` | Numero di risultati | | `content` | `boolean` | `false` | Includi corpo del contenuto markdown | | `includeInfo` | `boolean` | uguale a `content` | Anteponi vincoli fondamentali SKILL.md (Sezione 1-2) come primo risultato | > Note: > - Il recupero predefinito restituisce oggetti risultato leggeri senza il campo `content`. > - `content: true` restituisce il corpo del contenuto markdown (i metadati del frontmatter sono esclusi). > - Quando `includeInfo` è true (il predefinito quando `content: true`), il blocco dei vincoli fondamentali — SKILL.md fino a `` — viene iniettato come primo elemento (id con prefisso `__info__`), assicurando che il modello veda sempre le regole essenziali. ```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; // Corpo completo di SKILL.md (dopo il frontmatter) constraintsContent: string; // Corpo di SKILL.md fino al marcatore ; iniettato da retrieve quando includeInfo: true } ``` | Parametro | Tipo | Predefinito | Descrizione | | :--- | :--- | :--- | :--- | | `library` | `string` | `'g2'` | Libreria per cui ottenere le informazioni (`g2` o `g6`) | ## Licenza Licenza MIT - vedi il file [LICENSE](LICENSE) per i dettagli. ## FAQ ### Cosa sono le competenze di visualizzazione grafica AntV? Le competenze di visualizzazione grafica AntV sono una suite di strumenti e capacità alimentati da AntV, progettati per aiutare gli utenti a visualizzare e analizzare i dati in modo efficiente e accurato. Includono funzionalità per la generazione di grafici, la creazione di infografiche, la visualizzazione di testi narrativi e lo sviluppo di grafici e diagrammi statistici specializzati. ### Quanti tipi di grafici supporta la competenza di visualizzazione grafica? La competenza di visualizzazione grafica fornisce oltre 26 tipi di grafici per la visualizzazione intelligente dei dati, coprendo un'ampia gamma di rappresentazioni di dati tra cui serie temporali, confronti, relazioni e dati geografici. ### Posso creare infografiche con queste competenze? Sì, la competenza di creazione di infografiche ti consente di creare bellissime infografiche basate su contenuti testuali dati. Utilizza AntV Infographic e offre oltre 50 modelli per trasformare i dati in un linguaggio visivo percepibile. ### Cos'è la Visualizzazione di Testi Narrativi (Sintassi T8)? La Visualizzazione di Testi Narrativi (T8) trasforma dati non strutturati in report narrativi semanticamente ricchi utilizzando la sintassi T8, un linguaggio dichiarativo simile a Markdown. È progettata per creare narrazioni di dati con annotazioni di entità, mini grafici e formattazione professionale, adatta per report di analisi e documenti di approfondimento. ### In che modo le competenze di visualizzazione grafica AntV aiutano con l'analisi multidimensionale? La competenza antv-s2-expert funge da assistente allo sviluppo per il motore di tabelle di analisi incrociata multidimensionale S2. Fornisce una guida completa per lavorare con tabelle pivot, fogli di tabella, celle personalizzate e varie altre funzionalità di @antv/s2. ### Ci sono strumenti per generare grafici e diagrammi statistici specifici? Sì, la competenza antv-g6-graph genera codice G6 v5 per visualizzazioni grafiche come grafi di rete, grafi ad albero e diagrammi di flusso. La competenza antv-g2-chart genera codice G2 v5 per grafici statistici come istogrammi, grafici a linee, grafici a torta e diagrammi a dispersione, seguendo le migliori pratiche.