antv g2字体阴影_antv g2的明白总结

G2

G2自身是一门图形语法，G2和传统的图表体系(HighCharts，ACharts等)差别，G2是一个基于统计剖析的语义化数据可视化体系。它真正做到了让数据驱动图形，让你在运用它时刻不必体贴画图细节，只须要知道你想经由历程它怎样展现你体贴的数据。echarts更多的是设置options来显现图片，起点差别。(g2也一样支撑设置项声明)

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对应一套数据