fix(图表): 修复堆叠折线图控制处理,保持为空时,空值处不应该有点位的问题
This commit is contained in:
@@ -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': {
|
||||
|
||||
@@ -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 => {
|
||||
|
||||
@@ -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': {
|
||||
|
||||
Reference in New Issue
Block a user