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は、マーク、変換、スケール、座標、および構成を支持してチャート類型を拒否します。静的な視覚表現に加えて、データ駆動型のアニメーションを宣言し、適切に設計されたアクションベースの相互作用をプロットに適用することも可能です。
強力なレンダラー-G2の下には、Canvas、SVG、またはWebGLを使用してWebベースの視覚化を生成する強力なレンダラーGがあります。手描きやD3の生態系を完全に採用するなどの新しいスタイルでチャートをレンダリングすることで、G2を備えたプラグインがたくさんあります。

？はじめる

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