From c80f0152398ab757f9f91d7df780cf75e150085a Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Wed, 13 Apr 2022 21:25:49 +0800 Subject: [PATCH 01/13] fix: xAxis label overflow fixed when containLabel=true --- src/coord/axisHelper.ts | 15 +++++++++++---- src/coord/cartesian/Grid.ts | 35 ++++++++++++++++++++++++++++++++--- 2 files changed, 43 insertions(+), 7 deletions(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index c487d52871..f54dacd636 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -292,9 +292,9 @@ export function getAxisRawValue(axis: Axis, tick: ScaleTick): number | string { /** * @param axis - * @return Be null/undefined if no labels. + * @return Return the largest, first and the last label BoundingRects. Be null/undefined if no labels. */ -export function estimateLabelUnionRect(axis: Axis) { +export function estimateLabelRect(axis: Axis) { const axisModel = axis.model; const scale = axis.scale; @@ -319,6 +319,8 @@ export function estimateLabelUnionRect(axis: Axis) { const labelFormatter = makeLabelFormatter(axis); let rect; + let firstLabelRect; + let lastLabelRect; let step = 1; // Simple optimization for large amount of labels if (tickCount > 40) { @@ -333,11 +335,16 @@ export function estimateLabelUnionRect(axis: Axis) { const label = labelFormatter(tick, i); const unrotatedSingleRect = axisLabelModel.getTextRect(label); const singleRect = rotateTextRect(unrotatedSingleRect, axisLabelModel.get('rotate') || 0); - + if (i === 0) { + firstLabelRect = new BoundingRect(singleRect.x, singleRect.y, singleRect.width, singleRect.height); + } + if (i + step >= tickCount) { + lastLabelRect = new BoundingRect(singleRect.x, singleRect.y, singleRect.width, singleRect.height); + } rect ? rect.union(singleRect) : (rect = singleRect); } - return rect; + return {rect, firstLabelRect, lastLabelRect}; } function rotateTextRect(textRect: RectLike, rotate: number) { diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index 691effdd0e..6907660f36 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -24,12 +24,12 @@ */ import {isObject, each, indexOf, retrieve3, keys} from 'zrender/src/core/util'; -import {getLayoutRect, LayoutRect} from '../../util/layout'; +import {box, getLayoutRect, LayoutRect} from '../../util/layout'; import { createScaleByModel, ifAxisCrossZero, niceScaleExtent, - estimateLabelUnionRect, + estimateLabelRect, getDataDimensionsOnAxis } from '../../coord/axisHelper'; import Cartesian2D, {cartesian2DDimensions} from './Cartesian2D'; @@ -188,7 +188,7 @@ class Grid implements CoordinateSystemMaster { if (isContainLabel) { each(axesList, function (axis) { if (!axis.model.get(['axisLabel', 'inside'])) { - const labelUnionRect = estimateLabelUnionRect(axis); + const labelUnionRect = estimateLabelRect(axis).rect; if (labelUnionRect) { const dim: 'height' | 'width' = axis.isHorizontal() ? 'height' : 'width'; const margin = axis.model.get(['axisLabel', 'margin']); @@ -202,6 +202,35 @@ class Grid implements CoordinateSystemMaster { } } }); + //Adjust grid.width to keep xAxis labels in dom + const [xAxis, yAxis] = axesList[0].isHorizontal() ? axesList : axesList.slice().reverse(); + const {firstLabelRect, lastLabelRect} = estimateLabelRect(xAxis); + const labelUnionRect = estimateLabelRect(yAxis).rect; + const margin = xAxis.model.get(['axisLabel', 'margin']); + //When yAxis is on the right, check the left margin instead + if (yAxis.position === 'right') { + if (firstLabelRect.width/2 >= boxLayoutParams.left) { + gridRect.width -= firstLabelRect.width/2 - Number(boxLayoutParams.left) + margin; + gridRect.x += firstLabelRect.width/2 - Number(boxLayoutParams.left) + margin; + } + } + else { + //Long last label exceeds the right boundary + if (lastLabelRect.width/2 >= boxLayoutParams.right) { + gridRect.width -= lastLabelRect.width/2 - Number(boxLayoutParams.right) + margin; + } + //Long first label still exceeds the left boundary even when yAxis on the left + if (firstLabelRect.width/2 >= Number(boxLayoutParams.left) + labelUnionRect.width) { + gridRect.width -= firstLabelRect.width/2 + - Number(boxLayoutParams.left) + - labelUnionRect.width + + margin; + gridRect.x += firstLabelRect.width/2 + - Number(boxLayoutParams.left) + - labelUnionRect.width + + margin; + } + } adjustAxes(); } From c2bb3b0168b92c658930169d1df654c87e4fa477 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Wed, 13 Apr 2022 22:24:42 +0800 Subject: [PATCH 02/13] Update testcase and lint style error --- src/coord/cartesian/Grid.ts | 21 +- test/gridContainLabel.html | 534 ++++++++++++++++++++++++++++++++++++ 2 files changed, 543 insertions(+), 12 deletions(-) create mode 100644 test/gridContainLabel.html diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index 6907660f36..dc17a885f6 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -179,9 +179,8 @@ class Grid implements CoordinateSystemMaster { }); this._rect = gridRect; - + const axesList = this._axesList; - adjustAxes(); // Minus label size @@ -209,32 +208,30 @@ class Grid implements CoordinateSystemMaster { const margin = xAxis.model.get(['axisLabel', 'margin']); //When yAxis is on the right, check the left margin instead if (yAxis.position === 'right') { - if (firstLabelRect.width/2 >= boxLayoutParams.left) { - gridRect.width -= firstLabelRect.width/2 - Number(boxLayoutParams.left) + margin; - gridRect.x += firstLabelRect.width/2 - Number(boxLayoutParams.left) + margin; + if (firstLabelRect.width / 2 >= boxLayoutParams.left) { + gridRect.width -= firstLabelRect.width / 2 - Number(boxLayoutParams.left) + margin; + gridRect.x += firstLabelRect.width / 2 - Number(boxLayoutParams.left) + margin; } } else { //Long last label exceeds the right boundary - if (lastLabelRect.width/2 >= boxLayoutParams.right) { - gridRect.width -= lastLabelRect.width/2 - Number(boxLayoutParams.right) + margin; + if (lastLabelRect.width / 2 >= boxLayoutParams.right) { + gridRect.width -= lastLabelRect.width / 2 - Number(boxLayoutParams.right) + margin; } //Long first label still exceeds the left boundary even when yAxis on the left - if (firstLabelRect.width/2 >= Number(boxLayoutParams.left) + labelUnionRect.width) { - gridRect.width -= firstLabelRect.width/2 + if (firstLabelRect.width / 2 >= Number(boxLayoutParams.left) + labelUnionRect.width) { + gridRect.width -= firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; - gridRect.x += firstLabelRect.width/2 + gridRect.x += firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; } } - adjustAxes(); } - each(this._coordsList, function (coord) { // Calculate affine matrix to accelerate the data to point transform. // If all the axes scales are time or value. diff --git a/test/gridContainLabel.html b/test/gridContainLabel.html new file mode 100644 index 0000000000..30f027fcce --- /dev/null +++ b/test/gridContainLabel.html @@ -0,0 +1,534 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ + + + + + + + + + + + + + + From 6b57c89127c4d7656887374b6e7da57bd6a7962a Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Wed, 13 Apr 2022 22:29:42 +0800 Subject: [PATCH 03/13] fix lint style error --- src/coord/cartesian/Grid.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index dc17a885f6..2e26807403 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -179,7 +179,6 @@ class Grid implements CoordinateSystemMaster { }); this._rect = gridRect; - const axesList = this._axesList; adjustAxes(); @@ -220,14 +219,8 @@ class Grid implements CoordinateSystemMaster { } //Long first label still exceeds the left boundary even when yAxis on the left if (firstLabelRect.width / 2 >= Number(boxLayoutParams.left) + labelUnionRect.width) { - gridRect.width -= firstLabelRect.width / 2 - - Number(boxLayoutParams.left) - - labelUnionRect.width - + margin; - gridRect.x += firstLabelRect.width / 2 - - Number(boxLayoutParams.left) - - labelUnionRect.width - + margin; + gridRect.width -= firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; + gridRect.x += firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; } } adjustAxes(); From c8a490656f29aec8564b8142adf546058d612aab Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Wed, 13 Apr 2022 22:34:54 +0800 Subject: [PATCH 04/13] fix lint style error 2 --- src/coord/cartesian/Grid.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index 2e26807403..b85513fb53 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -218,9 +218,10 @@ class Grid implements CoordinateSystemMaster { gridRect.width -= lastLabelRect.width / 2 - Number(boxLayoutParams.right) + margin; } //Long first label still exceeds the left boundary even when yAxis on the left - if (firstLabelRect.width / 2 >= Number(boxLayoutParams.left) + labelUnionRect.width) { - gridRect.width -= firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; - gridRect.x += firstLabelRect.width / 2 - Number(boxLayoutParams.left) - labelUnionRect.width + margin; + let leftMargin = Number(boxLayoutParams.left); + if (firstLabelRect.width / 2 >= leftMargin + labelUnionRect.width) { + gridRect.width -= firstLabelRect.width / 2 - leftMargin - labelUnionRect.width + margin; + gridRect.x += firstLabelRect.width / 2 - leftMargin - labelUnionRect.width + margin; } } adjustAxes(); From 21b4380f250751d92a2822764537f7bdc5353c57 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 18 Apr 2022 10:00:45 +0800 Subject: [PATCH 05/13] Update first/last label get with bounding rect clone --- src/coord/axisHelper.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index f54dacd636..d19d1bf575 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -336,10 +336,10 @@ export function estimateLabelRect(axis: Axis) { const unrotatedSingleRect = axisLabelModel.getTextRect(label); const singleRect = rotateTextRect(unrotatedSingleRect, axisLabelModel.get('rotate') || 0); if (i === 0) { - firstLabelRect = new BoundingRect(singleRect.x, singleRect.y, singleRect.width, singleRect.height); + firstLabelRect = singleRect.clone(); } if (i + step >= tickCount) { - lastLabelRect = new BoundingRect(singleRect.x, singleRect.y, singleRect.width, singleRect.height); + lastLabelRect = singleRect.clone(); } rect ? rect.union(singleRect) : (rect = singleRect); } From f00c4ecb530fb37a981b1fcfe29982037446edce Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 19 Apr 2022 09:09:27 +0800 Subject: [PATCH 06/13] Update method with getTicksCoord --- src/coord/axisHelper.ts | 16 +++++--------- src/coord/cartesian/Grid.ts | 44 ++++++++++++++++++------------------- 2 files changed, 27 insertions(+), 33 deletions(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index d19d1bf575..e803354bc6 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -318,9 +318,8 @@ export function estimateLabelRect(axis: Axis) { const axisLabelModel = axis.getLabelModel(); const labelFormatter = makeLabelFormatter(axis); - let rect; - let firstLabelRect; - let lastLabelRect; + let labelUnionRect; + let labelRects = []; let step = 1; // Simple optimization for large amount of labels if (tickCount > 40) { @@ -335,16 +334,11 @@ export function estimateLabelRect(axis: Axis) { const label = labelFormatter(tick, i); const unrotatedSingleRect = axisLabelModel.getTextRect(label); const singleRect = rotateTextRect(unrotatedSingleRect, axisLabelModel.get('rotate') || 0); - if (i === 0) { - firstLabelRect = singleRect.clone(); - } - if (i + step >= tickCount) { - lastLabelRect = singleRect.clone(); - } - rect ? rect.union(singleRect) : (rect = singleRect); + labelRects.push(singleRect.clone()); + labelUnionRect ? labelUnionRect.union(singleRect) : (labelUnionRect = singleRect); } - return {rect, firstLabelRect, lastLabelRect}; + return {labelUnionRect, labelRects}; } function rotateTextRect(textRect: RectLike, rotate: number) { diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index b85513fb53..24e1aa6044 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -186,7 +186,7 @@ class Grid implements CoordinateSystemMaster { if (isContainLabel) { each(axesList, function (axis) { if (!axis.model.get(['axisLabel', 'inside'])) { - const labelUnionRect = estimateLabelRect(axis).rect; + const {labelUnionRect} = estimateLabelRect(axis); if (labelUnionRect) { const dim: 'height' | 'width' = axis.isHorizontal() ? 'height' : 'width'; const margin = axis.model.get(['axisLabel', 'margin']); @@ -200,29 +200,29 @@ class Grid implements CoordinateSystemMaster { } } }); + adjustAxes(); //Adjust grid.width to keep xAxis labels in dom - const [xAxis, yAxis] = axesList[0].isHorizontal() ? axesList : axesList.slice().reverse(); - const {firstLabelRect, lastLabelRect} = estimateLabelRect(xAxis); - const labelUnionRect = estimateLabelRect(yAxis).rect; - const margin = xAxis.model.get(['axisLabel', 'margin']); - //When yAxis is on the right, check the left margin instead - if (yAxis.position === 'right') { - if (firstLabelRect.width / 2 >= boxLayoutParams.left) { - gridRect.width -= firstLabelRect.width / 2 - Number(boxLayoutParams.left) + margin; - gridRect.x += firstLabelRect.width / 2 - Number(boxLayoutParams.left) + margin; - } + const xAxis = axesList[0].isHorizontal() ? axesList[0] : axesList[1]; + const {labelRects} = estimateLabelRect(xAxis); + const tickCoord = xAxis.getTicksCoords(); + const leftTick = xAxis.inverse ? tickCoord[tickCoord.length - 1] : tickCoord[0]; + const rightTick = xAxis.inverse ? tickCoord[0] : tickCoord[tickCoord.length - 1]; + const leftExceed = leftTick.coord + + gridRect.x + - labelRects[leftTick.tickValue].width/2; + const rightExceed = rightTick.coord + + labelRects[rightTick.tickValue].width/2 + - Number(boxLayoutParams.right) + -gridRect.width; + //A buffer to complement the performance in different screen + const MARGIN_BUFFER = 20; + //Check left margin + if (leftExceed < 0) { + gridRect.width -= -leftExceed + MARGIN_BUFFER; + gridRect.x += -leftExceed + MARGIN_BUFFER; } - else { - //Long last label exceeds the right boundary - if (lastLabelRect.width / 2 >= boxLayoutParams.right) { - gridRect.width -= lastLabelRect.width / 2 - Number(boxLayoutParams.right) + margin; - } - //Long first label still exceeds the left boundary even when yAxis on the left - let leftMargin = Number(boxLayoutParams.left); - if (firstLabelRect.width / 2 >= leftMargin + labelUnionRect.width) { - gridRect.width -= firstLabelRect.width / 2 - leftMargin - labelUnionRect.width + margin; - gridRect.x += firstLabelRect.width / 2 - leftMargin - labelUnionRect.width + margin; - } + if (rightExceed > 0) { + gridRect.width -= rightExceed + MARGIN_BUFFER; } adjustAxes(); } From f53c27124ec0b9138a166f899a33efa404c99d03 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 19 Apr 2022 09:20:41 +0800 Subject: [PATCH 07/13] fix lint error --- src/coord/cartesian/Grid.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index 24e1aa6044..b940daeade 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -209,11 +209,11 @@ class Grid implements CoordinateSystemMaster { const rightTick = xAxis.inverse ? tickCoord[0] : tickCoord[tickCoord.length - 1]; const leftExceed = leftTick.coord + gridRect.x - - labelRects[leftTick.tickValue].width/2; + - labelRects[leftTick.tickValue].width / 2; const rightExceed = rightTick.coord - + labelRects[rightTick.tickValue].width/2 + + labelRects[rightTick.tickValue].width / 2 - Number(boxLayoutParams.right) - -gridRect.width; + - gridRect.width; //A buffer to complement the performance in different screen const MARGIN_BUFFER = 20; //Check left margin From 7ee50c25a6712bee97d80124b7212366ef96624e Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Thu, 21 Apr 2022 09:44:40 +0800 Subject: [PATCH 08/13] find exceed by creating bounding rect --- src/coord/cartesian/Grid.ts | 31 ++++++++++++++++--------------- test/gridContainLabel.html | 8 ++++++++ 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index b940daeade..6c66d30f99 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -53,6 +53,7 @@ import { isIntervalOrLogScale } from '../../scale/helper'; import { alignScaleTicks } from '../axisAlignTicks'; import IntervalScale from '../../scale/Interval'; import LogScale from '../../scale/Log'; +import BoundingRect from 'zrender/src/core/BoundingRect'; type Cartesian2DDimensionName = 'x' | 'y'; @@ -204,25 +205,25 @@ class Grid implements CoordinateSystemMaster { //Adjust grid.width to keep xAxis labels in dom const xAxis = axesList[0].isHorizontal() ? axesList[0] : axesList[1]; const {labelRects} = estimateLabelRect(xAxis); - const tickCoord = xAxis.getTicksCoords(); - const leftTick = xAxis.inverse ? tickCoord[tickCoord.length - 1] : tickCoord[0]; - const rightTick = xAxis.inverse ? tickCoord[0] : tickCoord[tickCoord.length - 1]; - const leftExceed = leftTick.coord - + gridRect.x - - labelRects[leftTick.tickValue].width / 2; - const rightExceed = rightTick.coord - + labelRects[rightTick.tickValue].width / 2 - - Number(boxLayoutParams.right) - - gridRect.width; - //A buffer to complement the performance in different screen - const MARGIN_BUFFER = 20; + //Find all displayed labels and create the union rect of them + const labelViews = xAxis.getViewLabels(); + let labelUnionRects: BoundingRect; + each(labelViews, function(label, index) { + let labelWidth = labelRects[label.tickValue].width; + let labelX = xAxis.dataToCoord(label.tickValue) + gridRect.x - labelWidth / 2; + let labelrect = new BoundingRect(labelX, 0, labelWidth, 1); + labelUnionRects ? labelUnionRects.union(labelrect) : labelUnionRects = labelrect; + }); + const leftExceed = labelUnionRects.x; + const rightExceed = labelUnionRects.x + labelUnionRects.width - api.getWidth(); + //Check left margin if (leftExceed < 0) { - gridRect.width -= -leftExceed + MARGIN_BUFFER; - gridRect.x += -leftExceed + MARGIN_BUFFER; + gridRect.width -= -leftExceed; + gridRect.x += -leftExceed; } if (rightExceed > 0) { - gridRect.width -= rightExceed + MARGIN_BUFFER; + gridRect.width -= rightExceed; } adjustAxes(); } diff --git a/test/gridContainLabel.html b/test/gridContainLabel.html index 30f027fcce..78fb3f8dd1 100644 --- a/test/gridContainLabel.html +++ b/test/gridContainLabel.html @@ -75,6 +75,10 @@ axisLine:{ onZero: false }, + axisLabel:{ + showMaxLabel:true, + interval: 3 + }, //position: 'top', data: [ "2022-03-09", @@ -315,6 +319,10 @@ axisLine:{ onZero: false }, + axisLabel:{ + showMaxLabel:true, + interval: 3 + }, //position: 'top', data: [ "2022-03-09", From b30b557e2241ff9e08af717071ae060395515a56 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Thu, 21 Apr 2022 09:49:07 +0800 Subject: [PATCH 09/13] fix lint errors --- src/coord/axisHelper.ts | 2 +- src/coord/cartesian/Grid.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index e803354bc6..de046073e2 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -319,8 +319,8 @@ export function estimateLabelRect(axis: Axis) { const labelFormatter = makeLabelFormatter(axis); let labelUnionRect; - let labelRects = []; let step = 1; + const labelRects = []; // Simple optimization for large amount of labels if (tickCount > 40) { step = Math.ceil(tickCount / 40); diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index 6c66d30f99..f657acac06 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -208,10 +208,10 @@ class Grid implements CoordinateSystemMaster { //Find all displayed labels and create the union rect of them const labelViews = xAxis.getViewLabels(); let labelUnionRects: BoundingRect; - each(labelViews, function(label, index) { - let labelWidth = labelRects[label.tickValue].width; - let labelX = xAxis.dataToCoord(label.tickValue) + gridRect.x - labelWidth / 2; - let labelrect = new BoundingRect(labelX, 0, labelWidth, 1); + each(labelViews, function (label, index) { + const labelWidth = labelRects[label.tickValue].width; + const labelX = xAxis.dataToCoord(label.tickValue) + gridRect.x - labelWidth / 2; + const labelrect = new BoundingRect(labelX, 0, labelWidth, 1); labelUnionRects ? labelUnionRects.union(labelrect) : labelUnionRects = labelrect; }); const leftExceed = labelUnionRects.x; From 0fc9077da36a6ae5b8e674fa9b3afe1dfdda91a9 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 25 Apr 2022 11:48:50 +0800 Subject: [PATCH 10/13] Delete step change to correct tickvalue for labelview --- src/coord/axisHelper.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index de046073e2..b4fc850b2c 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -321,10 +321,7 @@ export function estimateLabelRect(axis: Axis) { let labelUnionRect; let step = 1; const labelRects = []; - // Simple optimization for large amount of labels - if (tickCount > 40) { - step = Math.ceil(tickCount / 40); - } + for (let i = 0; i < tickCount; i += step) { const tick = realNumberScaleTicks ? realNumberScaleTicks[i] From 22d64492fc02c0ef0da7d5b1e1b0c0a6bc8f6d8e Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 25 Apr 2022 15:22:55 +0800 Subject: [PATCH 11/13] Update the condition check for index of label rect --- src/coord/cartesian/Grid.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index f657acac06..facd7c5c31 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -209,7 +209,14 @@ class Grid implements CoordinateSystemMaster { const labelViews = xAxis.getViewLabels(); let labelUnionRects: BoundingRect; each(labelViews, function (label, index) { - const labelWidth = labelRects[label.tickValue].width; + //Only when axis type is 'category' or 'time' can 'tickValue' + //correctly point to the index of label. + //When axis type is 'value', tickValue is the exact value of that tick. + //In this case 'interval' would not work so 'index' is the correct index of label + const labelIdx = xAxis.type === 'category' || xAxis.type === 'time' + ? label.tickValue + : index; + const labelWidth = labelRects[labelIdx].width; const labelX = xAxis.dataToCoord(label.tickValue) + gridRect.x - labelWidth / 2; const labelrect = new BoundingRect(labelX, 0, labelWidth, 1); labelUnionRects ? labelUnionRects.union(labelrect) : labelUnionRects = labelrect; From 095110e22cdefe767b73584fb2e915790833580b Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Wed, 27 Apr 2022 15:33:08 +0800 Subject: [PATCH 12/13] fix: time axis label rect do not use tickvalue --- src/coord/cartesian/Grid.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/coord/cartesian/Grid.ts b/src/coord/cartesian/Grid.ts index facd7c5c31..5d876840e6 100644 --- a/src/coord/cartesian/Grid.ts +++ b/src/coord/cartesian/Grid.ts @@ -213,9 +213,7 @@ class Grid implements CoordinateSystemMaster { //correctly point to the index of label. //When axis type is 'value', tickValue is the exact value of that tick. //In this case 'interval' would not work so 'index' is the correct index of label - const labelIdx = xAxis.type === 'category' || xAxis.type === 'time' - ? label.tickValue - : index; + const labelIdx = xAxis.type === 'category' ? label.tickValue : index; const labelWidth = labelRects[labelIdx].width; const labelX = xAxis.dataToCoord(label.tickValue) + gridRect.x - labelWidth / 2; const labelrect = new BoundingRect(labelX, 0, labelWidth, 1); From eb5be1ea8e9640de0a9d56d02c03dc7e951784b4 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Thu, 28 Apr 2022 09:41:32 +0800 Subject: [PATCH 13/13] fix: Update estimateLabelRects early return --- src/coord/axisHelper.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/coord/axisHelper.ts b/src/coord/axisHelper.ts index b4fc850b2c..dd1350380d 100644 --- a/src/coord/axisHelper.ts +++ b/src/coord/axisHelper.ts @@ -299,7 +299,10 @@ export function estimateLabelRect(axis: Axis) { const scale = axis.scale; if (!axisModel.get(['axisLabel', 'show']) || scale.isBlank()) { - return; + return { + labelUnionRect: null, + labelRects: [] + }; } let realNumberScaleTicks: ScaleTick[];