fix(图表): 修复堆叠折线图控制处理,保持为空时,空值处不应该有点位的问题

This commit is contained in:
jianneng-fit2cloud
2026-09-08 18:43:56 +08:00
parent 4ce869f5c8
commit 6002c868fc
3 changed files with 38 additions and 4 deletions

View File

@@ -25,6 +25,8 @@ import {
getLineConditionLineYMarks,
getLineTooltipSameDimensionItems,
bindLineLegendState,
configBreakLineStackMark,
filterBreakLinePointMark,
LINE_AXIS_TYPE,
LINE_CONDITION_VISIBLE_DOMAIN_KEY,
LINE_EDITOR_PROPERTY,
@@ -778,7 +780,7 @@ export class Area extends G2ChartView {
protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
const { functionCfg } = parseJson(chart.senior)
const { emptyDataStrategy } = functionCfg
const [areaMark, lineMark] = options.children
const [areaMark, lineMark, pointMark] = options.children
const data = options.data.value
const multiDimension = chart.yAxis?.length > 1
switch (emptyDataStrategy) {
@@ -788,6 +790,7 @@ export class Area extends G2ChartView {
}
merge(areaMark, { style: { connect: false } })
merge(lineMark, { style: { connect: false } })
filterBreakLinePointMark(pointMark)
break
}
case 'ignoreData': {
@@ -985,7 +988,8 @@ export class StackArea extends Area {
customAttr.basicStyle?.gradient ? setGradientColor(color, true, 270) : color
)
).forEach(item => {
if (item.value === null || item.value === undefined) {
// 堆叠断线数据视图以 NaN 保留空坐标,tooltip 仍按空值隐藏
if (item.value === null || item.value === undefined || Number.isNaN(item.value)) {
return
}
const value = valueFormatter(item.value, tooltipAttr.tooltipFormatter)
@@ -1023,7 +1027,7 @@ export class StackArea extends Area {
protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
const { functionCfg } = parseJson(chart.senior)
const { emptyDataStrategy } = functionCfg
const [areaMark, lineMark] = options.children
const [areaMark, lineMark, pointMark] = options.children
const data = options.data.value
const multiDimension = chart.yAxis?.length > 1 || chart.extStack?.length > 0
switch (emptyDataStrategy) {
@@ -1033,6 +1037,10 @@ export class StackArea extends Area {
}
merge(areaMark, { style: { connect: false } })
merge(lineMark, { style: { connect: false } })
configBreakLineStackMark(areaMark, data)
configBreakLineStackMark(lineMark, data)
// stackY 将原始值保存在 y0,需据此识别被堆叠坐标转换的空值
filterBreakLinePointMark(pointMark, 'y0')
break
}
case 'ignoreData': {

View File

@@ -85,6 +85,30 @@ export type LineLegendState = {
visibleSeries?: ReadonlySet<string>
}
const isEmptyLineValue = (value: unknown) => value === null || value === undefined
export const filterBreakLinePointMark = (pointMark: G2Spec, valueChannel: 'y' | 'y0' = 'y') => {
// point 独立过滤空值,保留父级数据的断线语义和真实 0
const filter =
valueChannel === 'y0'
? { type: 'filter' as const, y0: (value: unknown) => !isEmptyLineValue(value) }
: { type: 'filter' as const, y: (value: unknown) => !isEmptyLineValue(value) }
pointMark.transform = [...(pointMark.transform ?? []), filter]
}
export const configBreakLineStackMark = (mark: G2Spec, data: Record<string, any>[]) => {
// 仅在 mark 数据视图中保留空坐标,避免 stackY 将空值数值化为 0
mark.data = {
value: data,
transform: [
{
type: 'map',
callback: item => (isEmptyLineValue(item.value) ? { ...item, value: Number.NaN } : item)
}
]
}
}
export const bindLineLegendState = (chartObj: G2Chart): LineLegendState => {
const state: LineLegendState = {}
chartObj.on('legend:filter', event => {

View File

@@ -23,6 +23,7 @@ import {
getLineConditionLineYMarks,
getLineTooltipSameDimensionItems,
bindLineLegendState,
filterBreakLinePointMark,
LINE_AXIS_TYPE,
LINE_CONDITION_VISIBLE_DOMAIN_KEY,
LINE_EDITOR_PROPERTY,
@@ -821,7 +822,7 @@ export class Line extends G2ChartView {
protected configEmptyDataStrategy(chart: Chart, options: G2Spec): G2Spec {
const { functionCfg } = parseJson(chart.senior)
const { emptyDataStrategy } = functionCfg
const [lineMark] = options.children
const [lineMark, pointMark] = options.children
const data = options.data.value
const multiDimension = chart.yAxis?.length > 1 || chart.xAxisExt?.length > 0
switch (emptyDataStrategy) {
@@ -830,6 +831,7 @@ export class Line extends G2ChartView {
handleBreakLineMultiDimension(data)
}
merge(lineMark, { style: { connect: false } })
filterBreakLinePointMark(pointMark)
break
}
case 'ignoreData': {