diff --git a/package.json b/package.json index 35746d569e..4770b2790b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@antv/g2plot", - "version": "0.11.11", + "version": "0.11.12", "description": "G2 Plot, a market of plots built with the Grammar of Graphics'", "author": "https://github.com/orgs/antvis/people", "main": "lib/index.js", @@ -50,7 +50,7 @@ } }, "dependencies": { - "@antv/g2": "~3.6.0-beta.9", + "@antv/g2": "~3.6.0-beta.10", "@antv/gui": "~0.1.0", "@antv/g-gesture": "~0.1.0", "fecha": "~3.0.3", @@ -60,7 +60,7 @@ }, "peerDependencies": { "@antv/g": "~3.5.0-beta.1", - "@antv/component": "~0.4.0-beta.7", + "@antv/component": "~0.4.0-beta.8", "@antv/dom-util": "~2.0.1", "@antv/event-emitter": "^0.1.1", "@antv/matrix-util": "~2.0.2", diff --git a/src/base/controller/padding.ts b/src/base/controller/padding.ts index 769d02affa..8ae1c92a06 100644 --- a/src/base/controller/padding.ts +++ b/src/base/controller/padding.ts @@ -1,7 +1,9 @@ import { BBox, Element } from '@antv/g'; import { DataPointType } from '@antv/g2/lib/interface'; +import { View } from '@antv/g2'; import * as _ from '@antv/util'; import ViewLayer from '../view-layer'; +import { MarginPadding } from '../../interface/types'; interface ControllerConfig { plot: ViewLayer; @@ -114,12 +116,13 @@ export default class PaddingController { if (minY === viewRange.minY) { minY = 0; } - const padding = [ + const padding: MarginPadding = [ 0 - minY + this.bleeding[0], // 上面超出的部分 box.maxX - maxX + this.bleeding[1], // 右边超出的部分 box.maxY - maxY + this.bleeding[2], // 下边超出的部分 0 - box.minX + this.bleeding[3], ]; + this.adjustAxisPadding(view, padding); return padding; } @@ -233,4 +236,24 @@ export default class PaddingController { target[i] += source[i]; } } + + private adjustAxisPadding(view: View, padding: MarginPadding) { + // 3.6.x Axis组件的 autoRotate padding 修正 + const xAxis = view.get('axisController').axes[0]; + if (!xAxis || !xAxis.get('autoRotateLabel') || !xAxis.getOffsetByRotateAngle) { + return; + } + const labelRenderer = xAxis.get('labelRenderer'); + const labels = labelRenderer.getLabels(); + const curOffset = xAxis.getOffsetByRotateAngle(xAxis.get('autoRotateAngle')); + const curTotalWidth = Math.abs(xAxis.get('end').x - xAxis.get('start').x); + const curAvgWidth = Math.abs(labels[1].attr('x') - labels[0].attr('x')); + const newTotalWidth = curTotalWidth - padding[1] - padding[3]; + const newAvgWidth = (curAvgWidth * newTotalWidth) / curTotalWidth; + const newOffset = xAxis.getOffsetByRotateAngle(xAxis.getAutoRotateAngleByAvgWidth(newAvgWidth)); + + if (newOffset > curOffset) { + padding[2] += newOffset - curOffset; + } + } } diff --git a/src/interface/config.ts b/src/interface/config.ts index f6db1d19c2..a6aafd6c82 100644 --- a/src/interface/config.ts +++ b/src/interface/config.ts @@ -46,7 +46,7 @@ export interface IBaseAxis { visible?: boolean; style?: IStyleConfig | ((text: string, idx: number, count: number) => IStyleConfig); }; - autoRotateLabel?: boolean; // 当 label 过长发生遮挡时是否自动旋转坐标轴文本,默认为 true + autoRotateLabel?: boolean | number[]; // 当 label 过长发生遮挡时是否自动旋转坐标轴文本,默认为 true autoHideLabel?: boolean; // 当 label 存在遮挡时,是否自动隐藏被遮挡的坐标轴文本,默认为 false autoRotateTitle?: boolean; label?: {