-

阿里统计图表库G2Plot

WEB前端

G2Plot中的 G2 即意指图形语法 (the Grammar of Graphics),同时也致敬了 ggplot2。G2Plot是阿里的一套简单、易用、并具备一定扩展能力和组合能力的统计图表 JS 库,基于图形语法理论搭建而成。G2Plot吸引我的优点有:一、代码简单易用。二、大数据展示更智能,避免文本的重叠遮挡、内容无法自适应、内容裁剪等问题。三、提供了多图表组合、叠加、联动,共同讲述一个数据故事的可能性。下面雷雪松带大家一起了解下阿里统计图表库G2Plot。

g2plot

1、npm安装G2Plot

1
<span class="br0">[</span>root<span class="sy0">@</span>node ~<span class="br0">]#</span> npm install @antv/g2plot

2、G2Plot使用

1
<div id="container"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();

 

来源:阿里统计图表库G2Plot

2 评论 “阿里统计图表库G2Plot

    favs 评论:
    2020年10月3日 上午10:45

    空包单号网全国地址任意发,24小时自助下单,快速免费提供底单www.dydanhw.com

    rhxv 评论:
    2020年10月22日 上午8:56

    快递代发,礼品代发单号无忧为您解决www.dh5u.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注