本以为 g2 官网给的例子和文档能够满足日常开发。然而事实是，g2 的用法灵活，官网文档不全面，这就导致开发的时候容易出现磕磕巴巴的现象。一些很简单的配置说明都没有明确给出来，或者给的用法分散在官网的各个页面不聚拢，故此，将开发中遇到的常用又隐蔽的用法整理如下
视图模型
g2.antv.antgroup.com/manual/core…
蓝色部分被称为外边距区域 margin
橙色部分被称为内边距区域 padding
g2 图表默认是有外边距和内边距的，如果我们想精准控制图表的大小，可以设置 margin 和 padding 的值。
chart.attr('padding', 0).attr('margin', 0)
图例
chart?.clear() 以后，绑定的事件如图例的点击事件会被清除掉
图例居中
chart.legend('color', { position: 'right', layout: { justifyContent: 'center' } })
设置图例到图表的距离
.legend('color', {
crossPadding: 30
});
图例点击事件
chart.on("component:click", ()=> {
console.log('hello')
})
堆叠图数据跟图例显示顺序
官网堆叠图例子是 g2.antv.antgroup.com/examples/ge…
可以看到，图例中 London 数据在前，但是堆叠图上面 London 这个数据却在柱状图的最下面，这不符合用户看图的习惯。
怎么让图例的顺序和堆叠图上数据顺序保持一致呢？使用 reverse 是 true 即可
.transform({ type: 'stackY', reverse: true })
设置坐标轴的显示范围
官网给的柱线混合的例子 g2.antv.antgroup.com/zh/examples…，怎么让折线图靠上尽量不和柱子重叠呢？方法是设置折线图的坐标显示数据的范围 domain：
.scale('y', { independent: true, domain: [-10, 10], })
隐藏文字标签
官网给的显示文字标签的 API 如下，但是如何隐藏已经显示的文字标签并没有写
chart
.interval()
.label({
text: 'genre', // 指定绑定的字段
dy: -15, // 指定样式
})
.label({
text: 'sold', // 指定绑定的字段
fill: '#fff', // 指定样式
dy: 5,
});
隐藏标签：
chart.label([])
设置 tooltip 指示线样式
.interaction('tooltip', {
crosshairsStroke: 'red', // 颜色
crosshairsStrokeWidth: 1, // 线的粗细
// 虚线样式
// 第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。
crosshairsLineDash: [2, 3]
})
颜色映射
直白点就是设置图表颜色，比如柱状图的颜色。g2.antv.antgroup.com/manual/extr…
不会生成图例
方式一：scale 为 identity
设置编码 color 的通道，然后 scale 设置为 identity 恒等映射。特点是每个数据项可以自己设置自己的颜色。缺点是不能自动生成图例
chart
.interval()
.data([
{ genre: 'Sports', sold: 275, color: 'red' },
{ genre: 'Strategy', sold: 115, color: 'blue' },
{ genre: 'Action', sold: 120, color: 'green' },
{ genre: 'Shooter', sold: 350, color: 'red' },
{ genre: 'Other', sold: 150, color: 'black' },
])
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'color')
.scale('color', { type: 'identity' }); // 设置该比例尺为恒等映射
chart.render();
方式二：encode 为 constant
设置编码 color 的通道为 constant，特点是图表用同一个颜色，缺点是不会自动生成图例。
chart.interval().data(data).encode('x', 'year')
.encode('y', 'sales')
.encode('color', {
type: 'constant',
value: 'red'
})
方式三：style 样式
通过 mark.style 来设置颜色，这里设置的颜色比 encode.color 的优先级更高，同时不会生成图例。
chart
.interval()
.style('fill', (datum, index, data) => {
const { frequency } = datum;
if (frequency > 0.1) return '#3376cd';
if (frequency > 0.05) return '#f4bb51';
return '#b43a29';
});
自动生成图例
通过设置颜色 range 来设置不同数据的颜色。
chart
.interval()
.data([
{ genre: 'Sports', sold: 0 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
])
.encode('x', 'genre')
.encode('y', 'sold')
.encode('color', 'genre')
.scale('color', {
type: 'ordinal',
range: ['#7593ed', '#95e3b0', '#6c7893', '#e7c450', '#7460eb'],
})
.style('minHeight', 50);
设置坐标轴为 nice
如图，默认情况下，最大值是 340，按照y轴的坐标轴间隔50，只会显示到 300 而不会显示出来 350，有的时候就挺难看的，需要设置坐标轴 nice 为 true。
.scale('y', {nice: true,})
桑基图
import { Chart } from '@antv/g2';
import { schemeTableau10 } from 'd3-scale-chromatic';
const chart = new Chart({
container: 'container',
width: 900,
height: 600,
});
const data = [
{
"source": "Agricultural 'waste'",
"target": "Bio-conversion",
"value": 124.729
},
{
"source": "Bio-conversion",
"target": "Liquid",
"value": 124.729
},
]
chart
.sankey()
.data({
type: 'inline',
value: data,
transform: [
{
type: 'custom',
callback: (data) => ({ links: data }),
},
],
})
.layout({
nodeAlign: 'center',
nodePadding: 0.03,
})
.scale('color', { range: schemeTableau10 })
.style('labelSpacing', 3)
.style('labelFontWeight', 'bold')
.style('nodeStrokeWidth', 1.2)
.style('linkFillOpacity', 0.4);
chart.render();
