تنزيل G2 - تنزيل رمز المصدر G2

G2

شفرة المصدر الأخرى

5.2.7

تنزيل

الإنجليزية | 简体中文

G2

G2 هو قواعد التصور لبناء لوحة القيادة واستكشاف البيانات ورواية القصص.

بناء الحالة

تم تسمية G2 على اسم كتاب Leland Wilkinson The Grammar of Graphics وكان مستوحى من ذلك في البداية. فيما يلي بعض الموارد التي يمكنك أن تبدأ بها:

مقدمة - نظرة عامة موجزة ودوافع G2
أمثلة - عدد كبير من العروض التوضيحية التي يجب التعلم منها ونسخها
البرامج التعليمية - أدلة تفاعلية تعتمد على الحالات لمفاهيم G2 الأساسية
مرجع API - وثائق كاملة لجميع مكونات التصور
محرر - أداة جيل ذكية تستند إلى ANTV. إنه يستخدم الذكاء الاصطناعي لتقليل تكلفة تطوير تصور البيانات ، ويمكن أن يولد بسرعة مخططات مرئية من خلال اللغة الطبيعية.

سمات

الاستخدام التدريجي - الهدف الرئيسي من G2 هو مساعدتك في الحصول على تصورات ذات مغزى بسرعة مع إعلانات موجزة ويؤدي الباقي. ولكن يمكنك تكوين المزيد من المواقف المعقدة والمتقدمة.
API التصريحي - نستخدم واجهة برمجة تطبيقات تصريحية وظيفية لتحديد خيارات المخطط بطريقة برمجية ، والتي تساهم في إعادة استخدام المنطق بشكل أفضل ومؤسسة رمز أكثر مرونة.
قابلية عالية - لتلبية الاحتياجات المحددة ، يوفر G2 آلية مريحة ومتسقة لتوسيع كل ما يمكنك تخيله ، سواء كان المقياس أو التحويل أو العلامة وما إلى ذلك. يمكنك حتى تخصيص أداة تصور جديدة تعتمد على هذه الآلية.
القواعد الشاملة - G2 يرفض تصنيف الرسم البياني لصالح العلامات والتحويلات والمقاييس والإحداثيات والتراكيب. بالإضافة إلى التمثيلات المرئية الثابتة ، من الممكن إعلان الرسوم المتحركة التي تعتمد على البيانات وتطبيق التفاعلات القائمة على الإجراءات المصممة جيدًا على المؤامرات أيضًا.
العارض القوي - يوجد عارض قوي تحت G2 لإنشاء تصورات قائمة على الويب باستخدام قماش أو SVG أو WebGL. تفيد الكثير من الإضافات التي تستفيد منها G2 من تقديم الرسوم البيانية مع أنماط جديدة مثل المرسومة باليد وتبني النظام الإيكولوجي لـ D3 بالكامل.

؟ ابدء

عادة ما يتم تثبيت G2 عبر مدير الحزمة مثل NPM أو YARN.

$ npm install @antv/g2

$ yarn add @antv/g2

يمكن بعد ذلك استيراد كائن الرسم البياني من 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 ( ) ;

إذا سارت الأمور على ما يرام ، يمكنك الحصول على مخطط الشريط الجميل التالي!

؟ النظام البيئي

G2 -React - مكون رد الفعل خفيف الوزن لـ G2 ، دون ميزات إضافية.
G2-Extensions-المتجر التوقف للملحقات الرسمية G2 ، مثل التصور ثلاثي الأبعاد ، والتحليلات المرئية الآلية ، إلخ.
ANT-Design-Charts-مكتبة الرسم البياني React ، استنادًا إلى G2 و G6 و X6 و L7Plot.
أكثر...

؟ المساهمة

المشكلات - الإبلاغ عن الأخطاء أو ميزات الطلب
دليل المساهمة - مساعدة في بناء G2
مناقشات - ناقش على Github أو في مجموعة DingTalk (30233731 ، 35686967 ، 44788198)