improve(Histogram): Auto calculate range tickInterval by binWidth and binNumber

__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();
   });
 

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();
+  });

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",

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<HistogramOptions>): Params<HistogramOptions> {
  */
 function meta(params: Params<HistogramOptions>): Params<HistogramOptions> {
   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);
 }

src/utils/transform/histogram.ts

@@ -23,15 +23,9 @@ function getBinKey(value: number, binWidth: number, binNumber?: number): [number
 function sturges(values: Array<number>): 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]}`;