English | ็ฎไฝไธญๆ
G2
Website โข Tutorial Docs โข Blog โข G2Plot
G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, you can describe the visual appearance and interactive behavior of a visualization just by one statement, and generate web-based views using Canvas or SVG.
๐บ Live Demos
โจ Features
๐ฏ Stable grammar of graphics: enable to draw all kinds of charts by mapping data to graphics.๐คฉ New grammar of interaction: interaction behaviors combined with Trigger and Action mechanisms are used to exploring data.๐ฆ Advanced View module: with the ability to develop customized multi-dimension data analysis graphics.๐ฌ Dual-engine rendering: with the ability to switch Canvas and SVG freely.๐ Visual components: interaction-oriented, elegant experience.๐ก Fully embrace TypeScript: Complete type definition files are provided.
๐ฆ Installation
$ npm install @antv/g2
๐จ Getting Started
Before drawing we need to prepare a DOM container for G2:
<div id="c1"></div>
import { Chart } from '@antv/g2';
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// Step 1: Create a Chart instance.
const chart = new Chart({
container: 'c1', // Specify chart container ID
width: 600, // Specify chart width
height: 300, // Specify chart height
});
// Step 2: Load the data.
chart.data(data);
// Step 3: Declare the grammar of graphics, draw column chart.
chart.interval().position('genre*sold');
// Step 4: Render chart.
chart.render();
โจ๏ธ Development
# Install dependencies
$ npm install
# Run test cases
$ npm run test
# Open electron to run test cases and listen to file changes
$ npm run test-live
# Run CI
$ npm run ci
# Run website
$ npm start
๐ท๏ธ Releases
You can also use G2Plot which is an interactive and responsive charting library based on G2. You can easily make superior statistical plots through a few lines of code.
๐ค How to Contribute
Please let us know how can we help. Do check out issues for bug reports or suggestions first.
To become a contributor, please follow our contributing guide.
๐ง Contact us
DingTalk Group: 30233731