From 965e07c0bf34fe474272c1f25b2f1f385c4f3056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= Date: Tue, 7 Mar 2023 15:29:09 +0800 Subject: [PATCH] improve(Histogram): Auto calculate range tickInterval by binWidth and binNumber --- __tests__/unit/plots/histogram/index-spec.ts | 5 + .../more-plots/histogram/demo/binWidth.ts | 115 +++++------------- .../more-plots/histogram/demo/meta.json | 2 +- src/plots/histogram/adaptor.ts | 11 +- src/utils/transform/histogram.ts | 33 +++-- 5 files changed, 68 insertions(+), 98 deletions(-) diff --git a/__tests__/unit/plots/histogram/index-spec.ts b/__tests__/unit/plots/histogram/index-spec.ts index 997fb84124..63b61aa11f 100644 --- a/__tests__/unit/plots/histogram/index-spec.ts +++ b/__tests__/unit/plots/histogram/index-spec.ts @@ -36,6 +36,8 @@ describe('histogram', () => { }, }); // @ts-ignore + expect(histogram.chart.options.scales.range.tickInterval).toEqual(2); + // @ts-ignore expect(histogram.chart.options.axes.range).toEqual({ nice: true, label: { @@ -69,6 +71,9 @@ describe('histogram', () => { expect(shapes.length).toBe(4); + // @ts-ignore + expect(histogram.chart.options.scales.range.tickInterval).toEqual(7.3999999999999995); + histogram.destroy(); }); diff --git a/site/examples/more-plots/histogram/demo/binWidth.ts b/site/examples/more-plots/histogram/demo/binWidth.ts index 0761f348a7..9e0f445175 100644 --- a/site/examples/more-plots/histogram/demo/binWidth.ts +++ b/site/examples/more-plots/histogram/demo/binWidth.ts @@ -1,86 +1,33 @@ import { Histogram } from '@antv/g2plot'; -const data = [ - { value: 1.2 }, - { value: 3.4 }, - { value: 3.7 }, - { value: 4.3 }, - { value: 5.2 }, - { value: 5.8 }, - { value: 6.1 }, - { value: 6.5 }, - { value: 6.8 }, - { value: 7.1 }, - { value: 7.3 }, - { value: 7.7 }, - { value: 8.3 }, - { value: 8.6 }, - { value: 8.8 }, - { value: 9.1 }, - { value: 9.2 }, - { value: 9.4 }, - { value: 9.5 }, - { value: 9.7 }, - { value: 10.5 }, - { value: 10.7 }, - { value: 10.8 }, - { value: 11.0 }, - { value: 11.0 }, - { value: 11.1 }, - { value: 11.2 }, - { value: 11.3 }, - { value: 11.4 }, - { value: 11.4 }, - { value: 11.7 }, - { value: 12.0 }, - { value: 12.9 }, - { value: 12.9 }, - { value: 13.3 }, - { value: 13.7 }, - { value: 13.8 }, - { value: 13.9 }, - { value: 14.0 }, - { value: 14.2 }, - { value: 14.5 }, - { value: 15 }, - { value: 15.2 }, - { value: 15.6 }, - { value: 16.0 }, - { value: 16.3 }, - { value: 17.3 }, - { value: 17.5 }, - { value: 17.9 }, - { value: 18.0 }, - { value: 18.0 }, - { value: 20.6 }, - { value: 21 }, - { value: 23.4 }, -]; - -const histogramPlot = new Histogram('container', { - data, - binField: 'value', - binWidth: 4, - tooltip: { - showMarkers: false, - position: 'top', - }, - interactions: [ - { - type: 'element-highlight', - }, - ], - /** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */ - meta: { - range: { - min: 0, - tickInterval: 2, - }, - count: { - max: 20, - nice: true, - }, - }, -}); - -histogramPlot.render(); +fetch('https://gw.alipayobjects.com/os/antfincdn/RoliHq%2453S/histogram.json') + .then((data) => data.json()) + .then((data) => { + const histogramPlot = new Histogram('container', { + data, + binField: 'value', + binWidth: 4, + tooltip: { + showMarkers: false, + position: 'top', + }, + interactions: [ + { + type: 'element-highlight', + }, + ], + /** range 为 x 轴代表字段，count 为 y 轴统计个数字段 */ + meta: { + range: { + min: 0, + tickInterval: 2, + }, + count: { + max: 20, + nice: true, + }, + }, + }); + + histogramPlot.render(); + }); \ No newline at end of file diff --git a/site/examples/more-plots/histogram/demo/meta.json b/site/examples/more-plots/histogram/demo/meta.json index 5c1e833c23..818908f47c 100644 --- a/site/examples/more-plots/histogram/demo/meta.json +++ b/site/examples/more-plots/histogram/demo/meta.json @@ -10,7 +10,7 @@ "zh": "基础直方图", "en": "Basic histogram plot" }, - "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cZELRpyp7N4AAAAAAAAAAAAAARQnAQ" + "screenshot": "https://mdn.alipayobjects.com/huamei_twhmfu/afts/img/A*dF1VT6DvBlMAAAAAAAAAAAAADu2HAQ/original" }, { "filename": "binWidth.ts", diff --git a/src/plots/histogram/adaptor.ts b/src/plots/histogram/adaptor.ts index 4a53757bf2..d4fca8c22d 100644 --- a/src/plots/histogram/adaptor.ts +++ b/src/plots/histogram/adaptor.ts @@ -3,7 +3,7 @@ import { interval } from '../../adaptor/geometries'; import { pattern } from '../../adaptor/pattern'; import { Params } from '../../core/adaptor'; import { deepAssign, findGeometry, flow, transformLabel } from '../../utils'; -import { binHistogram } from '../../utils/transform/histogram'; +import { binHistogram, calculateBinWidth } from '../../utils/transform/histogram'; import { HISTOGRAM_X_FIELD, HISTOGRAM_Y_FIELD } from './constant'; import { HistogramOptions } from './types'; @@ -51,12 +51,19 @@ function geometry(params: Params): Params { */ function meta(params: Params): Params { const { options } = params; - const { xAxis, yAxis } = options; + const { data, binField, binWidth, binNumber, xAxis, yAxis } = options; + + const { binWidth: _binWidth } = calculateBinWidth(data, binField, binWidth, binNumber); return flow( scale({ [HISTOGRAM_X_FIELD]: xAxis, [HISTOGRAM_Y_FIELD]: yAxis, + }, { + [HISTOGRAM_X_FIELD]: { + // 分箱宽度和刻度线宽度默认保持一致 + tickInterval: _binWidth, + }, }) )(params); } diff --git a/src/utils/transform/histogram.ts b/src/utils/transform/histogram.ts index 1a85b7b535..09a5add52e 100644 --- a/src/utils/transform/histogram.ts +++ b/src/utils/transform/histogram.ts @@ -23,15 +23,9 @@ function getBinKey(value: number, binWidth: number, binNumber?: number): [number function sturges(values: Array): number { return Math.ceil(Math.log(values.length) / Math.LN2) + 1; } -/** - * 对数据进行百分比化 - * @param data - * @param binField - * @param binWidth - * @param binNumber - * @param stackField - */ -export function binHistogram(data: Data, binField: string, binWidth: number, binNumber?: number, stackField?: string) { + +// 计算 binWidth +export function calculateBinWidth(data: Data, binField: string, binWidth: number, binNumber?: number) { const originData_copy = clone(data); // 根据 binField 对源数据进行排序 @@ -52,12 +46,29 @@ export function binHistogram(data: Data, binField: string, binWidth: number, bin const _defaultBinNumber = sturges(values); _binWidth = rangeWidth / _defaultBinNumber; } + return { + binWidth: _binWidth, + sortData: originData_copy, + }; +} + +/** + * 对数据进行百分比化 + * @param data + * @param binField + * @param binWidth + * @param binNumber + * @param stackField + */ +export function binHistogram(data: Data, binField: string, binWidth: number, binNumber?: number, stackField?: string) { + const { binWidth: _binWidth, sortData } = calculateBinWidth(data, binField, binWidth, binNumber); + // 构建 key - StatisticData 结构 const bins: StatisticBin = {}; - const groups = groupBy(originData_copy, stackField); + const groups = groupBy(sortData, stackField); // 判断分组是否为空，如果为空，说明没有 stackField 字段 if (isEmpty(groups)) { - each(originData_copy, (data: any) => { + each(sortData, (data: any) => { const value = data[binField]; const bin = getBinKey(value, _binWidth, binNumber); const binKey = `${bin[0]}-${bin[1]}`;