• Stars
    star
    2,539
  • Rank 18,074 (Top 0.4 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🍡 An interactive and responsive charting library based on G2.

English | 简体中文

G2Plot

基于 G2 4.x 版本二次封装的图表库。

Version NPM downloads Latest commit build Status coverage Percentage of issues still open Average time to resolve an issue

📢 新版本 G2 v5 已经发布,未来不会基于 G2 v5 封装 G2Plot v3 版本,但是可以使用 Ant Design Charts 代替。

网站快速开始博客AntV ThemeSet

一套简单、易用、并具备一定扩展能力和组合能力的统计图表库,基于图形语法理论搭建而成,『G2Plot』中的 G2 即意指图形语法 (the Grammar of Graphics),同时也致敬了 ggplot2。我们想做的事有三件:

  1. 使用户不用成为可视化专家也能够轻松制作出优雅美观的图表。
  2. 保证图表能够经受得起业务的检验,在真实的场景中易用、好用。
  3. 探索统计图表的更多可能性,使统计图表变得更好玩、更酷。

✨ 特性

📦 开箱即用、体验优雅的高质量统计图表

G2Plot 呈现给用户的是一套提炼自企业级产品的视觉语言和设计规范。不仅对图表的整体视觉样式进行了优化,并且针对每一个图表自身的特点,沉淀出一套最佳配置,保证用户能够通过最少的配置制作出优雅、标准的图表。

📊 响应式:让图表更聪明

在现实的图表应用场景中,一个棘手的难题是图表的展示空间往往并不足够显示图表的数据量,造成极值情况下文本的重叠遮挡、内容无法自适应、内容裁剪等问题。G2Plot 借鉴宽容性设计的思想,在图表的信息密度过高时,对图表辅助信息进行抽稀,保证图表主要信息的展示和基本可读性。

🔳 向前一步:会讲故事的图表

在 G2Plot 体系下,图表不仅仅只是各不相关的实例,图层概念的引入提供了多图表组合、叠加、联动,共同讲述一个数据故事的可能性。未来,我们还将探索统计图表转化信息图的可能性,丰富统计图表的表现能力。

📦 安装

$ npm install @antv/g2plot

🔨 使用

<div id="container"></div>
import { Bar } from '@antv/g2plot';

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'sales',
  yField: 'year',
  seriesField: 'year',
});

bar.render();

🤝 参与贡献

我们非常欢迎你的贡献!无论是 issue 还是 PR。

反馈问题请先阅读 issues

提交代码请遵循 贡献指引

感谢下面这些贡献者 (emoji key):


Visiky

💻

hustcc

💻

Joel Alan

💻

刘珍莹

💻

zqlu

💻

arcsin1

💻

被雨水过滤的空气

💻

banli

💻

xi li

💻

DarrenPei

💻

MiniPear

💻

connono

💻

于向前

💻

afc163

💻

Martin Jul

💻

jhwong

💻

Jingsong Gao

💻

Mr小刘

💻

ntscshen

💻

yiminanci

💻

ai-qing-hai

💻

xrkffgg

💻

Dawnlck

💻

Karis

💻

Mayne

💻

Plortinus

💻

Shanjie Chen

💻

Yang Libin

💻

beewolf233

💻

lqzhgood

💻

neoddish

💻

stack-stark

💻

vector

💻

嘤嘤嘤

💻

琚致远

💻

14

💻

🔗 相关链接

ChartCube - 基于 G2Plot 的在线图表制作工具,交互简单,一键导出图表代码!

许可证

MIT

More Repositories

1

G2

📊 The concise and progressive visualization grammar.
TypeScript
12,061
star
2

G6

♾ A Graph Visualization Framework in JavaScript.
TypeScript
10,958
star
3

F2

📱📈An elegant, interactive and flexible charting library for mobile.
JavaScript
7,884
star
4

X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
TypeScript
5,703
star
5

L7

🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine.
TypeScript
3,594
star
6

S2

⚡️ A practical visualization library for tabular analysis.
TypeScript
1,470
star
7

AVA

🤖 A framework for automated visual analytics.
TypeScript
1,333
star
8

wx-f2

F2 的微信小程序
JavaScript
1,276
star
9

G

💥 A flexible rendering engine for visualization.
TypeScript
1,046
star
10

Graphin

🌌 A React toolkit for graph visualization based on G6.
TypeScript
1,002
star
11

G6VP

G6VP is an online visual analysis tool for graphs and a low-code platform for building graph applications.
TypeScript
812
star
12

XFlow

React component for building interactive diagrams.
TypeScript
588
star
13

g6-editor

JavaScript
533
star
14

antvis.github.io

🔜 AntV 新站点!
TypeScript
410
star
15

g2-react

This repo is being deprecated, check Ant Design Charts https://github.com/ant-design/ant-design-charts
JavaScript
363
star
16

gatsby-theme-antv

⚛️ Polished Gatsby theme for documentation site
TypeScript
345
star
17

hierarchy

Layout algorithms for visualizing hierarchical data.
JavaScript
249
star
18

data-set

state driven all in one data process for data visualization.
TypeScript
249
star
19

F2Native

📱📈An elegant, interactive and flexible native charting library for mobile.
C++
213
star
20

layout

Layout algorithms for graphs.
TypeScript
200
star
21

L7VP

L7VP is an geospatial intelligent visual analysis and application development tools.
TypeScript
189
star
22

my-f2

F2 的支付宝小程序版本
JavaScript
145
star
23

g-webgl-compute

A GPGPU implementation based on WebGL.
TypeScript
143
star
24

F6

F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.
JavaScript
133
star
25

f2-canvas

微信小程序 F2 自定义图表组件
JavaScript
118
star
26

algorithm

常用的图算法 JS 实现,提供给 G6 及 Graphin 用于图分析场景使用。
TypeScript
99
star
27

china-geojson

This repo is being deprecated.
96
star
28

SAMJS

TypeScript
94
star
29

L7Plot

🌍 Geospatial Visualization Chart Library
TypeScript
83
star
30

util

utility library for AntV products.
TypeScript
74
star
31

LarkMap

A React toolkit for geospatial visualization based on L7.
TypeScript
71
star
32

mini-program-f2-demos

支付宝小程序小程序端的 F2 图表 demo
JavaScript
69
star
33

component

🍱 AntV UI component based on G render engine.
TypeScript
58
star
34

scale

📦 Toolkit for mapping abstract data into visual representation.
TypeScript
56
star
35

awesome-f2-charts

F2 图表可视化方案精选
HTML
46
star
36

L7Draw

L7 绘制控件
TypeScript
44
star
37

coord

Toolkit for apply point transformations for vector.
TypeScript
41
star
38

GUI

UI components for G. Merge to @antvis/component.
TypeScript
40
star
39

vis-dashboard

🎨 Awesome dashboards, built with G2 and G2Plot.
TypeScript
40
star
40

gatsby-starter-theme-antv

⚛️ Gatsby's starter of 👉
TypeScript
35
star
41

L7Editor

Geographic data editing tool based on L7
TypeScript
35
star
42

theme-set

💄 Customize theme for G2, G2Plot of AntV(孵化中)
TypeScript
35
star
43

FEngine

TypeScript
31
star
44

Dipper

下一代位置可视分析研发框架
TypeScript
28
star
45

smart-color

A JavaScript library for color computation.
TypeScript
27
star
46

g2-brush

Select a one-, two-dimensional or irregular region using the mouse.
JavaScript
24
star
47

L7-react

L7 React 版
TypeScript
23
star
48

f2-context

F2针对多端的context适配
TypeScript
22
star
49

A8

🎼 A library for audio visualization.
TypeScript
22
star
50

g2-plugin-slider

A datazoom slider plugin for G2.
JavaScript
20
star
51

dumi-theme-antv

AntV website theme based on dumi2.
TypeScript
20
star
52

L7-Leaflet

L7 leaflet 插件
19
star
53

event-emitter

Simple event emitter for @antvis
TypeScript
19
star
54

L7-boundary

行政区划围栏可视化方案
TypeScript
16
star
55

DipperMap

A tool supporting geo data visualization
TypeScript
16
star
56

vis-predict-engine

可视化预测引擎,目前只用于预测图可视化布局.布局预测的模型由本引擎内置,支持force/radial/concentric/circular的四布局分类
TypeScript
14
star
57

graphlib

A lib containing multible usages for graph structure, graph algorithm, and other graph ops.
TypeScript
13
star
58

attr

Attribute mapping module for @antvis.
TypeScript
12
star
59

antv-spec

A declarative grammar that supports various technology stacks of AntV.
TypeScript
12
star
60

geo-coord

地理坐标系
TypeScript
11
star
61

g-device-api

A Device API references WebGPU implementations
TypeScript
9
star
62

my-f2-pc

淘宝PC小程序
JavaScript
8
star
63

L7Gallery

L7 demo 案例集锦
8
star
64

stat

常用统计函数的实现
TypeScript
8
star
65

interaction

interaction bindings for G2 and F2
TypeScript
7
star
66

infinite-canvas-tutorial

An infinite canvas tutorial
TypeScript
7
star
67

g2-extensions

The one-stop shop for official @antv/g2 extensions.
TypeScript
6
star
68

adjust

Adjust module for @antvis.
TypeScript
5
star
69

graphin-studio-site

Github Page Repo for Graphin Studio
HTML
5
star
70

L7-CustomLayer-Template

TypeScript
5
star
71

g2plot-schema

Schemas of configs(options) of G2Plot chart types.
TypeScript
4
star
72

template

📃 Template repository for @antvis.
JavaScript
4
star
73

old-site

AntV 旧版本站点
HTML
4
star
74

vis-steg

Visualization Steganography: conceal information within visualization images.
TypeScript
4
star
75

AVAPy

Python Library for Automatic Visual Analytics
Python
4
star
76

g-gesture

WIP: Gesture module for @antv/g.
TypeScript
4
star
77

insight-component

Components for GI&LI
TypeScript
3
star
78

antvis-sites-data

🔢 Headless CMS data for https://antv.vision
3
star
79

g2-next-site

JavaScript
3
star
80

chart-node-g6

the Toolkit for G6 chart type nodes
TypeScript
3
star
81

color-schema

A JSON schema used to regulate semantic color assets or palettes.
TypeScript
3
star
82

autochart-config-panel

GUI config panel for the autoChart feature of AntV/AVA.
TypeScript
3
star
83

data-samples

Open data set collection for AntV products
TypeScript
3
star
84

l7-extensions

🧩 A collection of extensions for L7.
TypeScript
3
star
85

F7

L7小程序版本,支持支付宝、微信等多端小程序。
TypeScript
2
star
86

async-hook

the control flow for l7
TypeScript
2
star
87

create-antv-demo

A simple CV-dashboard framework for practicing how to use AntV.
JavaScript
2
star
88

g2-3.x-site

The site of G2 3.x version
HTML
2
star
89

thumbnails

Thumbnail images for different chart types from Chart Knowledge Base.
TypeScript
2
star
90

g6-3.2.x-site

The site for G6 3.2.x
HTML
2
star
91

gi-export

TypeScript
2
star
92

g2plot-1.x-site

The site of G2Plot 1.x version.
HTML
1
star
93

storytelling

Telling story by data visualization.
TypeScript
1
star
94

translator

A translator based on Google Translate.
JavaScript
1
star