数据处理与配置

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', {
   
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值