G2

Anglais | 简体中文

G2

G2 est une grammaire de visualisation pour la construction du tableau de bord, l'exploration des données et la narration.

G2 porte le nom du livre de Leland Wilkinson , The Grammar of Graphics , et a été profondément inspiré par elle au tout début. Voici quelques ressources avec lesquelles vous pouvez commencer:

• Introduction - Un bref aperçu et les motivations de G2
• Exemples - Un grand nombre de démos à apprendre et à copier-coller
• Tutoriels - Guides interactifs axés sur les cas des concepts principaux de G2
• Référence de l'API - Documentation complète pour tous les composants de visualisation
• Éditeur - Un outil de génération intelligente basé sur ANTV. Il utilise l'IA pour réduire le coût de développement de la visualisation des données et peut rapidement générer des graphiques visuels par le langage naturel.

Caractéristiques

• Utilisation progressive - L'objectif principal de G2 est de vous aider à obtenir des visualisations significatives rapidement avec des déclarations concises et elle déduit le reste. Mais vous pouvez configurer beaucoup plus pour des situations complexes et avancées.
• API déclarative - Nous utilisons une API déclarative fonctionnelle pour spécifier les options de graphique de manière programmatique, ce qui contribue à une meilleure réutilisation logique et à une organisation de code plus flexible.
• Extensibilité élevée - Pour satisfaire les besoins spécifiques, G2 fournit un mécanisme pratique et cohérent pour étendre tout ce que vous pouvez imaginer, que ce soit une échelle, une transformation, une marque, etc.,. Vous pouvez même personnaliser un tout nouvel outil de visualisation basé sur ce mécanisme.
• Grammaire complète - G2 rejette une typologie du graphique en faveur des marques, des transformations, des échelles, des coordonnées et des compositions. En plus des représentations visuelles statiques, il est possible de déclarer des animations basées sur les données et d'appliquer également des interactions basées sur l'action bien conçues aux intrigues.
• Rendu puissant - Il existe un puissant rendu G sous G2 pour générer des visualisations Web à l'aide de Canvas, SVG ou WebGL. Les beaucoup de plugins, il profite à G2 de rendre les graphiques avec de nouveaux styles tels que dessinés à la main et embrasser pleinement l'écosystème de D3.

? Commencer

G2 est généralement installé via un gestionnaire de packages tel que NPM ou YARN.

$ npm install @antv/g2

$ yarn add @antv/g2

L'objet de graphique peut alors être importé de G2.

 < 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 ( ) ;

Si tout se passe bien, vous pouvez obtenir le joli graphique à barres suivant!

? Écosystème

• G2-REACT - Le composant de réact léger pour G2, sans fonctionnalités supplémentaires.
• G2-Extensions - La boutique à guichet unique pour les extensions G2 officielles, telles que la visualisation 3D, l'analyse visuelle automatisée, etc.
• Ant-Design-Charts - La bibliothèque du graphique React, basée sur G2, G6, X6, L7Plot.
• Plus...

? Contributif

• Problèmes - Signaler des bogues ou des fonctionnalités de demande
• Guide de contribution - Aide à construire G2
• Discussions - Discuter sur Github ou dans Dingtalk Group (30233731, 35686967, 44788198)

? Licence

Mit @ antv.