View
G2 的图表 Chart，可以创建多个视图 View，每个 View 各自又可以创建其子 View，即在 G2 4.0 中，View 是支持嵌套的。每个 View 同 Chart 一样，拥有自己独立的数据源、坐标系、几何标记、Tooltip 以及图例，你可以这样理解，其实 Chart 也是一种特殊的 View，在类结构设计上，Chart 和 View 的关系如下：
如何创建视图
直接通过调用 chart.createview() 即可创建 View 对象，此时会默认创建一个绘图区域于 Chart 相同的视图，当然你可以通过 region 属性指定 view 的绘图区域。
// step 1: 需要创建 chart 对象
const chart = new G2.Chart({
container: 'container',
autoFit: false,
width: 1000,
height: 500,
});
// step 2: 然后创建一个视图
const view = chart.createView({
region: {
start: { x: 0.2, y: 0.2 }, // 指定该视图绘制的起始位置，x y 为 [0 - 1] 范围的数据
end: { x: 1, y: 1 }, // 指定该视图绘制的结束位置，x y 为 [0 - 1] 范围的数据
},
padding: [20, 40], // 指定视图的留白
});这里需要说明的是：
- 为了让用户更好更快速得指定视图的绘制区域，start 和 end 这两个参数只接受 0 至 1 范围的数据。
- View 的绘制起始点是画布左上角。
创建好 view 之后，就可以同 chart 一样载入数据，使用图形语法进行图表的绘制了，语法同 chart。
说明：需要注意的是，view 并不负责最后的画布绘制，统一由 chart 对象进行渲染，即 chart.render()。
view.data(data); // 为 View 载入数据
view.interval().position('x*y').color('x'); // 使用图形语法绘制图表
chart.render(); // 由 chart 负责统一的渲染关于 view 的更多方法请查看 view api。
示例
在进行地理数据的可视化的时候，使用多视图的绘制方式就会非常方便。
通常情况下，地理数据的可视化会包含多份数据：一份是用于绘制地图的经纬度数据，一份是用户真正想要可视化的用户数据。
在这个例子中，需要在世界地图上标注各个国家的男女比例情况，这个时候就可以使用多视图的可视化方案：
- 首先绘制世界地图背景，使用包含世界地图经纬度的数据；
- 然后再可视化包含各个国家男女比例的用户数据。
import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/world.geo.json')
.then((res) => res.json())
.then((mapData) => {
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
padding: [55, 20],
});
chart.tooltip({
showTitle: false,
showTooltipMarkers: false,
shared: true,
});
// 同步度量
chart.scale({
longitude: {
sync: true,
},
latitude: {
sync: true,
},
});
chart.axis(false);
chart.legend('trend', {
position: 'left',
});
// 绘制世界地图背景 const ds = new DataSet(); const worldMap = ds.createView('back').source(mapData, { type: 'GeoJSON', }); const worldMapView = chart.createView(); worldMapView.data(worldMap.rows); worldMapView.tooltip(false); worldMapView.polygon().position('longitude*latitude').style({ fill: '#fff', stroke: '#ccc', lineWidth: 1, });
// 可视化用户数据
const userData = [
{ name: 'Russia', value: 86.8 },
{ name: 'China', value: 106.3 },
{ name: 'Japan', value: 94.7 },
{ name: 'Mongolia', value: 98 },
{ name: 'Canada', value: 98.4 },
{ name: 'United Kingdom', value: 97.2 },
{ name: 'United States of America', value: 98.3 },
{ name: 'Brazil', value: 96.7 },
{ name: 'Argentina', value: 95.8 },
{ name: 'Algeria', value: 101.3 },
{ name: 'France', value: 94.8 },
{ name: 'Germany', value: 96.6 },
{ name: 'Ukraine', value: 86.3 },
{ name: 'Egypt', value: 102.1 },
{ name: 'South Africa', value: 101.3 },
{ name: 'India', value: 107.6 },
{ name: 'Australia', value: 99.9 },
{ name: 'Saudi Arabia', value: 130.1 },
{ name: 'Afghanistan', value: 106.5 },
{ name: 'Kazakhstan', value: 93.4 },
{ name: 'Indonesia', value: 101.4 },
];
const userDv = ds
.createView()
.source(userData)
.transform({
geoDataView: worldMap,
field: 'name',
type: 'geo.region',
as: ['longitude', 'latitude'],
})
.transform({
type: 'map',
callback: (obj) => {
obj.trend = obj.value > 100 ? '男性更多' : '女性更多';
return obj;
},
});
const userView = chart.createView(); userView.data(userDv.rows); userView.scale({ trend: { alias: '每100位女性对应的男性数量', }, }); userView .polygon() .position('longitude*latitude') .color('trend', ['#F51D27', '#0A61D7']) .tooltip('name*trend') .animate({ leave: { animation: 'fade-out', }, }); chart.render();
});