DataSet(数据集类构造函数)
自 G2 3.0 版本开始,原先内置的数据处理模块 frame 从 G2 包中抽离出来,独立成为 DataSet 包。DataSet 的目标是为数据可视化场景提供状态驱动(state driven)的、丰富而强大的数据处理能力。
术语表
术语 | 描述 |
---|---|
数据集(DataSet) | 一组数据的集合 |
数据视图(DataView) | 单个数据视图,目前有普通二维数据(类似一张数据库表)、树形数据、图数据和地理信息数据几种类型 |
变换(Transform) | 数据变换函数,数据视图做数据处理时使用,包括图布局、数据补全、数据过滤等等 |
状态量(state) | 数据集内部流转的控制数据状态的变量 |
连接器(connector | 数据接入函数,用于把某种数据源(譬如 csv)载入到某个数据视图上 |
引入在线资源DataSet包地址
https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.11.1/dist/data-set.js
使用DataSet包示例:
//step1:创建 dataset
const ds = new DataSet();
// step2:创建 DataView
const dv = ds.createView().source(data);
//transform:变换,数据变换函数,数据视图做数据处理时使用,包括图布局、数据补全、数据过滤等等
dv.transform({
type: 'percent',
field: 'value',
dimension: 'type',
as: 'percent',
});
//step3:引用 DataView
chart.data(dv.rows);
数据比例(百分比)相关 Transform
percent 总和百分比
统计某个维度下某个字段的值的和占总和的比例(可以分组)。
具体用法示例:
dv.transform({
type: 'percent',
field: 'value',//field 是统计发生的字段(求和,求百分比)
//dimension 是统计的维度字段,也就是"每个不同的 dimension 下,field 值占总和的百分比",
dimension: 'type',//每个学历占总和的百分比
as: 'percent',//结果存储在 percent 字段,最后总和为1
});
应用到具体图表中—饼图
//dv.rows
const data = [
{
type: '硕士', value: 0.4 },
{
type: '本科', value: 0.21 },
{
type: '博士', value: 0.17 },
{
type: '初中', value: 0.009 },
{
type: '专科', value: 0.013 },
{
type: '未知', value: 0.08 },
];
//step1:创建 dataset
const ds = new DataSet();
// step2:创建 DataView
const dv = ds.createView().source(data);
dv.transform({
type: 'percent',
field: 'value',//field 是统计发生的字段(求和,求百分比)
dimension: 'type',//每个学历占总和的百分比
as: 'percent',//结果存储在 percent 字段,最后总和为1
});
const chart = new G2.Chart({
container: 'c',
autoFit: true,
height: 500,
});
//step3:引用 DataView
chart.data(dv.rows);
chart.coordinate('theta', {