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对应一套数据
经由历程connector接入数据(把种种数据范例转成肯定的情势)，再经由历程transform举行过滤聚合等支配
// 以下是经由历程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 = [
{ month: 0, value: 1 },
{ month: 1, value: 2 },
{ month: 2, value: 3 }
];
chart.scale('month', {
type: 'cat', // 声明 type 字段为分类范例
values: [ '一月', '二月', '三月' ], // 从新显现的值
alias: '月份' // 设置属性的别号
});
// 这时候刻映照的month就变成了 月份：一月
// 这时候坐标轴，tooltip等关于month的数据显现都改变了
view
视图，由 Chart 天生和治理，具有本身自力的数据源、坐标系和图层，用于异构数据的可视化以及图表组合，一个 Chart 由一个或许多个视图 View 构成。
因而 view 上的 api 同 chart 基础雷同。
view绘制的图形是在chart上的，Tooltip(提醒信息)和 Legend(图例)仅在 Chart 上支撑，所以view共用一套tooltip和legentd, 能够举行图形的叠加展现，假如须要差别图形完整隔脱离的联动展现，能够再new一个chart，然后经由历程state联动起来
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
});
shape
而shape恰是自定义外形，经由历程在Shape 上注册图形，完成自定义 Shape 的功用。
经由历程对点，线，面的描写完成自定义图形
const Shape = G2.Shape;
const shapeObj = Shape.registerShape('geomType', 'shapeName', {
getPoints(pointInfo) {
// 猎取每种 shape 绘制的症结点
},
draw(cfg, container) {
// 自定义终究绘制的逻辑
}
});
coord坐标系
chart.coord(‘coordTpye'[, cfg]);重要就是变动坐标系，笛卡尔坐标系(直角坐标系)和 极坐标系，比方经由历程改成极坐标系来画饼图
辅佐信息
axis坐标轴
在这里，你能够举行一些针对坐标轴的支配，比方x轴显现的点的个数，坐标轴点的间距
chart.axis('xField', {
line: {
lineWidth: 2, // 设置线的宽度
stroke: 'red', // 设置线的色彩
lineDash: [ 3, 3 ] // 设置虚线款式
}
});
完成多Y轴的绘制异常简朴，用户完整不须要做任何设置。只需做到各个 geom 的 X 轴属性雷同，Y 轴属性差别，G2 就会为您自动天生。
legend图例
chart.legend({
position: 'bottom', // 设置图例的显现位置
itemGap: 20 // 图例项之间的间距
});
chart.legend('cut', false); // 不显现 cut 字段对应的图例
chart.legend('price', {
title: null // 不展现图例 title
});
chart.legend(false); //统统的图例都不显现
固然，也能够运用html衬着图例，只须要useHtml:true就能够了
tooltip提醒信息
分为两种设置
在chart上设置
chart.tooltip(true, cfg); // 开启 tooltip，并设置 tooltip 设置信息
chart.tooltip(cfg); // 省略 true, 直接设置 tooltip 设置信息
chart.tooltip(false); // 封闭 tooltip
在geom对象上设置，粒度更小
chart..tooltip('field1*field2...*fieldN');
支撑种种自定义支配，关于庞杂的场景，能够监听 chart 对象上的 tooltip:change 事宜，或许经由历程回调举行自定义支配
guide辅佐元素
chart.guide()
能够画辅佐线或许辅佐图案
支撑line线，image图片,html,text等内容
经由历程chart.guide().line({…})来运用
label图形文本
label在geom上挪用
chart.point().position(x*y).label(‘x’, {})
slider
须要分外引入
Slider 组件是完整基于数据的交互组件，同 chart 并没有任何关联，无论是你的滑动条想要支配多少个 chart 或许 view 都没有关联。其滑动时与图表的联动行动，须要同 DataSet 中的状况量相结合，经由历程定义每一个 Slider 对象的 onChange 回调函数，在个中动态更新 DataSet 的状况量来完成数据过滤
// !!! 建立 slider 对象
const slider = new Slider({
container: 'slider',
start: '2004-01-01',
end: '2007-09-24',
data, // !!! 注重是原始数据，不要传入 dv
xAxis: 'date',
yAxis: 'aqi',
onChange: ({ startText, endText }) => {
// !!! 更新状况量
ds.setState('start', startText);
ds.setState('end', endText);
}
});
slider.render();
facet分面
分面，将一份数据根据某个维度分隔成多少子集，然后建立一个图表的矩阵，将每一个数据子集绘制到图形矩阵的窗格中。
总结起来，分面实在供应了两个功用：
1.根据指定的维度分别数据集；
2.对图表举行排版。
重要就是下降维度，把数据拆离开，协助剖析
chart.facet('list', {
fileds: [ 'cut', 'carat' ],
padding: 20 // 各个分面之间的间距，也能够是数组 [top, right, bottom, left]
});
animate
能够自定义animate动画
const { Animate } = G2;
/**
* @param {String} animationType 动画场景范例 appear enter leave update
* @param {String} 动画称号，用户自定义即可
* @param {Function} 动画实行函数
**/
Animate.registerAnimation(animationType, animationName, animationFun);
其他封装
Viser 并非针对 React 做的适配，它是对 G2 3.0 通用的笼统。经由历程基于 Viser 封装，如今已支撑对 React、 Angular 和 Vue 三个经常使用框架的深度整合，对应的是 viser-react、viser-ng 和 viser-vue。
viser在react的运用，相似于新版的react-router，统统皆是组件
export default class App extends React.Component {
render() {
return (
);
}
}
在vue中也相似
const data = [
{ year: '1991', value: 3 },
{ year: '1992', value: 4 },
{ year: '1993', value: 3.5 },
{ year: '1994', value: 5 },
{ year: '1995', value: 4.9 },
{ year: '1996', value: 6 },
{ year: '1997', value: 7 },
{ year: '1998', value: 9 },
{ year: '1999', value: 13 },
];
const scale = [{
dataKey: 'value',
min: 0,
},{
dataKey: 'year',
min: 0,
max: 1,
}];
export default {
data() {
return {
data,
scale,
height: 400,
};
}
};
别的，g2一样支撑设置项声明的体式格局编写，经由历程编写options来
假如有毛病的处所，迎接指出~~~
谢谢收看~~