G2 다운로드 G2 소스 코드 다운로드

G2

기타 소스코드

5.2.7

다운로드

영어 | 简体中文

G2

G2는 대시 보드 빌딩, 데이터 탐색 및 스토리 텔링을위한 시각화 문법입니다.

상태 빌드 상태

G2는 Leland Wilkinson의 저서 The Grammar of Graphics의 이름을 따서 명명되었으며 처음에는 그에 크게 영감을 받았습니다. 다음은 시작할 수있는 몇 가지 리소스입니다.

소개 - 간단한 개요와 G2의 동기
예제 - 배우고 복사 할 수있는 많은 데모
튜토리얼 - G2의 핵심 개념의 대화식 케이스 중심 가이드
API 참조 - 모든 시각화 구성 요소에 대한 전체 문서
편집자 - Antv를 기반으로 한 지능형 세대 도구. AI를 사용하여 데이터 시각화의 개발 비용을 줄이고 자연어를 통해 시각적 차트를 빠르게 생성 할 수 있습니다.

특징

점진적 사용 - G2의 주요 목표는 간결한 선언으로 의미있는 시각화를 빠르게 얻는 데 도움이되며 나머지는 유추하는 것입니다. 그러나 복잡하고 고급 상황에 대해 훨씬 더 많은 것을 구성 할 수 있습니다.
선언 API- 기능 선언 API를 사용하여 프로그래밍 방식으로 차트 옵션을 지정하여 더 나은 논리 재사용 및보다 유연한 코드 구성에 기여합니다.
높은 확장 성 - 특정 요구를 충족시키기 위해 G2는 척도, 변환, 마크 등을 상상할 수있는 모든 것을 확장 할 수있는 편리하고 일관된 메커니즘을 제공합니다. 이 메커니즘에 따라 새로운 시각화 도구를 사용자 정의 할 수도 있습니다.
포괄적 인 문법 -G2는 마크, 변환, 스케일, 좌표 및 구성에 유리한 차트 유형을 거부합니다. 정적 시각적 표현 외에도 데이터 중심 애니메이션을 선언하고 잘 설계된 액션 기반 상호 작용을 플롯에도 적용 할 수 있습니다.
강력한 렌더러 - 캔버스, SVG 또는 WebGL을 사용하여 웹 기반 시각화를 생성하기 위해 G2 아래에 강력한 렌더러 G가 있습니다. 많은 플러그인은 손으로 그린 및 D3의 생태계를 완전히 수용하는 것과 같은 새로운 스타일로 렌더링 차트에서 G2에 도움이됩니다.

? 시작하기

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