G2Plot開箱即用的圖表庫(kù)

一套簡(jiǎn)單、易用、并具備一定擴(kuò)展能力和組合能力的統(tǒng)計(jì)圖表庫(kù)，基于圖形語法理論搭建而成，『G2Plot』中的 G2 即意指圖形語法 (the Grammar of Graphics)，同時(shí)也致敬了 ggplot2。我們想做的事有三件：（1）使用戶不用成為可視化專家也能夠輕松制作出優(yōu)雅美觀的圖表 （2）保證圖表能夠經(jīng)受得起業(yè)務(wù)的檢驗(yàn)，在真實(shí)的場(chǎng)景中易用、好用 （3）探索統(tǒng)計(jì)圖表的更多可能性，使統(tǒng)計(jì)圖表變得更好玩、更酷。

特性

• ?? 開箱即用、體驗(yàn)優(yōu)雅的高質(zhì)量統(tǒng)計(jì)圖表

  G2Plot 呈現(xiàn)給用戶的是一套提煉自企業(yè)級(jí)產(chǎn)品的視覺語言和設(shè)計(jì)規(guī)范。不僅對(duì)圖表的整體視覺樣式進(jìn)行了優(yōu)化，并且針對(duì)每一個(gè)圖表自身的特點(diǎn)，沉淀出一套最佳配置，保證用戶能夠通過最少的配置制作出優(yōu)雅、標(biāo)準(zhǔn)的圖表。

  

• ?? 響應(yīng)式：讓圖表更聰明

  在現(xiàn)實(shí)的圖表應(yīng)用場(chǎng)景中，一個(gè)棘手的難題是圖表的展示空間往往并不足夠顯示圖表的數(shù)據(jù)量，造成極值情況下文本的重疊遮擋、內(nèi)容無法自適應(yīng)、內(nèi)容裁剪等問題。G2Plot 借鑒寬容性設(shè)計(jì)的思想，在圖表的信息密度過高時(shí)，對(duì)圖表輔助信息進(jìn)行抽稀，保證圖表主要信息的展示和基本可讀性。

  

• ?? 向前一步：會(huì)講故事的圖表

  在 G2Plot 體系下，圖表不僅僅只是各不相關(guān)的實(shí)例，圖層概念的引入提供了多圖表組合、疊加、聯(lián)動(dòng)，共同講述一個(gè)數(shù)據(jù)故事的可能性。未來，我們還將探索統(tǒng)計(jì)圖表轉(zhuǎn)化信息圖的可能性，豐富統(tǒng)計(jì)圖表的表現(xiàn)能力。

安裝

$ 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(document.getElementById('container'), {
  data,
  xField: 'sales',
  yField: 'year',
  colorField: 'year',
});

bar.render();

開發(fā)

$ npm install

# run test case
$ npm run test-live

# build watching file changes and run demos
$ npm run dev

# run demos
$ npm run demos