feat: 增加支持层叠（堆叠）直方图

__tests__/data/histogram-data.ts

@@ -54,3 +54,24 @@ export const histogramData = [
   { value: 21 },
   { value: 23.4 },
 ];
+
+export const histogramStackData = [
+  { value: 50, type: '数学' },
+  { value: 50.1, type: '数学' },
+  { value: 50.1, type: '语文' },
+  { value: 51.2, type: '语文' },
+  { value: 61.3, type: '数学' },
+  { value: 61.4, type: '语文' },
+  { value: 74, type: '语文' },
+  { value: 74, type: '数学' },
+  { value: 78, type: '数学' },
+  { value: 81.5, type: '数学' },
+  { value: 82.3, type: '语文' },
+  { value: 85.3, type: '语文' },
+  { value: 84.3, type: '数学' },
+  { value: 86.3, type: '数学' },
+  { value: 90.3, type: '数学' },
+  { value: 93.3, type: '语文' },
+  { value: 94.3, type: '语文' },
+  { value: 94.3, type: '数学' },
+];

__tests__/unit/plots/histogram/index-spec.ts

@@ -1,5 +1,5 @@
 import { Histogram } from '../../../../src';
-import { histogramData } from '../../../data/histogram-data';
+import { histogramData, histogramStackData } from '../../../data/histogram-data';
 import { createDiv } from '../../../utils/dom';
 
 describe('histogram', () => {
@@ -39,7 +39,7 @@ describe('histogram', () => {
   });
 
   /**
-   * 这个测试dataset处理方式有问题
+   * 这个测试 dataset 处理方式有问题
    * issue已经提过去了 https://github.com/antvis/data-set/issues/90
    */
   it('automatic calculate binNumber', () => {
@@ -57,7 +57,7 @@ describe('histogram', () => {
     const shapeOrigin = geometry.getShapes()[0].get('origin').data;
 
     /**
-     * 结合dataset的写法是binWidth = histogramData（最大值-最小值）/ 默认值30
+     * 结合 dataset 的写法是 binWidth = histogramData（最大值-最小值）/ 默认值30
      * https://github.com/antvis/data-set/blob/master/src/transform/bin/histogram.ts#L45
      */
     const binWidth = (23.4 - 1.2) / 30;
@@ -85,4 +85,45 @@ describe('histogram', () => {
     expect(shapeOrigin.range[1] - shapeOrigin.range[0]).toBe(2);
     expect(elements[0].getModel().color).toBe('red');
   });
+
+  it('stackField: 层叠直方图', () => {
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramStackData,
+      binField: 'value',
+      binWidth: 4,
+      stackField: 'type',
+    });
+
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+
+    // 如果没有 stackField 是没有adjustNames这个数组
+    expect(geometry.getAdjust('stack').adjustNames.length);
+  });
+
+  it('stackField with color', () => {
+    const colors = ['red', 'blue'];
+    const histogram = new Histogram(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: histogramStackData,
+      binField: 'value',
+      binWidth: 4,
+      stackField: 'type',
+      color: colors,
+    });
+
+    histogram.render();
+
+    const geometry = histogram.chart.geometries[0];
+    const colorAttribute = geometry.getAttribute('color');
+
+    expect(colorAttribute.values).toEqual(colors);
+    expect(geometry.getAdjust('stack').adjustNames.length);
+  });
 });

__tests__/unit/plots/histogram/interaction-spec.ts

@@ -23,7 +23,7 @@ describe('Histogram - G2内置interaction', () => {
     expect(histogram.chart.interactions['active-region']).toBeDefined();
   });
 
-  it('交互:element-highlight', () => {
+  it('交互: element-highlight', () => {
     histogram.update({
       ...histogram.options,
       interaction: 'element-highlight',
@@ -32,7 +32,7 @@ describe('Histogram - G2内置interaction', () => {
     expect(histogram.chart.interactions['element-highlight']).toBeDefined();
   });
 
-  it('交互:element-active', () => {
+  it('交互: element-active', () => {
     histogram.update({
       ...histogram.options,
       interaction: 'element-active',

__tests__/unit/plots/histogram/tooltip-spec.ts

@@ -0,0 +1,24 @@
+import { Histogram } from '../../../../src';
+import { histogramData } from '../../../data/histogram-data';
+import { createDiv } from '../../../utils/dom';
+
+describe('Histogram:tooltip', () => {
+  const histogram = new Histogram(createDiv(), {
+    width: 400,
+    height: 300,
+    appendPadding: 10,
+    data: histogramData,
+    binField: 'value',
+    binWidth: 2,
+    tooltip: {
+      title: 'hello wold!',
+    },
+  });
+
+  histogram.render();
+
+  it('tooltip', () => {
+    // @ts-ignore
+    expect(histogram.chart.options.tooltip.title).toBe('hello wold!');
+  });
+});

src/plots/histogram/adaptor.ts

@@ -1,36 +1,50 @@
 import DataSet from '@antv/data-set';
+import { deepMix } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { HistogramOptions } from './types';
 
 /**
- * field字段
+ * field 字段
  * @param params
  */
 function field(params: Params<HistogramOptions>): Params<HistogramOptions> {
   const { chart, options } = params;
-  const { data, binField, binNumber, binWidth, color } = options;
+  const { data, binField, binNumber, binWidth, color, stackField } = options;
 
   const ds = new DataSet();
   const dv = ds.createView().source(data);
 
-  // dataset处理数据
+  // dataset 处理数据
   dv.transform({
     type: 'bin.histogram',
     field: binField,
     bins: binNumber,
     binWidth: binWidth,
+    groupBy: stackField ? [stackField] : undefined,
     as: ['range', 'count'],
   });
-
   chart.data(dv.rows);
 
   const geometry = chart.interval().position('range*count');
 
-  if (color) {
+  // 基本直方图 color: string
+  if (color && !Array.isArray(color) && !stackField) {
     geometry.color(color);
   }
-  // 默认nice y轴
+  // 层叠直方图需要 color: string[]
+  if (stackField) {
+    if (color) {
+      // 容错处理 color 为 string 的时候
+      const _color = Array.isArray(color) ? color : [color];
+      geometry.color(stackField, _color);
+    } else {
+      // 用 g2 自带颜色
+      geometry.color(stackField);
+    }
+    geometry.adjust('stack');
+  }
+  // 默认 nice y 轴
   const scale = {
     count: {
       nice: true,
@@ -64,22 +78,28 @@ function legend(params: Params<HistogramOptions>): Params<HistogramOptions> {
  * @param params
  */
 function tooltip(params: Params<HistogramOptions>): Params<HistogramOptions> {
-  // TODO
+  const { chart, options } = params;
+  const { tooltip } = options;
+
+  const cfg = deepMix({}, tooltip, {
+    showMarkers: false,
+    shared: true,
+  });
+
+  chart.tooltip(cfg);
+
   return params;
 }
 
 /**
  * interaction 配置用
- * interaction 配合tooltip更友好
+ * interaction 配合 tooltip 更友好
  * @param params
  */
 function interaction(params: Params<HistogramOptions>): Params<HistogramOptions> {
   const { chart, options } = params;
   const { interaction = 'active-region' } = options;
 
-  chart.tooltip({
-    showMarkers: false,
-  });
   chart.interaction(interaction);
 
   return params;

src/plots/histogram/types.ts

@@ -13,9 +13,12 @@ export interface HistogramOptions extends Options {
   /** 设置直方图的分箱数量，binNumber 影响直方图分箱后每个柱子的宽度 */
   readonly binNumber?: number;
 
-  /** 指定直方图柱形颜色 */
-  readonly color?: string;
+  /** 指定直方图柱形颜色，基础直方图为 string ，层叠直方图时为 string[] */
+  readonly color?: string | string[];
 
-  /** 指定交互形式 ，目前支持这3种比较友好 */
+  /** 指定层叠字段，通过该字段的值，柱子将会被分割为多个部分，通过颜色进行区分 */
+  readonly stackField?: string;
+
+  /** 指定交互形式，目前支持这3种比较友好 */
   readonly interaction?: 'active-region' | 'element-highlight' | 'element-active';
 }