G2

Englisch | 简体中文

G2

G2 ist eine Visualisierungsgrammatik für das Dashboard -Erstellen, die Erkundung und das Geschichtenerzählen.

G2 ist nach Leland Wilkinsons Buch The Grammar of Graphics benannt und wurde zu Beginn von ihm zutiefst inspiriert. Hier sind einige Ressourcen, mit denen Sie beginnen können:

• Einführung - Ein kurzer Überblick und die Motivationen von G2
• Beispiele - eine große Anzahl von Demos, die er lernen und aus dem Kopierpaste
• Tutorials - Interaktive fassorientierte Leitfäden der Kernkonzepte von G2
• API -Referenz - Vollständige Dokumentation für alle Visualisierungskomponenten
• Editor - Ein Tool für intelligente Generation, das auf AntV basiert. Es wird KI verwendet, um die Entwicklungskosten der Datenvisualisierung zu senken, und kann schnell visuelle Diagramme über natürliche Sprache erzeugen.

Merkmale

• Progressive Nutzung - Das Hauptziel von G2 ist es, Ihnen dabei zu helfen, mit kurzen Erklärungen schnell aussagekräftige Visualisierungen zu erhalten, und es färbt den Rest. Sie können jedoch viel mehr für komplexe und fortschrittliche Situationen konfigurieren.
• Deklarative API - Wir verwenden eine funktionale deklarative API, um die Diagrammoptionen programmatisch anzugeben, was zu einer besseren Wiederverwendung von Logik und einer flexibleren Code -Organisation beiträgt.
• Hohe Erweiterbarkeit - Um bestimmte Bedürfnisse zu erfüllen, bietet G2 einen bequemen und konsistenten Mechanismus, um alles zu erweitern, was Sie sich vorstellen können, ob eine Skala, eine Transformation, eine Marke usw. Sie können sogar ein brandneues Visualisierungstool basierend auf diesem Mechanismus anpassen.
• Umfassende Grammatik - G2 lehnt eine Diagramm -Typologie zugunsten von Markierungen, Transformationen, Skalen, Koordinaten und Kompositionen ab. Zusätzlich zu statischen visuellen Darstellungen ist es möglich, datengesteuerte Animationen zu deklarieren und gut gestaltete actionbasierte Interaktionen auch auf Plots anzuwenden.
• Leistungsstarker Renderer - Es gibt einen leistungsstarken Renderer G unter G2, um webbasierte Visualisierungen mithilfe von Leinwand, SVG oder WebGL zu generieren. Die zahlreichen Plugins haben G2 von der Rendering-Charts mit neuartigen Stilen wie handgezeichnet und das Ökosystem von D3 vollständig umarmen.

? Erste Schritte

G2 wird normalerweise über einen Paketmanager wie NPM oder Garn installiert.

$ npm install @antv/g2

$ yarn add @antv/g2

Das Diagrammobjekt kann dann aus G2 importiert werden.

 < div id =" container " > </ div > 

 import { Chart } from '@antv/g2' ;

// A tabular data to be visualized.
const data = [
  { genre : 'Sports' , sold : 275 } ,
  { genre : 'Strategy' , sold : 115 } ,
  { genre : 'Action' , sold : 120 } ,
  { genre : 'Shooter' , sold : 350 } ,
  { genre : 'Other' , sold : 150 } ,
] ;

// Instantiate a new chart.
const chart = new Chart ( {
  container : 'container' ,
} ) ;

// Specify visualization.
chart
  . interval ( ) // Create an interval mark and add it to the chart.
  . data ( data ) // Bind data for this mark.
  . encode ( 'x' , 'genre' ) // Assign genre column to x position channel.
  . encode ( 'y' , 'sold' ) // Assign sold column to y position channel.
  . encode ( 'color' , 'genre' ) ; // Assign genre column to color channel.

// Render visualization.
chart . render ( ) ;

Wenn alles gut geht, können Sie das folgende schöne Bar -Diagramm erhalten!

? Ökosystem

• G2 -Reaktion - Die leichte Reaktionskomponente für G2 ohne zusätzliche Funktionen.
• G2-Extensionen-Der One-Stop-Shop für offizielle G2-Erweiterungen wie 3D-Visualisierung, automatisierte visuelle Analyse usw.
• Ant-Design-Charts-Die React-Diagrammbibliothek basierend auf G2, G6, X6, L7Plot.
• Mehr...

? Beitragen

• Probleme - Melden Sie Fehler oder fordern Sie Funktionen an
• Leitfaden beitragen - Helfen Sie beim Aufbau von G2
• Diskussionen - Diskussion über Github oder in der Dingtalk -Gruppe (30233731, 35686967, 44788198)

? Lizenz

MIT@Antv.