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/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/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..2463ee998c 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,36 @@ export class BarSeries extends Cartes initLinearRectMarkStyle() { const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); + const barPadding = this._spec.barPadding || 0; + + /** + * + * @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), yScale), - y1: (datum: Datum) => valueInScaleRange(this._dataToPosY1(datum), 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) => @@ -562,10 +585,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), xScale), - x1: (datum: Datum) => valueInScaleRange(this._dataToPosX1(datum), 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) => @@ -740,7 +765,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..17489014db 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 {