diff --git a/docs/assets/option/en/chart/histogram.md b/docs/assets/option/en/chart/histogram.md index 338efb802f..4b9cafc53a 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) +## barGap(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..434aef2cd6 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 字段为频率统计右区间字段) + +## barGap(number) + +用于调整直方图中每个柱子之间的距离,支持传入像素值。 {{ use: chart-component( axisType = 'cartesian', noBandAxis = true ) }} - 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..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']); + 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 4ae9516bf0..b469cda5c7 100644 --- a/packages/vchart/src/series/bar/bar.ts +++ b/packages/vchart/src/series/bar/bar.ts @@ -381,6 +381,28 @@ export class BarSeries extends Cartes return this.dataToPositionY1(datum); } + protected _getLinearBarRange = (start: number, end: number) => { + let [x, x1] = [start, end].sort((a, b) => a - b); + const realBarWidth = x1 - x; + if (this._spec.barGap) { + const tempX = x + this._spec.barGap; + const tempX1 = x1 - this._spec.barGap; + x = tempX; + x1 = tempX1; + } + + const curBarWidth = x1 - x; + const barMinWidth = getActualNumValue(this._spec.barMinWidth || 2, 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 +425,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(x, x1); + }; + protected _getBarYStart = (datum: Datum, scale: IBaseScale) => { if (this._shouldDoPreCalculate()) { this._calculateStackRectPosition(true); @@ -425,6 +453,12 @@ export class BarSeries extends Cartes return valueInScaleRange(this._dataToPosY1(datum), scale); }; + 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(y, y1); + }; + initBandRectMarkStyle() { const xScale = this._xAxisHelper?.getScale?.(0); const yScale = this._yAxisHelper?.getScale?.(0); @@ -543,8 +577,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 +609,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..3cdb365ea9 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 值 + */ + barGap?: number; } export interface IBarBackgroundSpec {