From b705be4b19504b2b3700626c7445412b9b0912e5 Mon Sep 17 00:00:00 2001 From: LonelySnowman <2438490168@qq.com> Date: Thu, 15 May 2025 17:12:30 +0800 Subject: [PATCH 1/4] feat: linear bar add barpadding option --- .../base/histogram-base-transformer.ts | 2 +- packages/vchart/src/series/bar/bar.ts | 45 +++++++++++++++++-- packages/vchart/src/series/bar/interface.ts | 5 +++ 3 files changed, 47 insertions(+), 5 deletions(-) diff --git a/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts b/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts index 4539a430c9..73c99bad14 100644 --- a/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts +++ b/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts @@ -9,6 +9,6 @@ export class BaseHistogramChartSpecTransformer ex } protected _getDefaultSeriesSpec(spec: T): any { - return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground']); + return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground', 'barPadding']); } } diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 4ae9516bf0..61835f37e1 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -381,6 +381,31 @@ export class BarSeries extends Cartes return this.dataToPositionY1(datum); } + protected _getLinearBarRange = (x: number, x1: number) => { + const realBarWidth = x1 - x; + if (this._spec.barPadding) { + const tempX = x + this._spec.barPadding; + const tempX1 = x1 - this._spec.barPadding; + if (tempX < tempX1) { + x = tempX; + x1 = tempX1; + } + } + + const curBarWidth = x1 - x; + if (this._spec.barMinWidth) { + const barMinWidth = getActualNumValue(this._spec.barMinWidth, realBarWidth); + if (curBarWidth < barMinWidth) { + const widthDiff = barMinWidth - curBarWidth; + const halfWidthDiff = widthDiff / 2; + x -= halfWidthDiff; + x1 += halfWidthDiff; + } + } + + return [x, x1]; + }; + protected _getBarXStart = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { if (this._shouldDoPreCalculate()) { this._calculateStackRectPosition(false); @@ -403,6 +428,12 @@ export class BarSeries extends Cartes return valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange); }; + protected _getLinearBarXRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { + const x = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange); + const x1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange); + return this._getLinearBarRange(Math.min(x, x1), Math.max(x, x1)); + }; + protected _getBarYStart = (datum: Datum, scale: IBaseScale) => { if (this._shouldDoPreCalculate()) { this._calculateStackRectPosition(true); @@ -425,6 +456,12 @@ export class BarSeries extends Cartes return valueInScaleRange(this._dataToPosY1(datum), scale); }; + protected _getLinearBarYRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { + const y = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange); + const y1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange); + return this._getLinearBarRange(Math.min(y, y1), Math.max(y, y1)); + }; + initBandRectMarkStyle() { const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); @@ -543,8 +580,8 @@ export class BarSeries extends Cartes if (this.direction === Direction.horizontal) { const yChannels = isValid(this._fieldY2) ? { - y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum), yScale, true), - y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum), yScale, true) + y: (datum: Datum) => this._getLinearBarYRange(datum, yScale, true)[0], + y1: (datum: Datum) => this._getLinearBarYRange(datum, yScale, true)[1] } : { y: (datum: Datum) => @@ -575,8 +612,8 @@ export class BarSeries extends Cartes } else { const xChannels = isValid(this._fieldX2) ? { - x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum), xScale, true), - x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum), xScale, true) + x: (datum: Datum) => this._getLinearBarXRange(datum, xScale, true)[0], + x1: (datum: Datum) => this._getLinearBarXRange(datum, xScale, true)[1] } : { x: (datum: Datum) => diff --git a/packages/vchart/src/series/bar/interface.ts b/packages/vchart/src/series/bar/interface.ts index dc81714184..be9e2a0040 100644 --- a/packages/vchart/src/series/bar/interface.ts +++ b/packages/vchart/src/series/bar/interface.ts @@ -119,6 +119,11 @@ export interface IBarSeriesSpec * 圆角支持回调配置 @since 1.12.4 */ stackCornerRadius?: number | number[] | IStackCornerRadiusCallback; + + /** + * 柱条间 padding 值 + */ + barPadding?: number; } export interface IBarBackgroundSpec { From 17ff8be842f50f84d643d8c609fd53dfba720458 Mon Sep 17 00:00:00 2001 From: LonelySnowman <2438490168@qq.com> Date: Thu, 15 May 2025 17:31:39 +0800 Subject: [PATCH 2/4] docs: update barPadding doc --- docs/assets/option/en/chart/histogram.md | 6 +++++- docs/assets/option/zh/chart/histogram.md | 9 ++++++--- packages/vchart/src/series/bar/bar.ts | 14 ++++++-------- 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/assets/option/en/chart/histogram.md b/docs/assets/option/en/chart/histogram.md index 338efb802f..dc83333288 100644 --- a/docs/assets/option/en/chart/histogram.md +++ b/docs/assets/option/en/chart/histogram.md @@ -25,7 +25,11 @@ x2 field. (x field is the left interval field of frequency statistics, x2 field y2 field. (y field is the left interval field of frequency statistics, y2 field is the right interval field of frequency statistics) +## barPadding(number) + +Used to adjust the distance between each column in the histogram and support passing in pixel values. + {{ use: chart-component( axisType = 'cartesian', noBandAxis = true -) }} \ No newline at end of file +) }} diff --git a/docs/assets/option/zh/chart/histogram.md b/docs/assets/option/zh/chart/histogram.md index ac2360b202..3669798d2e 100644 --- a/docs/assets/option/zh/chart/histogram.md +++ b/docs/assets/option/zh/chart/histogram.md @@ -19,14 +19,17 @@ ## x2Field(string|string[]) -x2 字段。（x字段为频率统计左区间字段，x2字段为频率统计右区间字段） +x2 字段。（x 字段为频率统计左区间字段，x2 字段为频率统计右区间字段） ## y2Field(string|string[]) -y2 字段。（y字段为频率统计左区间字段，y2字段为频率统计右区间字段） +y2 字段。（y 字段为频率统计左区间字段，y2 字段为频率统计右区间字段） + +## barPadding(number) + +用于调整直方图中每个柱子之间的距离，支持传入像素值。 {{ use: chart-component( axisType = 'cartesian', noBandAxis = true ) }} - diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 61835f37e1..cae443cc8f 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -393,14 +393,12 @@ export class BarSeries extends Cartes } const curBarWidth = x1 - x; - if (this._spec.barMinWidth) { - const barMinWidth = getActualNumValue(this._spec.barMinWidth, realBarWidth); - if (curBarWidth < barMinWidth) { - const widthDiff = barMinWidth - curBarWidth; - const halfWidthDiff = widthDiff / 2; - x -= halfWidthDiff; - x1 += halfWidthDiff; - } + const barMinWidth = getActualNumValue(this._spec.barMinWidth || 1, realBarWidth); + if (curBarWidth < barMinWidth) { + const widthDiff = barMinWidth - curBarWidth; + const halfWidthDiff = widthDiff / 2; + x -= halfWidthDiff; + x1 += halfWidthDiff; } return [x, x1]; From cfb21647a0f3e760520dbdda865bafe1546d33ea Mon Sep 17 00:00:00 2001 From: LonelySnowman <2438490168@qq.com> Date: Thu, 15 May 2025 17:52:29 +0800 Subject: [PATCH 3/4] fix: add minBarWidth and y to y1 --- packages/vchart/src/series/bar/bar.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index cae443cc8f..24bf2e58fa 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -386,14 +386,12 @@ export class BarSeries extends Cartes if (this._spec.barPadding) { const tempX = x + this._spec.barPadding; const tempX1 = x1 - this._spec.barPadding; - if (tempX < tempX1) { - x = tempX; - x1 = tempX1; - } + x = tempX; + x1 = tempX1; } const curBarWidth = x1 - x; - const barMinWidth = getActualNumValue(this._spec.barMinWidth || 1, realBarWidth); + const barMinWidth = getActualNumValue(this._spec.barMinWidth || 2, realBarWidth); if (curBarWidth < barMinWidth) { const widthDiff = barMinWidth - curBarWidth; const halfWidthDiff = widthDiff / 2; @@ -455,8 +453,8 @@ export class BarSeries extends Cartes }; protected _getLinearBarYRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { - const y = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange); - const y1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange); + const y = valueInScaleRange(this._dataToPosY(datum), scale, useWholeRange); + const y1 = valueInScaleRange(this._dataToPosY1(datum), scale, useWholeRange); return this._getLinearBarRange(Math.min(y, y1), Math.max(y, y1)); }; From 779339ad77679b3f5cc56b9c2b69af952ff6093a Mon Sep 17 00:00:00 2001 From: LonelySnowman <2438490168@qq.com> Date: Thu, 22 May 2025 20:04:15 +0800 Subject: [PATCH 4/4] feat: change option from barPadding to barGap --- docs/assets/option/en/chart/histogram.md | 2 +- docs/assets/option/zh/chart/histogram.md | 2 +- .../histogram/base/histogram-base-transformer.ts | 2 +- packages/vchart/src/series/bar/bar.ts | 13 +++++++------ packages/vchart/src/series/bar/interface.ts | 2 +- 5 files changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/assets/option/en/chart/histogram.md b/docs/assets/option/en/chart/histogram.md index dc83333288..4b9cafc53a 100644 --- a/docs/assets/option/en/chart/histogram.md +++ b/docs/assets/option/en/chart/histogram.md @@ -25,7 +25,7 @@ x2 field. (x field is the left interval field of frequency statistics, x2 field y2 field. (y field is the left interval field of frequency statistics, y2 field is the right interval field of frequency statistics) -## barPadding(number) +## barGap(number) Used to adjust the distance between each column in the histogram and support passing in pixel values. diff --git a/docs/assets/option/zh/chart/histogram.md b/docs/assets/option/zh/chart/histogram.md index 3669798d2e..434aef2cd6 100644 --- a/docs/assets/option/zh/chart/histogram.md +++ b/docs/assets/option/zh/chart/histogram.md @@ -25,7 +25,7 @@ x2 字段。（x 字段为频率统计左区间字段，x2 字段为频率统计 y2 字段。（y 字段为频率统计左区间字段，y2 字段为频率统计右区间字段） -## barPadding(number) +## barGap(number) 用于调整直方图中每个柱子之间的距离，支持传入像素值。 diff --git a/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts b/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts index 73c99bad14..b4d24b250e 100644 --- a/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts +++ b/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts @@ -9,6 +9,6 @@ export class BaseHistogramChartSpecTransformer ex } protected _getDefaultSeriesSpec(spec: T): any { - return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground', 'barPadding']); + return super._getDefaultSeriesSpec(spec, ['x2Field', 'y2Field', 'barMinHeight', 'barBackground', 'barGap']); } } diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 24bf2e58fa..b469cda5c7 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -381,11 +381,12 @@ export class BarSeries extends Cartes return this.dataToPositionY1(datum); } - protected _getLinearBarRange = (x: number, x1: number) => { + protected _getLinearBarRange = (start: number, end: number) => { + let [x, x1] = [start, end].sort((a, b) => a - b); const realBarWidth = x1 - x; - if (this._spec.barPadding) { - const tempX = x + this._spec.barPadding; - const tempX1 = x1 - this._spec.barPadding; + if (this._spec.barGap) { + const tempX = x + this._spec.barGap; + const tempX1 = x1 - this._spec.barGap; x = tempX; x1 = tempX1; } @@ -427,7 +428,7 @@ export class BarSeries extends Cartes protected _getLinearBarXRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { const x = valueInScaleRange(this._dataToPosX(datum), scale, useWholeRange); const x1 = valueInScaleRange(this._dataToPosX1(datum), scale, useWholeRange); - return this._getLinearBarRange(Math.min(x, x1), Math.max(x, x1)); + return this._getLinearBarRange(x, x1); }; protected _getBarYStart = (datum: Datum, scale: IBaseScale) => { @@ -455,7 +456,7 @@ export class BarSeries extends Cartes protected _getLinearBarYRange = (datum: Datum, scale: IBaseScale, useWholeRange?: boolean) => { const y = valueInScaleRange(this._dataToPosY(datum), scale, useWholeRange); const y1 = valueInScaleRange(this._dataToPosY1(datum), scale, useWholeRange); - return this._getLinearBarRange(Math.min(y, y1), Math.max(y, y1)); + return this._getLinearBarRange(y, y1); }; initBandRectMarkStyle() { diff --git a/packages/vchart/src/series/bar/interface.ts b/packages/vchart/src/series/bar/interface.ts index be9e2a0040..3cdb365ea9 100644 --- a/packages/vchart/src/series/bar/interface.ts +++ b/packages/vchart/src/series/bar/interface.ts @@ -123,7 +123,7 @@ export interface IBarSeriesSpec /** * 柱条间 padding 值 */ - barPadding?: number; + barGap?: number; } export interface IBarBackgroundSpec {