AntV G2 Chartvon antvis

AntV G2 Chart Skill.

Nutzen Sie die G2-v5-Grammatik bewusst, statt Syntax anderer Diagrammbibliotheken zu vermischen.

Data Visualization
Diagramme
JavaScript

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · AntV G2 ChartSKILL.md

Aufgabe Data Visualization Ergebnis • Eine vollständige G2-v5-Diagrammspezifikation mit Container- und Render-Setup. • Korrigierte Entscheidungen zu Mark, Encoding, Transform und Komposition. • Eine diagrammspezifische Prüfung von Beschriftungen, Farbsemantik, Tooltips und Datenbedeutung. Vor dem Start Erfordert @antv/g2 v5 oder das dokumentierte Browser-Bundle. Der optionale Abruf von Referenzen nutzt den externen AntV-Kontextdienst.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

Diagramme im G2-v5-Spec-Modus schreiben

Eine Implementierungsanleitung für G2 v5, die deklarative Spec-Regeln, gezielten Referenzabruf, Vermeidung häufiger Fehler und datenbewusste visuelle Entscheidungen kombiniert.

Quellenbasierter AblaufKein Ausführungs-Benchmark

Die Arbeitsweise

AntV G2 Chart konzentriert sich auf die Diagrammimplementierung mit @antv/g2 v5. Generierte Beispiele beginnen mit einer vollständigen deklarativen Spezifikation, und der Skill deckt typische Fehlerquellen ab, etwa fehlende Container, falsche Mark-Namen, Label-Eigenschaften im Singular und falsch platzierte Transforms. Außerdem bietet er einen Dokumentations-Endpunkt für gezielte G2-Konzepte und -Beispiele.

Besonders klar ist die Quelle bei der Komposition mehrerer Marks: Eine Linie und Punkte gehören in die children einer View, statt den Root-Typ wiederholt zu ändern. Die visuellen Hinweise trennen die Standardwerte der Engine von den Überschreibungen, die der Skill wählt, und verlangen, Einheiten, Quellenangaben und Titel nur zu ergänzen, wenn ihre Bedeutung bekannt ist. Er ist kein allgemeines AntV-Werkzeug für Graphen, Diagrammeditoren oder Pivot-Tabellen.

Erwartete Ergebnisse

Eine vollständige G2-v5-Diagrammspezifikation mit Container- und Render-Setup.
Korrigierte Entscheidungen zu Mark, Encoding, Transform und Komposition.
Eine diagrammspezifische Prüfung von Beschriftungen, Farbsemantik, Tooltips und Datenbedeutung.

Beispiel-Briefing ansehen

Vom Briefing zur Prüfung

01
Daten und Absicht lesen
Felder, Einheiten, Vergleichsbedarf und die Diagrammfrage bestimmen, ohne fehlende Semantik zu erfinden.
02
Passende Referenz abrufen
Den dokumentierten G2-Abrufdienst nutzen, wenn API oder Details zum Diagrammtyp bestätigt werden müssen.
03
Vollständige Spec erstellen
Gültige Marks und Kanäle wählen, Transform-Arrays verwenden und Overlays innerhalb einer View komponieren.
04
Rendern und prüfen
Tatsächliche Marks, Beschriftungen, Legenden, Themes und das Verhalten bei dichten Daten im Zielcontainer prüfen.

02 Einsatzbereiche

Wann der Einsatz sinnvoll ist

Erfordert @antv/g2 v5 oder das dokumentierte Browser-Bundle. Der optionale Abruf von Referenzen nutzt den externen AntV-Kontextdienst.

Gut geeignet

G2-v5-ImplementierungNützlich, um Diagramme im deklarativen Spezifikationsstil der Bibliothek zu erstellen.
Migration und DebuggingHilft, Syntax aus älteren G2-Versionen oder anderen Visualisierungsgrammatiken zu erkennen.
Diagramme mit mehreren MarksVerdeutlicht, wie unabhängige Overlays komponiert werden sollten.

Zu prüfende Grenzen

Nicht jede AntV-BibliothekG6-Netzwerke, X6-Diagramme und S2-Pivot-Tabellen liegen außerhalb des angegebenen Umfangs.
Rendering ist keine DatenvalidierungKorrektes Rendering belegt nicht, dass Daten, Aggregation oder Interpretation gültig sind.
Referenzen benötigen NetzzugangDer dokumentierte Abruf-Endpunkt ist ein externer Dienst, dessen Verfügbarkeit bei Nutzung geprüft werden muss.

Diese Eingaben mitbringen

Datensatz und FeldbedeutungenGeben Sie tatsächliche Werte, Typen, Einheiten und zulässige Aggregationen an.
VisualisierungsfrageErklären Sie, was das Diagramm vergleichen oder zeigen soll.
LaufzeitkontextNennen Sie G2-Version, Container, Theme und Interaktionsanforderungen.

03 Wichtige Entscheidungen

Entscheidungen, auf die es ankommt

Vollständige Anfangsspezifikationen
Eine vollständige Spec lässt ein generiertes Diagramm besser nachvollziehen als eine Folge partieller Root-Änderungen.
Semantische Farbe
Farbe sollte eine sinnvolle Gruppe oder einen Status kodieren, nicht einen Regenbogen in einen Vergleich mit nur einer Reihe bringen.
Standardwerte und Überschreibungen sind verschieden
Die Quelle unterscheidet gewählte Werte für Radius, Breite und Deckkraft vom Engine-Verhalten, das sie überschreiben.

04 Beispielbriefing

Mit einem fokussierten Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfen Sie das Setup des Skills, bevor Sie es verwenden.

Setup prüfen

Installieren Sie den Skill über den unterstützten Weg des Repositories und fügen Sie @antv/g2 der Zielanwendung nach Bedarf hinzu. Das Diagrammpaket und der Agent-Skill sind getrennte Abhängigkeiten.

Upstream-Quelldatei

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

Erfordert @antv/g2 v5 oder das dokumentierte Browser-Bundle. Der optionale Abruf von Referenzen nutzt den externen AntV-Kontextdienst.

Mit einem Ergebnis beginnen

Passen Sie Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor Sie den Skill ausführen.

Beispiel-Briefing

Nutze antv-g2-chart, um aus den gelieferten monatlichen Umsatzdaten ein G2-v5-Diagramm zu erstellen. Lege eine Linie und Punkte mit view plus children übereinander, behalte die gelieferten Währungseinheiten bei und verwende eine vollständige Anfangsspezifikation mit explizitem Container und render-Aufruf. Vermeide redundante Farblegenden und prüfe dichte Beschriftungen, bevor du sie hinzufügst.

Ergebnis prüfen

Prüfen Sie die tatsächliche Ausgabe anhand dieser beobachtbaren Kriterien.

Das Diagramm hat einen expliziten Container und einen render-Aufruf.
Overlay-Marks sind als unabhängige children einer View komponiert.
Beschriftungen, Einheiten und Farbkodierungen entsprechen der Bedeutung der gelieferten Daten.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agents. Dieser Eintrag bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, fixierte Quellversion. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Eigentümer: antvis
Repository: antvis/chart-visualization-skills
Skill-Datei: skills/antv-g2-chart/SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-07 · a105fa12a9fa

Redaktionelle Quellenzusammenfassung

Eine Implementierungsanleitung für G2 v5, die deklarative Spec-Regeln, gezielten Referenzabruf, Vermeidung häufiger Fehler und datenbewusste visuelle Entscheidungen kombiniert.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Beliebtheitssignal, weder Skill-Nutzung noch Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Kann ich Marks überlagern, indem ich den Root-Typ zweimal ändere?

Die Quelle sagt nein: Das aktualisiert den Root-Mark, statt unabhängige Overlays zu erzeugen. Verwenden Sie eine View mit children.

Deckt er G6-Netzwerkdiagramme ab?

Nein. Die Quelle schließt G6-, X6- und S2-Aufgaben für diesen G2-Diagramm-Skill ausdrücklich aus.

Sind die vorgeschlagenen Stilwerte G2-Engine-Standardwerte?

Nicht alle. Die Quelle unterscheidet ihre empfohlenen expliziten Überschreibungen von den eigenen Standardwerten der Engine.

OpenDesign

Schaffen Sie Raum für die nächste Design-Iteration.

Halten Sie Briefing, Quellenmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfen Sie das Setup des Skills, bevor Sie ihn in Ihren Workflow aufnehmen.

OpenDesign herunterladen Design-Skills durchsuchen