AntV G2 Chartdi antvis

AntV G2 Chart Skill.

Usa con consapevolezza la grammatica di G2 v5, invece di mescolare la sintassi di altre librerie di grafici.

Data Visualization
Grafici
JavaScript

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · AntV G2 ChartSKILL.md

Attività Data Visualization Produce • Una specifica completa di grafico G2 v5 con configurazione di container e rendering. • Scelte corrette di mark, encoding, trasformazioni e composizione. • Una revisione specifica del grafico su etichette, semantica dei colori, tooltip e significato dei dati. Prima di iniziare Richiede @antv/g2 v5 o il bundle per browser documentato. Il recupero facoltativo dei riferimenti usa il servizio di contesto esterno AntV.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

Scrivere grafici in modalità spec di G2 v5

Una guida all'implementazione di G2 v5 che combina regole di specifica dichiarativa, recupero mirato dei riferimenti, prevenzione degli errori comuni e scelte visive basate sui dati.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

AntV G2 Chart si concentra sull'implementazione di grafici con @antv/g2 v5. Parte da una specifica dichiarativa completa per gli esempi generati e copre i punti di errore più comuni, come container mancanti, nomi di mark errati, proprietà di etichetta al singolare e trasformazioni mal posizionate. Fornisce anche un endpoint di recupero della documentazione per concetti ed esempi G2 specifici.

La fonte è particolarmente chiara sulla composizione di più mark: una linea e dei punti vanno inseriti nei children di una view, anziché ripetere cambi del tipo alla radice. Le sue indicazioni visive distinguono i default del motore dagli override scelti dalla Skill e chiedono di aggiungere unità, etichette della fonte e titoli solo quando il loro significato è noto. Non è uno strumento AntV generico per grafi, editor di diagrammi o tabelle pivot.

Risultati attesi

Una specifica completa di grafico G2 v5 con configurazione di container e rendering.
Scelte corrette di mark, encoding, trasformazioni e composizione.
Una revisione specifica del grafico su etichette, semantica dei colori, tooltip e significato dei dati.

Vedi il brief di esempio

Dal brief alla revisione

01
Leggi i dati e l'intento
Identifica campi, unità, esigenze di confronto e la domanda del grafico senza inventare semantiche mancanti.
02
Recupera il riferimento pertinente
Usa il servizio di recupero G2 documentato quando i dettagli su API o tipo di grafico richiedono conferma.
03
Costruisci una spec completa
Scegli mark e canali validi, usa array di trasformazioni e componi gli overlay all'interno di una view.
04
Rendering e revisione
Controlla mark, etichette, legende, temi e comportamento con dati densi effettivi nel container di destinazione.

02 Quando usarlo

Quando usarla

Richiede @antv/g2 v5 o il bundle per browser documentato. Il recupero facoltativo dei riferimenti usa il servizio di contesto esterno AntV.

Adatta a

Implementazione di G2 v5Utile per creare grafici con lo stile di specifica dichiarativa della libreria.
Migrazione e debugAiuta a individuare sintassi copiata da usi più vecchi di G2 o da altre grammatiche di visualizzazione.
Grafici con più markChiarisce come comporre overlay indipendenti.

Limiti da verificare

Non tutte le librerie AntVReti G6, diagrammi X6 e tabelle pivot S2 non rientrano nell'ambito dichiarato.
Il rendering non convalida i datiUn rendering corretto non dimostra che i dati, l'aggregazione o l'interpretazione siano validi.
I riferimenti richiedono accesso alla reteL'endpoint di recupero documentato è un servizio esterno, di cui va verificata la disponibilità quando lo si usa.

Cosa fornire

Dataset e significato dei campiFornisci valori reali, tipi, unità ed eventuali aggregazioni consentite.
Domanda di visualizzazioneSpiega cosa il grafico deve confrontare o rivelare.
Contesto di esecuzioneIndica versione di G2, container, tema e requisiti di interazione.

03 Decisioni importanti

Decisioni che contano

Specifiche iniziali complete
Una spec completa rende un grafico generato più facile da comprendere rispetto a una sequenza di modifiche parziali alla radice.
Colore semantico
Il colore deve codificare un gruppo o uno stato significativo, non aggiungere un arcobaleno a un confronto con una sola serie.
Default e override sono distinti
La fonte distingue i valori scelti di raggio, larghezza e opacità dal comportamento del motore che sostituiscono.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Installa la Skill dal percorso supportato del repository e aggiungi @antv/g2 all'applicazione di destinazione come appropriato. Il pacchetto del grafico e la Skill dell'agente sono dipendenze separate.

File sorgente originale

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

Richiede @antv/g2 v5 o il bundle per browser documentato. Il recupero facoltativo dei riferimenti usa il servizio di contesto esterno AntV.

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa antv-g2-chart per creare un grafico G2 v5 dai dati di ricavi mensili forniti. Sovrapponi una linea e dei punti con view più children, mantieni le unità di valuta fornite e usa una spec iniziale completa con container esplicito e chiamata di render. Evita legende di colore ridondanti e controlla le etichette dense prima di aggiungerle.

Esamina il risultato

Confronta l'output effettivo con questi criteri osservabili.

Il grafico ha un container esplicito e una chiamata di render.
I mark in overlay sono composti come children indipendenti di una view.
Etichette, unità e encoding dei colori corrispondono al significato dei dati forniti.

OpenDesign offre uno spazio di lavoro di design locale per gli agenti di coding. Questa scheda non significa che la skill sia inclusa, né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte: antvis
Repository: antvis/chart-visualization-skills
File della skill: skills/antv-g2-chart/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · a105fa12a9fa

Sintesi editoriale della fonte

Una guida all'implementazione di G2 v5 che combina regole di specifica dichiarativa, recupero mirato dei riferimenti, prevenzione degli errori comuni e scelte visive basate sui dati.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Posso sovrapporre i mark cambiando due volte il tipo alla radice?

La fonte dice di no: così si aggiorna il mark radice invece di creare overlay indipendenti. Usa una view con children.

Copre i diagrammi di rete G6?

No. La fonte esclude esplicitamente dalle attività di questa Skill per grafici G2 quelle su G6, X6 e S2.

I valori di stile suggeriti sono i default del motore G2?

Non tutti. La fonte distingue gli override espliciti che raccomanda dai default propri del motore.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiali di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design