• Stars
    star
    7,834
  • Rank 4,526 (Top 0.1 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 month ago

Reviews

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

Repository Details

📱📈An elegant, interactive and flexible charting library for mobile.

npm package NPM downloads Percentage of issues still open

F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。英文 README

在此衷心感谢《The Grammar of Graphics》的作者 Leland Wilkinson,为 F2 的图形语法提供了理论基础!

安装

$ npm install @antv/f2

特性

专注移动,体验优雅

  • 轻量化呈现,自然反馈:在设计上我们以人为本,追求自然简单易懂,有吸引力的表达效果,让用户在碎片化的时间里更快更高效得获取图表信息。同时在可视化的操作我们追求内容和操作有机融合,符合人的自然行为反应,让交互操作更自然。

  • 轻巧流畅:F2 一直致力于追求极致的性能,针对移动设备做了大量的优化,在支持丰富(50+)图表的基础上同时保持代码量的小巧(不带交互版本 gzip 压缩后 44k,带所有交互版本 56k),同时提供模块化的设计以支持动态加载,提供更优的大小。

  • 多端异构:在完美支持 H5 环境的同时,同时兼容 Node.js支付宝小程序微信小程序React Native以及 Weex 端的渲染,一份代码,多设备多环境渲染。

图表丰富,组件完备

与传统的图表库不同,抛弃了特图特做的封装思路,基于强大的图形语法理论,以数据驱动,通过图形语法的组合灵活构建各类图表,目前可绘制 50+ 图表类型(当然,还可以更多),覆盖各类场景在提供基础的图表可视化能力外,我们还提供了丰富图表功能组件,满足各种功能需求。

扩展灵活,创意无限

我们在提供最佳实践的同时,还为开发者提供了灵活的扩展机制,包括 Shape、动画以及交互的自定义能力,当然还有图表样式的个性化定制,满足各种个性化的图表要求。

文档

快速开始

<canvas id="mountNode"></canvas>
// F2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 },
];

// 获取 canvas context
const context = document.getElementById('mountNode').getContext('2d');
const { props } = (
  <Canvas context={context} pixelRatio={window.devicePixelRatio}>
    <Chart data={data}>
      <Axis field="genre" />
      <Axis field="sold" />
      <Interval x="genre" y="sold" color="genre" />
      <Tooltip />
    </Chart>
  </Canvas>
);

const canvas = new Canvas(props);
canvas.render();

更多示例:demos

手机扫码观看 demos

本地开发

$ npm install

# 先初始化 monorepo
$ npm run bootstrap

# 再跑测试用例
$ npm run test

# 监听文件变化构建,并打开 demo 页面
$ npm run dev

# 打开某一个具体的测试用例
$ npm run test-watch -- 'TestFileName'

如何贡献

如果您在使用的过程中碰到问题,可以先通过 issues 看看有没有类似的 bug 或者建议。

如需提交代码,请遵从我们的贡献指南

体验改进计划说明

F2 从 3.1.12(2018-06-20 发布)版本开始添加了F2.track(true)方法。 目前我们的体验改进计划已经完成,所以从 3.3.4 版本开始该方法将从 F2 中删除。 如果它给你带来麻烦,我们深表歉意。

License

MIT license.

More Repositories

1

G2

📊 The concise and progressive visualization grammar.
TypeScript
11,919
star
2

G6

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

X6

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

L7

🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis engine
TypeScript
3,403
star
5

G2Plot

🍡 An interactive and responsive charting library.
TypeScript
2,501
star
6

S2

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

AVA

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

wx-f2

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

G

💥 A flexible rendering engine for visualization.
TypeScript
988
star
10

Graphin

A React toolkit for graph visualization based on G6
TypeScript
967
star
11

G6VP

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

XFlow

React component for building interactive diagrams.
TypeScript
540
star
13

g6-editor

JavaScript
529
star
14

antvis.github.io

🔜 AntV 新站点!
TypeScript
377
star
15

g2-react

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

gatsby-theme-antv

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

data-set

state driven all in one data process for data visualization.
TypeScript
240
star
18

hierarchy

Layout algorithms for visualizing hierarchical data.
JavaScript
219
star
19

F2Native

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

layout

Layout algorithms for graphs.
TypeScript
171
star
21

L7VP

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

my-f2

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

g-webgl-compute

A GPGPU implementation based on WebGL.
TypeScript
142
star
24

F6

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

f2-canvas

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

algorithm

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

china-geojson

This repo is being deprecated.
96
star
28

L7Plot

🌍 Geospatial Visualization Chart Library
TypeScript
79
star
29

SAMJS

TypeScript
77
star
30

util

utility library for AntV products.
TypeScript
76
star
31

mini-program-f2-demos

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

LarkMap

A React toolkit for geospatial visualization based on L7.
TypeScript
61
star
33

scale

📦 Toolkit for mapping abstract data into visual representation.
TypeScript
55
star
34

component

🍱 AntV UI component based on G render engine.
TypeScript
55
star
35

awesome-f2-charts

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

vis-dashboard

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

L7Draw

L7 绘制控件
TypeScript
39
star
38

GUI

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

coord

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

gatsby-starter-theme-antv

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

theme-set

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

FEngine

TypeScript
30
star
43

Dipper

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

smart-color

A JavaScript library for color computation.
TypeScript
24
star
45

L7Editor

Geographic data editing tool based on L7
TypeScript
24
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

g2-plugin-slider

A datazoom slider plugin for G2.
JavaScript
20
star
49

f2-context

F2针对多端的context适配
TypeScript
20
star
50

L7-Leaflet

L7 leaflet 插件
TypeScript
19
star
51

event-emitter

Simple event emitter for @antvis
TypeScript
19
star
52

dumi-theme-antv

AntV website theme based on dumi2.
TypeScript
19
star
53

DipperMap

A tool supporting geo data visualization
TypeScript
16
star
54

L7-boundary

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

vis-predict-engine

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

attr

Attribute mapping module for @antvis.
TypeScript
12
star
57

graphlib

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

antv-spec

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

geo-coord

地理坐标系
TypeScript
11
star
60

my-f2-pc

淘宝PC小程序
JavaScript
8
star
61

L7Gallery

L7 demo 案例集锦
TypeScript
8
star
62

stat

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

interaction

interaction bindings for G2 and F2
TypeScript
7
star
64

L7-CustomLayer-Template

TypeScript
5
star
65

adjust

Adjust module for @antvis.
TypeScript
5
star
66

g-device-api

A Device API references WebGPU implementations
TypeScript
5
star
67

graphin-studio-site

Github Page Repo for Graphin Studio
HTML
5
star
68

A8

A music visualizer
TypeScript
5
star
69

g2plot-schema

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

template

📃 Template repository for @antvis.
JavaScript
4
star
71

old-site

AntV 旧版本站点
HTML
4
star
72

vis-steg

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

tools

typescript and test tools
JavaScript
4
star
74

AVAPy

Python Library for Automatic Visual Analytics
Python
4
star
75

g-gesture

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

insight-component

Components for GI&LI
TypeScript
3
star
77

antvis-sites-data

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

g2-next-site

JavaScript
3
star
79

chart-node-g6

the Toolkit for G6 chart type nodes
TypeScript
3
star
80

autochart-config-panel

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

g-perf

Performance monitor for G.
TypeScript
3
star
82

data-samples

Open data set collection for AntV products
TypeScript
3
star
83

color-schema

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

F7

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

g2-3.x-site

The site of G2 3.x version
HTML
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-extensions

The one-stop shop for official @antv/g2 extensions.
TypeScript
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