dataset的去重计数 g2_antvg2的理解

Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待

4999元包邮

去购买 >

关于antv g2的一些个人理解

G2

G2本身是一门图形语法，G2和传统的图表系统(HighCharts，ACharts等)不同，G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形，让你在使用它时候不用关心绘图细节，只需要知道你想通过它怎么展示你关心的数据。echarts更多的是配置options来显示图片，出发点不同。

g2构成

一个可视化框架需要四部分：

数据处理模块，对数据进行加工的模块，包括一些数据处理方法。例如：合并、分组、排序、过滤、计算统计信息等

图形映射模块，将数据映射到图形视觉通道的过程。例如：将数据映射成颜色、位置、大小等

图形展示模块，决定使用何种图形来展示数据，点、线、面等图形标记

辅助信息模块，用于说明视觉通道跟数据的映射关系，例如：坐标轴、图例、辅助文本等

在数据处理模块上，dataSet主要通过state状态管理多个dataview视图，实现多图联动，或者关联视图。dataView则是对应的是每一个数据源，通过connector来接入不同类型的数据，通过tranform进行数据的转换或者过滤。最后输出我们理想的数据，dataSet是与g2分离的，需要用到的时候可以加载

在图形映射模块上，度量 Scale，是数据空间到图形空间的转换桥梁，负责原始数据到 [0, 1] 区间数值的相互转换工作，从原始数据到 [0, 1] 区间的转换我们称之为归一化操作。我们可以通过chart.source或者chart.scale('field', defs)来实现列定义，我们可以在这对数据进行起别名，更换显示类型(time，cat类型等)

辅助信息，就是标记数据，方便理解数据

图形展示 chart图表是一个大画布，可以有多个view视图，geom则是数据映射的图形标识，就是指的点，线，面，通过对其操作，从而展示图形，

这是大体步骤：

//代码实现

const data = [

{ genre: 'Sports', sold: 275 },

{ genre: 'Strategy', sold: 115 },

{ genre: 'Action', sold: 120 },

{ genre: 'Shooter', sold: 350 },

{ genre: 'Other', sold: 150 }

];

// G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。

// Step 1: 创建 Chart 对象

const chart = new G2.Chart({

container: 'c1', // 指定图表容器 ID

width : 600, // 指定图表宽度

height : 300 // 指定图表高度

});

// Step 2: 载入数据源

chart.source(data);

// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴

chart.interval().position('genre*sold').color('genre')

// Step 4: 渲染图表

dataSet

负责数据处理，使得数据驱动视图, 可以包含多个dataView，每个view对应一套数据

// 以下是通过state过滤数据

// step1 创建 dataset 指定状态量

const ds = new DataSet({

state: {

year: '2010'

}

});

// step2 创建 DataView

const dv = ds.createView().source(data);

dv.transform({

type: 'filter',

callback(row) {

return row.year === ds.state.year;

}

});

// step3 引用 DataView

chart.source(dv);

// step4 更新状态量

ds.setState('year', '2012');

// transform例子

const data = [

{ country: "USA", gold: 10, silver: 20 },

{ country: "Canada", gold: 7, silver: 26 }

];

const dv = ds.createView()

.source(data)

.transform({

type: 'fold',

fields: [ 'gold', 'silver' ], // 展开字段集

key: 'key', // key字段

value: 'value', // value字段

retains: [ 'country' ] // 保留字段集，默认为除 fields 以外的所有字段

});

/*

dv.rows 变为

[

{ key: gold, value: 10, country: "USA" },

{ key: silver, value: 20, country: "USA" },

{ key: gold, value: 7, country: "Canada" },

{ key: silver, value: 26, country: "Canada" }

]

*/

// connector例子

const testCSV = `Expt,Run,Speed

1,1,850

1,2,740

1,3,900

1,4,1070`;

const dv = new DataSet.View().source(testCSV, {

type: 'csv'

});

console.log(dv.rows);

/*

* dv.rows:

* [

* {Expt: " 1", Run: "1", Speed: "850"}

* {Expt: " 1", Run: "2", Speed: "740"}

* {Expt: " 1", Run: "3", Speed: "900"}

* {Expt: " 1", Run: "4", Speed: "1070"}

* ]

*/

度量scale

就是从数据到图形的转化，使得数据在展示的时候可以自定义

所谓的列定义，即是对度量 scale 的操作

列定义上的操作可以理解为直接修改数据源中的数据属性，因此它会影响坐标轴、tooltip 提示信息、图例、辅助元素 guide 以及几何标记的标签文本 label 的数据内容显示。

//以下是关于数据映射scale的demo

const data = [

{ type: 0, value: 1 },

{ type: 1, value: 2 },

{ type: 2, value: 3 }

];

chart.scale('type', {

type: 'cat', // 声明 type 字段为分类类型

values: [ 'A', 'B', 'C' ], // 重新显示的值

alias: '类型' // 设置属性的别名

});

// 这时候映射的value就变成了 类型：A

geom

g2对图形进行了抽象，我们通过对点，线，面操作使得可以我们可以画出各种图形

也可以自定义shape来实现图形

// line画出折线图，position分别从x轴和Y轴取数据，通过city的不同画出不同的折线

chart.line().position('month*temperature').color('city');

//size表示的是点的大小，shape为点的类型

chart.point().position('month*temperature').color('city').size(4).shape('circle').style({

stroke: '#fff',

lineWidth: 1

});

coord坐标系

chart.coord('coordTpye'[, cfg]);主要就是更改坐标系，笛卡尔坐标系(直角坐标系)和 极坐标系，例如通过改成极坐标系来画饼图

辅助信息

axis坐标轴

chart.axis('xField', {

line: {

lineWidth: 2, // 设置线的宽度

stroke: 'red', // 设置线的颜色

lineDash: [ 3, 3 ] // 设置虚线样式

}

});

实现多Y轴的绘制非常简单，用户完全不需要做任何配置。只要做到各个 geom 的 X 轴属性相同，Y 轴属性不同，G2 就会为您自动生成。

legend图例

chart.legend()

tooltip提示信息

chart.tooltip()

guide辅助元素

chart.guide()

可以画辅助线或者辅助图案

slider

label图形文本

label在geom上调用

chart.point().position(x*y).label('x', {})

facet分面

分面，将一份数据按照某个维度分隔成若干子集，然后创建一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中。

总结起来，分面其实提供了两个功能：

1.按照指定的维度划分数据集；

2.对图表进行排版。

通过chart.facet(type, {})调用

另外，g2也提供了自定义主题，自定义动画等更多更自由的操作

如果有错误的地方，欢迎指出~~~

感谢收看~~

参考文献：

https://antv.alipay.com/zh-cn...

https://antv.alipay.com/zh-cn...

https://segmentfault.com/a/11...

原文链接:https://segmentfault.com/a/1190000013413771

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！