in src/common/guide.ts [357:442]
export function drawGuideFilter(chart: Chart | View, guideFilter: GuideFilterConfig, config?: any) {
const {
top = true,
status,
axis,
value,
start,
end,
apply,
style,
useGradient = false,
} = guideFilter;
const color = getStatusColor(status);
let guideColor = color;
// 如果镜面或横向不处理
if (!!config?.facet || config?.column === false) {
guideColor = color;
} else if (axis === 'y' && useGradient) {
// TODO 考虑方向
guideColor = `l(90) 0:${color} 1:${color}00`;
}
const guideConfig = {
top,
color: guideColor,
apply,
style,
// @ts-ignore
start: undefined,
// @ts-ignore
end: undefined,
};
if (axis && Array.isArray(value) && value.length > 1) {
if (axis === 'x') {
// y 轴是分类型数据的情况比较少,暂时不处理
guideConfig.start = [value[0], 'min'];
guideConfig.end = [value[1], 'max'];
} else if (axis === 'y' || /y\d/.test(axis)) {
// 形似 y0, y1 ...的axis,说明是多Y轴,多轴的情况下,start/end 必须返回原始数据格式才能正确匹配y轴度量
// 函数接受两个参数 xScales 和 yScales
guideConfig.start = function (
xScales: G2Dependents.Scale[] | Record<string, G2Dependents.Scale>,
) {
if (
!Array.isArray(xScales) &&
(xScales.isCategory || (xScales.x && xScales.x.isCategory))
) {
// 如果x轴是分类型数据,使用[-0.5, length - 0.5]的索引值来让辅助线铺满绘图区域
return { x: -0.5, [axis]: value[0] };
}
return { x: 'min', [axis]: value[0] };
};
// 函数接受两个参数 xScales 和 yScales
guideConfig.end = function (
xScales: G2Dependents.Scale[] | Record<string, G2Dependents.Scale>,
) {
if (!Array.isArray(xScales)) {
// 如果x轴是分类型数据,使用[-0.5, length - 0.5]的索引值来让辅助线铺满绘图区域
if (xScales.x && xScales.x.isCategory) {
return { x: xScales.x.values.length - 0.5, [axis]: value[1] };
}
if (xScales.isCategory) {
// @ts-ignore G2 的类型声明和实际传入不同,暂时忽略报错
return { x: xScales.values.length - 0.5, [axis]: value[1] };
}
}
return { x: 'max', [axis]: value[1] };
};
}
}
if (start) {
guideConfig.start = start;
}
if (end) {
guideConfig.end = end;
}
if (guideConfig.start && guideConfig.end) {
chart.annotation().regionFilter(guideConfig);
} else {
warn('config.guide', 'filter 定义不全');
}
}