From f0f656c426e6eb76a32a6bc8184adf58e51bb84c Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Tue, 6 Aug 2024 15:34:46 +0800 Subject: [PATCH 1/3] feat: support barpadding for histogram --- .../vchart/feat-barpadding_2024-08-06-07-34.json | 10 ++++++++++ .../histogram/base/histogram-base-transformer.ts | 3 ++- packages/vchart/src/series/bar/bar.ts | 12 +++++------- packages/vchart/src/series/bar/interface.ts | 5 +++++ 4 files changed, 22 insertions(+), 8 deletions(-) create mode 100644 common/changes/@visactor/vchart/feat-barpadding_2024-08-06-07-34.json diff --git a/common/changes/@visactor/vchart/feat-barpadding_2024-08-06-07-34.json b/common/changes/@visactor/vchart/feat-barpadding_2024-08-06-07-34.json new file mode 100644 index 0000000000..f441999a2c --- /dev/null +++ b/common/changes/@visactor/vchart/feat-barpadding_2024-08-06-07-34.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@visactor/vchart", + "comment": "feat: support barpadding for histogram for #2629", + "type": "none" + } + ], + "packageName": "@visactor/vchart" +} \ No newline at end of file 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 ee58543877..3e9d2a1f48 100644 --- a/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts +++ b/packages/vchart/src/chart/histogram/base/histogram-base-transformer.ts @@ -14,7 +14,8 @@ export class BaseHistogramChartSpecTransformer ex x2Field: spec?.x2Field, y2Field: spec?.y2Field, barMinHeight: spec?.barMinHeight, - barBackground: spec?.barBackground + barBackground: spec?.barBackground, + barPadding: spec?.barPadding }; } } diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index b8a5c8fd72..3691ecf650 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -457,7 +457,6 @@ export class BarSeries extends Cartes } this._initStackBarMarkStyle(); - this._initBandBarBackgroundMarkStyle(); } @@ -528,12 +527,12 @@ export class BarSeries extends Cartes initLinearRectMarkStyle() { const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); - + const barPadding = this._spec.barPadding || 0; if (this.direction === Direction.horizontal) { const yChannels = isValid(this._fieldY2) ? { - y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum), yScale), - y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum), yScale) + y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum) + barPadding / 2, yScale), + y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum) - barPadding / 2, yScale) } : { y: (datum: Datum) => @@ -564,8 +563,8 @@ export class BarSeries extends Cartes } else { const xChannels = isValid(this._fieldX2) ? { - x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum), xScale), - x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum), xScale) + x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum) + barPadding / 2, xScale), + x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum) - barPadding / 2, xScale) } : { x: (datum: Datum) => @@ -740,7 +739,6 @@ export class BarSeries extends Cartes const barInGroup = array(this._spec.barGapInGroup); let totalWidth: number = 0; let offSet: number = 0; - for (let index = groupFields.length - 1; index >= 1; index--) { const groupField = groupFields[index]; // const groupValues = this.getViewDataStatistics()?.latestData?.[groupField]?.values ?? []; diff --git a/packages/vchart/src/series/bar/interface.ts b/packages/vchart/src/series/bar/interface.ts index df6c349d4b..c7cfdff1ff 100644 --- a/packages/vchart/src/series/bar/interface.ts +++ b/packages/vchart/src/series/bar/interface.ts @@ -101,6 +101,11 @@ export interface IBarSeriesSpec * @since 1.10.0 */ stackCornerRadius?: number | number[]; + + /** + * 堆叠柱之间的距离 + */ + barPadding?: number; } export interface IBarBackgroundSpec { From 467245ba685a2421b4f33643abde6ea956419397 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Wed, 7 Aug 2024 01:49:35 +0800 Subject: [PATCH 2/3] fix: adapation for inverse --- packages/vchart/src/series/bar/bar.ts | 36 ++++++++++++++++++--- packages/vchart/src/series/bar/interface.ts | 2 +- 2 files changed, 33 insertions(+), 5 deletions(-) diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 3691ecf650..7be6a1e61f 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -528,11 +528,37 @@ export class BarSeries extends Cartes const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); const barPadding = this._spec.barPadding || 0; + // 柱子的最短宽度 + const minWidth = 2; + + /** + * + * @description 用于计算不同场景下barPadding对应的柱坐标位移值 + */ + const barPaddingCompute = (field: 'x' | 'x1' | 'y' | 'y1', inverse: boolean) => { + let acturlPadding = 0; + if (inverse) { + if (field === 'x1' || field === 'y1') { + acturlPadding = barPadding / 2; + } else { + acturlPadding = -barPadding / 2; + } + } else { + if (field === 'x' || field === 'y') { + acturlPadding = barPadding / 2; + } else { + acturlPadding = -barPadding / 2; + } + } + return acturlPadding; + }; + if (this.direction === Direction.horizontal) { + const inverse = this._yAxisHelper?.isInverse(); const yChannels = isValid(this._fieldY2) ? { - y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum) + barPadding / 2, yScale), - y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum) - barPadding / 2, yScale) + y: (datum: Datum) => valueInScaleRange(this._dataToPosY(datum) + barPaddingCompute('y', inverse), yScale), + y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum) + barPaddingCompute('y1', inverse), yScale) } : { y: (datum: Datum) => @@ -561,10 +587,12 @@ export class BarSeries extends Cartes AttributeLevel.Series ); } else { + const inverse = this._xAxisHelper?.isInverse(); + const xChannels = isValid(this._fieldX2) ? { - x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum) + barPadding / 2, xScale), - x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum) - barPadding / 2, xScale) + x: (datum: Datum) => valueInScaleRange(this._dataToPosX(datum) + barPaddingCompute('x', inverse), xScale), + x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum) + barPaddingCompute('x1', inverse), xScale) } : { x: (datum: Datum) => diff --git a/packages/vchart/src/series/bar/interface.ts b/packages/vchart/src/series/bar/interface.ts index c7cfdff1ff..17489014db 100644 --- a/packages/vchart/src/series/bar/interface.ts +++ b/packages/vchart/src/series/bar/interface.ts @@ -103,7 +103,7 @@ export interface IBarSeriesSpec stackCornerRadius?: number | number[]; /** - * 堆叠柱之间的距离 + * 柱条之间的距离 */ barPadding?: number; } From f6a8c80de7526dd12e27ab96a1e5f5049c40b117 Mon Sep 17 00:00:00 2001 From: Runtus <893119806@qq.com> Date: Wed, 7 Aug 2024 10:03:56 +0800 Subject: [PATCH 3/3] docs: finish document for barpadding --- docs/assets/option/en/chart/histogram.md | 6 +++++- docs/assets/option/zh/chart/histogram.md | 7 +++++-- packages/vchart/src/series/bar/bar.ts | 2 -- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/assets/option/en/chart/histogram.md b/docs/assets/option/en/chart/histogram.md index 338efb802f..9cbdb6d3a0 100644 --- a/docs/assets/option/en/chart/histogram.md +++ b/docs/assets/option/en/chart/histogram.md @@ -28,4 +28,8 @@ y2 field. (y field is the left interval field of frequency statistics, y2 field {{ use: chart-component( axisType = 'cartesian', noBandAxis = true -) }} \ No newline at end of file +) }} + +## barPadding(number) + +The barPadding use to adjust the distance between each bar in the histogram. diff --git a/docs/assets/option/zh/chart/histogram.md b/docs/assets/option/zh/chart/histogram.md index ac2360b202..53cb7addb8 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 字段为频率统计右区间字段） {{ use: chart-component( axisType = 'cartesian', noBandAxis = true ) }} +## barPadding(number) + +barPadding 字段用于调整直方图中每个柱子之间的距离。 diff --git a/packages/vchart/src/series/bar/bar.ts b/packages/vchart/src/series/bar/bar.ts index 7be6a1e61f..2463ee998c 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -528,8 +528,6 @@ export class BarSeries extends Cartes const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); const barPadding = this._spec.barPadding || 0; - // 柱子的最短宽度 - const minWidth = 2; /** *