diff --git a/src/coord/Axis.ts b/src/coord/Axis.ts index a71051507c6..00a32140366 100644 --- a/src/coord/Axis.ts +++ b/src/coord/Axis.ts @@ -297,12 +297,13 @@ function fixOnBandTicksCoords( return; } + const intervalIsAutoMode = axis.getTickModel().get('interval') === 'auto'; + const axisExtent = axis.getExtent(); let last; let diffSize; if (ticksLen === 1) { - ticksCoords[0].coord = axisExtent[0]; - last = ticksCoords[1] = {coord: axisExtent[0]}; + ticksCoords[0].coord -= axis.getBandWidth() / 2; } else { const crossLen = ticksCoords[ticksLen - 1].tickValue - ticksCoords[0].tickValue; @@ -312,14 +313,22 @@ function fixOnBandTicksCoords( ticksItem.coord -= shift / 2; }); - const dataExtent = axis.scale.getExtent(); - diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue; + // auto mode: need push a normal tick + // function mode: last tick depend on function return value + // number mode: last tick depend on number + if (intervalIsAutoMode) { + const dataExtent = axis.scale.getExtent(); + diffSize = 1 + dataExtent[1] - ticksCoords[ticksLen - 1].tickValue; - last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize}; + last = {coord: ticksCoords[ticksLen - 1].coord + shift * diffSize}; - ticksCoords.push(last); + ticksCoords.push(last); + } } + // TODO: use array.at(-1) when lib target es2022 + last = ticksCoords[ticksCoords.length - 1]; + const inverse = axisExtent[0] > axisExtent[1]; // Handling clamp. diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts index 6ac305f9bd0..19971fbbf13 100644 --- a/src/coord/axisTickLabelBuilder.ts +++ b/src/coord/axisTickLabelBuilder.ts @@ -344,6 +344,12 @@ function makeLabelsByNumericCategoryInterval(axis: Axis, categoryInterval: numbe const labelModel = axis.getLabelModel(); const result: (MakeLabelsResultObj | number)[] = []; + // onBand mode, need one more tick + // |---1---|---2---|---3---|---4---| need 5 tick + if (axis.onBand && ordinalExtent[1]) { + ordinalExtent[1]++; + } + // TODO: axisType: ordinalTime, pick the tick from each month/day/year/... const step = Math.max((categoryInterval || 0) + 1, 1); @@ -411,7 +417,17 @@ function makeLabelsByCustomizedCategoryInterval(axis: Axis, categoryInterval: Ca const labelFormatter = makeLabelFormatter(axis); const result: (MakeLabelsResultObj | number)[] = []; - zrUtil.each(ordinalScale.getTicks(), function (tick) { + const originTicks = ordinalScale.getTicks(); + // onBand mode, need one more tick + if (axis.onBand && originTicks.length) { + // TODO: use array.at(-1) when lib target es2022 + const lastTicks = originTicks[originTicks.length - 1]; + originTicks.push({ + ...lastTicks, + value: lastTicks.value + 1 + }); + } + zrUtil.each(originTicks, function (tick) { const rawLabel = ordinalScale.getLabel(tick); const tickValue = tick.value; if (categoryInterval(tick.value, rawLabel)) {