Antv G2

什么是G2？
G2是一个简介的渐进式语法，主要用于制作网页的可视化。它提供了一套函数风格式、声明形式的API和组件化的编程范式，希望帮助用户快速完成报表搭建、数据探索、可视化等多样的需求
G2的核心概念：

标记（Mark）：绘制数据驱动的图形

转换（Transform）：派生数据

比例尺（Scale）：将抽象的数据映射为视图数据

坐标系（Coordinate）：对空间通道应用点变换

视图复合（Composition）：管理和增强视图

动画（Animation）：数据驱动的动画和连续的形变动画

交互（Iteraction）：操作视图并且展示详细信息

为什么选G2？和echart对比
设计理念：

G2：基于图形语法，注重数据对图形的微观控制和自由映射，设计出发点是图形
Echart：基于图标类型，提供图表中数据相关的图形映射配置，设计出发点是图表

使用场景：

G2： 更适合需要高度定制和灵活控制图形展示的场景，可以创建非常用的图表类型。

Echart：更适合快速展示常规图标信息，封装好难点，配置数据即可使用

Mark 绘制数据驱动的图形

• interval - 通常用来绘制柱、条形图，饼图等相关图表。
• point - 主要用于绘制散点图，利用点的粒度来分析数据的分布情况。
• line - 根据一系列的点，绘制折线，通常用来绘制折线图。
• area - 通常用来绘制我们常见的面积图，通过填充，可以更好突出趋势堆积信息。
• cell - 根据 x, y 将空间划分成一个子空间，然后进行可视化绘制，常见于一些方块图，如日历图、聚合热力图等。
• rect - 使用两组 x，两组 y 来定位一个矩形区域，常用于直方图、矩阵树图等。
• link - 标记使用两个用 (x, y) 定位的点，绘制一条带方向的直线。通过指定 x，y 通道为长度为 2 的字段数组即可。
• vector - 用 start，end 两个点来表示一个向量，通常用于绘制具备向量含义的数据，比如风向量场等。
• box - 用来绘制箱线图，通常用来展示一组数据分布情况的统计图。
• boxplot - 用来绘制箱线图，并且内置数据的聚合操作。
• text - 通过指定文本的样式通道，可以在画布上绘制和数据绑定的文本字符。
• image - 利用 src 通道在画布上绘制图片。
• shape - 使用自定义函数灵活绘制自定义图形。
• lineX - 指定 x 通道来绘制垂直于 x 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。
• lineY - 指定 y 通道来绘制垂直于 y 轴的辅助线，常用于绘制平均值或其他聚合数据辅助线。
• range - 使用一组 x(x1, x2) 和一组 y(y1, y2) 来定位一个矩形区域，常用于绘制高亮指定区域的辅助区域。
• rangeX - 使用一组 x(x1, x2) 来定位一个垂直于 x 轴的矩形区域，常用于绘制高亮指定区域的辅助区域。
• rangeY - 使用一组 y(y1, y2) 来定位一个垂直于 y 轴的矩形区域，常用于绘制高亮指定区域的辅助区域。
• polygon - 利用多组 (x, y) 数据点，在画布中绘制闭合的多边形，通常结合一些社区布局算法使用。
• wordCloud - 绘制词云图。
• density - 渲染核密度数据，多用于小提琴图。
• heatmap - 接受热力数据，多用于绘制热力图。

创建可视

new Chart       创建Chart实例        antV G2中的autoFit属性是指图表是否自适应容器宽高。
chart.interval   添加interval图形
interval
通常用来绘制柱状图、条形图、饼图等，通过坐标系、坐标尺、数据Transform等的变化，可以产生多种多样的可视化表现样式，是图形语法中，常见的Mark

import { Chart } from '@antv/g2';

const data = [
  { letter: 'A', frequency: 0.08167 },
  { letter: 'B', frequency: 0.01492 },
];
const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.interval().data(data)
.encode('x', 'letter')
.encode('y', 'frequency')
.encode('color', 'red')
.style('fillOpacity', 0.6);
chart.render();

  .style('maxWidth', 600);  属性修改

 .style({

    'minWidth': 50,

    'fillOpacity': 1

  })

 .encode('shape', 'hollow')    即可实现空心矩形

 .encode('color', 'country')  //设置颜色

Coordinate -坐标系

chart
  .interval()
  .coordinate({ transform: [{ type: 'transpose' }] }) //设置类型
  .data(data)
  .encode('x', 'year')
  .encode('y', 'sales');

chart..coordinate({ transform: [{ type: 'transpose' }] })
type有多种类型
type: 'fisheye'   //鱼眼坐标系变换对输入的维度应用笛卡尔鱼眼效果。

type: 'parallel'   //Parallel 是平行坐标系变换，将笛卡尔直角坐标系坐标变换为平行坐标系下的坐标。

type: 'polar'   //Polar 是极坐标系变换，将笛卡尔直角坐标系坐标变换为极坐标系下的坐标，常用于玫瑰图和柱状图之间的转换。

type: 'transpose'  Transpose 是坐标系的转置变换，将 (x, y) 变换成 (y, x)，常用于条形图和柱状图之间的转换。  （常用）

等等

Scale -比例尺

将抽象的数据映射为视觉数据。

• band - 特殊的 ordinal 比例尺，它的值域范围是一个连续的范围。
• linear - 针对连续数据，对数据进行连续映射的比例尺。
• sqrt - 指数固定为 0.5 的 pow 比例尺。
• pow - 类似于 linear 比例尺，但是映射函数为指数函数（exponential）。
• log - 类似于 linear 比例尺，但是映射函数为对数函数（logarithmic）。
• ordinal - 将离散的数据映射到另外一个离散数据中。
• point - 特殊 band 比例尺，固定配置 bandWith = 0。
• quantize - 类似于 threshold，但是计算切片的方式是基于元素的数据值。
• quantile - 类似于 threshold， 但是计算切片的方式是基于元素在数据中的索引。
• threshold - 将连续的值域范围划分为多个切片，并将这些切片映射到一个离散的数据中。
• time - 特殊的 linear 比例尺，它的值域是一组有时间顺序的数据

Transform - 变换

• bin - 对连续的 x 和 连续的 y 通道进行分箱，并且对通道根据指定的 reducer 进行聚合。
• binX - 对 x 通道进行分箱，如果希望对 y 通道进行分箱，使用 binX + transpose 坐标系。
• diffY - 对 y 和 y1 通道求差集。
• dodgeX - 生成 series 通道值为 color 通道的值，根据 series 通道实现分组效果。
• flexX - 根据指定通道设置 x 比例尺的 flex 属性，实现不等宽矩形的效果。
• group - 对离散的 x 和 连续的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
• groupColor - 对离散的 color 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
• groupX - 对离散的 x 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
• groupY - 对离散的 y 通道进行分组，并且对通道根据指定的 Reducer 进行聚合。
• jitter - 根据离散的 x 和 离散的 y 比例尺，生成 dy 和 dx 通道，实现在某个区域散开的效果。
• jitterX - 根据离散的 x 比例尺，生成 dx 通道，实现在某个区域的 x 方向散开的效果。
• jitterY - 根据离散的 y 比例尺，生成 dy 通道，实现在某个区域的 y 方向散开的效果。
• normalizeY - 对 y 和 y1 通道根据指定的 basis 进行归一化处理。
• select - 按照指定通道进行分组，根据指定通道和 selector 从每组选择出数据。
• selectX - 按照指定通道进行分组，根据 x 通道和 selector 从每组选择出数据。
• selectY - 按照指定的通道进行分组，根据 y 通道和 selector 从每组选择出数据。
• pack - 生成 transform 和 scale 属性，从而让图形在空间中紧凑排列。
• sample - 当数据量远大于屏幕像素的时候，开启一些内置的采样策略，提升图表绘制性能。
• sortColor - 对离散的 color 比例尺的定义域根据指定通道排序。
• sortX - 对离散的 x 比例尺的定义域根据指定通道排序。
• sortY - 对离散的 y 比例尺的定义域根据指定通道排序。
• stackEnter - 对 enterDuration 和 enterDelay 通道进行堆叠，实现分组动画的效果。
• stackY - 按照指定通道分组，对每组的 y 和 y1 通道进行堆叠，实现堆叠效果。
• symmetryY - 按照指定通道分组，给每组的 y 和 y1 通道添加偏移，实现对称效果。

Interaction - 交互 操作视图并且展现详细信息。

• brushFilter - 框选筛选。
• brushXFilter - x 方向框选筛选。
• brushYFilter - y 方向框选筛选。
• brushHighlight - 框选高亮。
• brushXHighlight - x 方向框选高亮。
• brushYHighlight - y 方向框选高亮。
• brushAxisHighlight - 坐标轴框选高亮。
• legendHighlight - 图例高亮。
• legendFilter - 图例筛选。
• tooltip - 展现提示信息。
• elementHighlight - 高亮元素。
• elementHighlightByX - 高亮具有相同 x 通道值的元素。
• elementHighlightByColor - 高亮具有相同 color 通道的元素。
• elementSelect - 选择元素。
• elementSelectByX - 选择拥有相同 x 通道值的元素。
• elementSelectByColor - 选择拥有相同 color 通道值的元素。
• fisheye - 鱼眼交互。
• charIndex - 索引图表。
• poptip - 展现提示文本。
• sliderFilter - 拖动条筛选。

.tooltip((d) => ({ value: d.people, name: d.sex === 1 ? 'Male' : 'Female' }));   

修改提示名称

Component - 组件  绘制辅助视觉元素。

• title - 绘制图表标题和副标题。
• axis - 绘制坐标轴。
• legend - 绘制图例。
• scrollbar - 绘制滚动条。
• slider - 绘制拖动条。

axis: {
      y: {
        // Title
        title: 'Frequency',
        titleSpacing: 30,
        titleFill: 'steelblue',

        // Line
        line: true,
        arrow: true,
        lineArrowOffset: 10,
        lineArrowSize: 30,
        lineLineWidth: 10,

        // Tick
        tickLength: 20,
        tickFilter: (_, i) => i % 3 !== 0,

        // Label
        labelFormatter: '.0%',

        // Grid
        gridLineDash: null,
        gridStroke: 'red',
        gridStrokeWidth: 5,
        gridAreaFill: '#eee',
      },
      x: {
        title: 'Letter',
        labelFormatter: (d) => d.repeat(3),
        labelFontSize: 30,
        labelSpacing: 30,
      },
    },

chart.axis('y', { labelFormatter: '.0%' })   把y轴0.06 换成6%

chart.axis('x', {

    labelSpacing: 4,

    labelTransform: 'rotate(90)',

  })  //将x轴名称旋转90度

chart.axis('y', { labelFormatter: '~s' });   //6个0置换成M

chart.legend('color', { labelFormatter: (d) => (d === 1 ? 'Male' : 'Female') })    

 chart.title('This is the title of chart.');

 

// 开启 X 轴方向上的滚动条

.scrollbar('x', {});

 

// 开启 Y 方向缩略轴

.slider('y', {});

 

chart.state('selected', { fill: '#1783FF', stroke: 'black', strokeWidth: 1 })

chart.state('unselected', { fill: '#ccc' })

.interaction('elementSelect'); // 设置高亮交互;

这3配合使用
设置选中和不选中

 Label 绘制数据标签和标签属性的变换

• contrastReverse - 标签颜色在图形背景上对比度低的情况下，从指定色板选择一个对比度最优的颜色。
• overflowHide - 对于标签在图形上放置不下的时候，隐藏标签。
• overlapDodgeY - 对位置碰撞的标签在 y 方向上进行调整，防止标签重叠。
• overlapHide - 对位置碰撞的标签进行隐藏，默认保留前一个，隐藏后一个。

chart.label({

    text: 'frequency',

    formatter: '.1%',

    textAlign: (d) => (+d.frequency > 0.008 ? 'right' : 'start'),

    fill: (d) => (+d.frequency > 0.008 ? '#fff' : '#000'),

    dx: (d) => (+d.frequency > 0.008 ? -5 : 5),

  });

 area

目前 area 有以下几个内置 shape 图形，默认为 area。

图形	描述	示例
area	绘制直线连接的面积图
smooth	绘制平滑曲线的面积图
vh	绘制阶梯面积图，先竖线后横线连接
hv	绘制阶梯面积图，先横线后竖线连接
hvh	绘制阶梯面积图，竖横竖，中点连接

chart.area()

Animation -动画 数据驱动的动画和连续的形变动画。

 提供了三种动画场景类型

• enter - 元素第一次出现的出场动画；
• update - 数据更新的时候，元素更新的动画；
• exit - 数据更新的时候，元素被销毁退出画布的动画；

chart.interval().animate('enter', { type: 'fadeIn' });

• fadeIn - 渐现动画。
• fadeOut - 渐隐动画。
• growInX - 容器沿着 x 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
• growInY - 容器沿着 y 方向放大的矩阵动画，多用于 G.Group 容器类进行动画。
• morphing - 图形之间的形变动画。
• pathIn - Path 路径入场动画。
• scaleInX - 单个图形沿着 x 方向的生长动画。
• scaleInY - 单个图形沿着 y 方向的生长动画。
• scaleOutX - 单个图形沿着 x 方向的消退动画。
• scaleOutY - 单个图形沿着 y 方向的消退动画。
• waveIn - 划入入场动画效果，不同坐标系下效果不同。
• zoomIn - 沿着图形中心点的放大动画。
• zoomOut - 沿着图形中心点的缩小动画。

关键帧动画

上面的动画都是过渡动画，不涉及到数据的更新，G2 也提供了制作关键帧动画的能力。使用 chart.timingKeyframe 创建一个时间容器，用于放置一系列视图，它会对这些视图中有关系的图形元素应用平滑的过渡效果。而对应关系通过 key 和 groupKey 两个通道指定。

 

 

参考：interval | G2