@visactor/vgrammar-full v0.13.3
VGrammar,不只是生成万千图表的可视化语法,更是化枯燥为神奇的数据魔法师。
English | 简体中文
(演示视频)
简介
VGrammar 是 VisActor 可视化体系中的可视化语法库,基于可视化渲染引擎 VRender 进行组件封装。核心能力如下:
- 默认好用:语法简洁,接口完备,组件丰富,开发简单;
- 能力丰富:图表定义,动画编排,艺术表达,完整覆盖;
- 灵活扩展:图元渲染,数据映射,自动布局,轻松扩展;
仓库简介
本仓库包含如下 package
- VGrammar: 图形语法
使用
安装
// npm
npm install @visactor/vgrammar
// yarn
yarn add @visactor/vgrammar
快速上手
import { View } from '@visactor/vgrammar';
const spec = {
data: [
{
id: 'table',
values: [
{
value: 3676,
name: ' ~ 29'
},
{
value: 3872,
name: '30 ~ 39'
},
{
value: 1668,
name: '40 ~ 49'
},
{
value: 610,
name: '50 ~'
}
]
},
{
id: 'pie',
source: 'table',
transform: [
{
type: 'pie',
field: 'value',
asStartAngle: 'startAngle',
asEndAngle: 'endAngle'
}
]
}
],
scales: [
{
id: 'colorScale',
type: 'ordinal',
domain: { data: 'table', field: 'name' },
range: [
'#6690F2',
'#70D6A3',
'#B4E6E2',
'#63B5FC',
'#FF8F62',
'#FFDC83',
'#BCC5FD',
'#A29BFE',
'#63C4C7',
'#F68484'
]
}
],
marks: [
{
type: 'arc',
from: { data: 'pie' },
dependency: ['viewBox', 'colorScale'],
encode: {
update: (datum, element, params) => {
const viewBox = params.viewBox;
const maxR = Math.min(viewBox.width() / 2, viewBox.height() / 2);
return {
x: viewBox.x1 + viewBox.width() / 2,
y: viewBox.y1 + viewBox.height() / 2,
startAngle: datum.startAngle,
endAngle: datum.endAngle,
innerRadius: 100,
outerRadius: maxR,
fill: params.colorScale.scale(datum.name)
};
},
hover: {
fill: 'red'
}
}
}
]
};
const vGrammarView = new View({
autoFit: true,
container: 'chart',
hover: true
});
vGrammarView.parseSpec(spec);
vGrammarView.runAsync();
相关链接
生态
项目 | 介绍 |
---|
| VChart | 基于 VisActor/VGrammar 封装的图表库。 | | React 组件库 | 基于 VisActor/VChart 的 React 图表 组件库。 | | 智能生成组件 | 基于 AI 的智能图表生成组件 |
参与贡献
细流成河,终成大海!
许可证
1 day ago
6 days ago
9 days ago
7 days ago
9 days ago
16 days ago
20 days ago
20 days ago
20 days ago
22 days ago
21 days ago
22 days ago
26 days ago
26 days ago
26 days ago
26 days ago
27 days ago
27 days ago
28 days ago
28 days ago
28 days ago
29 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago