3
阿里统计图表库G2Plot
source link: https://www.leixuesong.com/3854
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
阿里统计图表库G2Plot
G2Plot中的 G2 即意指图形语法 (the Grammar of Graphics)，同时也致敬了 ggplot2。G2Plot是阿里的一套简单、易用、并具备一定扩展能力和组合能力的统计图表 JS 库，基于图形语法理论搭建而成。G2Plot吸引我的优点有：一、代码简单易用。二、大数据展示更智能，避免文本的重叠遮挡、内容无法自适应、内容裁剪等问题。三、提供了多图表组合、叠加、联动，共同讲述一个数据故事的可能性。下面雷雪松带大家一起了解下阿里统计图表库G2Plot。
1、npm安装G2Plot
<span class="br0">[</span>root<span class="sy0">@</span>node ~<span class="br0">]#</span> npm install @antv/g2plot
2、G2Plot使用
<div id="container"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
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();
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK