G2

ภาษาอังกฤษ | 简体中文

G2

G2 เป็นไวยากรณ์การสร้างภาพข้อมูลสำหรับการสร้างแผงควบคุมการสำรวจข้อมูลและการเล่าเรื่อง

G2 ได้รับการตั้งชื่อตามหนังสือของ Leland Wilkinson The Grammar of Graphics และได้รับแรงบันดาลใจอย่างลึกซึ้งในตอนแรก นี่คือแหล่งข้อมูลบางส่วนที่คุณสามารถเริ่มต้นด้วย:

• บทนำ - ภาพรวมสั้น ๆ และแรงจูงใจของ G2
• ตัวอย่าง - การสาธิตจำนวนมากเพื่อเรียนรู้จากและคัดลอกวาง
• บทช่วยสอน - คู่มือที่ขับเคลื่อนด้วยกรณีแบบโต้ตอบของแนวคิดหลักของ G2
• การอ้างอิง API - เอกสารที่สมบูรณ์สำหรับส่วนประกอบการสร้างภาพทั้งหมด
• Editor - เครื่องมือสร้างอัจฉริยะที่ใช้ ANTV มันใช้ AI เพื่อลดต้นทุนการพัฒนาของการสร้างภาพข้อมูลและสามารถสร้างแผนภูมิภาพผ่านภาษาธรรมชาติได้อย่างรวดเร็ว

คุณสมบัติ

• การใช้งานแบบก้าวหน้า - วัตถุประสงค์หลักของ G2 คือการช่วยให้คุณได้รับการสร้างภาพข้อมูลที่มีความหมายอย่างรวดเร็วด้วยการประกาศที่กระชับและทำให้ส่วนที่เหลืออยู่ แต่คุณสามารถกำหนดค่ามากขึ้นสำหรับสถานการณ์ที่ซับซ้อนและขั้นสูง
• Declarative API - เราใช้ API ที่ใช้งานได้เพื่อระบุตัวเลือกแผนภูมิในรูปแบบการเขียนโปรแกรมซึ่งมีส่วนช่วยในการใช้ตรรกะที่ดีขึ้นและองค์กรรหัสที่ยืดหยุ่นมากขึ้น
• การขยายความสามารถสูง - เพื่อตอบสนองความต้องการเฉพาะ G2 ให้กลไกที่สะดวกและสอดคล้องกันเพื่อขยายทุกสิ่งที่คุณสามารถจินตนาการได้ว่าสเกลการแปลงเครื่องหมาย ฯลฯ คุณสามารถปรับแต่งเครื่องมือสร้างภาพข้อมูลใหม่ล่าสุดตามกลไกนี้
• ไวยากรณ์ที่ครอบคลุม - G2 ปฏิเสธการพิมพ์แผนภูมิในความโปรดปรานของเครื่องหมายการแปลงเครื่องชั่ง, พิกัดและองค์ประกอบ นอกเหนือจากการแสดงภาพแบบสแตติกแล้วยังเป็นไปได้ที่จะประกาศภาพเคลื่อนไหวที่ขับเคลื่อนด้วยข้อมูลและใช้การโต้ตอบตามแอ็คชั่นที่ออกแบบมาอย่างดีกับพล็อตเช่นกัน
• Renderer ที่ทรงพลัง - มีตัวเรนเดอร์ G ที่ทรงพลังภายใต้ G2 เพื่อสร้างการสร้างภาพข้อมูลบนเว็บโดยใช้ Canvas, SVG หรือ WebGL ปลั๊กอินมากมายที่ได้รับประโยชน์จาก G2 จากการแสดงผลชาร์ตที่มีรูปแบบใหม่ ๆ เช่นการวาดด้วยมือและการโอบกอดระบบนิเวศของ D3 อย่างเต็มที่

- เริ่มต้น

G2 มักจะติดตั้งผ่านตัวจัดการแพ็คเกจเช่น NPM หรือเส้นด้าย

$ 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 อย่างเป็นทางการเช่นการสร้างภาพ 3 มิติ, การวิเคราะห์ภาพอัตโนมัติ ฯลฯ
• ant-design-charts-ไลบรารีแผนภูมิ React ซึ่งขึ้นอยู่กับ G2, G6, X6, L7Plot
• มากกว่า...

- การบริจาค

• ปัญหา - รายงานข้อบกพร่องหรือคุณสมบัติการร้องขอ
• คู่มือการสนับสนุน - ช่วยสร้าง G2
• การอภิปราย - อภิปรายเกี่ยวกับ GitHub หรือในกลุ่ม Dingtalk (30233731, 35686967, 44788198)

- ใบอนุญาต

mit@antv