直方图

直方图的简介

直方图，形状类似柱状图却有着与柱状图完全不同的含义。直方图牵涉统计学的概念，首先要对数据进行分组，然后统计每个分组内数据元的数量。在平面直角坐标系中，横轴标出每个组的端点，纵轴表示频数，每个矩形的高代表对应的频数，称这样的统计图为频数分布直方图。频数分布直方图需要经过频数乘以组距的计算过程才能得出每个分组的数量，同一个直方图的组距是一个固定不变的值，所以如果直接用纵轴表示数量，每个矩形的高代表对应的数据元数量，既能保持分布状态不变，又能直观的看出每个分组的数量。本文的例子全部使用纵轴表示数量的非标准直方图绘制。

相关概念：

组数：在统计数据时，我们把数据按照不同的范围分成几个组，分成的组的个数称为组数
组距：每一组两个端点的差
频数：分组内的数据元的数量除以组距

直方图的作用：

能够显示各组频数或数量分布的情况
易于显示各组之间频数或数量的差别

通过直方图还可以观察和估计哪些数据比较集中，异常或者孤立的数据分布在何处。

英文名：Histogram

如何绘制直方图

在 G2 中绘制直方图需要使用以下核心要素：

1. 使用 rect 标记

直方图需要使用 rect 标记而非 interval 标记。这是因为：

rect 标记支持 x 和 x1 两个通道，可以精确表示数据区间的起始和结束位置
每个矩形会跨越从 x 到 x1 的区间，符合直方图的数学定义
interval 标记只支持单一的 x 值，柱子会对齐在刻度点上，不适合表示连续区间

2. 使用 binX 转换

binX 转换是绘制直方图的关键，它的作用是：

自动将连续数值数据划分为多个区间（分箱）
统计每个区间内的数据数量或其他聚合值
输出每个区间的起始位置（x）和结束位置（x1）

基本用法：

.transform({
  type: 'binX',
  y: 'count',           // 统计每个区间的数量
  thresholds: 20,       // 可选：指定分箱数量
})

3. 完整示例

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'rect',           // 使用 rect 标记
  data: {
    type: 'fetch',
    value: 'data.json',
  },
  encode: {
    x: 'value',          // 连续数值字段
    y: 'count',          // 频数
  },
  transform: [
    { type: 'binX', y: 'count' }  // binX 转换
  ],
});

chart.render();

直方图的构成

频数分布直方图

图表类型	频数分布直方图
适合的数据	列表：一个连续数据字段、一个分类字段（可选）
功能	展示数据在不同区间内的分布情况
数据与图形的映射	分组数据字段（统计结果）映射到横轴的位置频数字段（统计结果）映射到矩形的高度分类数据可以设置颜色增强分类的区分度
适合的数据条数	不低于 50 条数据

非标准的直方图

图表类型	非标准的直方图
适合的数据	列表：一个连续数据字段、一个分类字段（可选）
功能	展示数据在不同区间内的分布情况
数据与图形的映射	分组数据字段（统计结果）映射到横轴的位置数量字段（统计结果）映射到矩形的高度分类数据可以设置颜色增强分类的区分度
适合的数据条数	不低于 50 条数据

直方图的应用场景

适合的场景

例子 1: 数据分布的统计分析

下图是一个钻石重量分布的直方图，展示了钻石重量在不同区间的分布情况。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json',
  },
  encode: {
    x: 'carat',
    y: 'count',
  },
  transform: [
    { type: 'binX', y: 'count' },
  ],
  scale: {
    y: { nice: true },
  },
  axis: {
    x: { title: '钻石重量（克拉）' },
    y: { title: '频数' },
  },
  style: {
    fill: '#1890FF',
    fillOpacity: 0.9,
  },
});

chart.render();

说明：

使用 rect 标记配合 binX 转换绘制直方图
binX 转换自动将 carat 字段分箱，并统计每个区间的频数
每个矩形跨越一个数值区间（如 0.2-0.3, 0.3-0.4），表示数据是连续分布的

例子 2: 使用不同的分箱方式

直方图的关键是如何划分数据区间（即“分箱”），不同的分箱方式会影响对数据分布的理解。下图使用了自定义的分箱数量。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json',
  },
  encode: {
    x: 'carat',
    y: 'count',
  },
  transform: [
    { type: 'binX', y: 'count', thresholds: 30 }, // 指定分箱数量
  ],
  scale: {
    y: { nice: true },
  },
  axis: {
    x: { title: '钻石重量（克拉）' },
    y: { title: '频数' },
  },
  style: {
    fill: '#1890FF',
    fillOpacity: 0.9,
  },
});

chart.render();

说明：

使用 transform: { type: 'binX', thresholds: 30 } 指定分箱数量为 30
分箱数量的选择会影响分布的细节展示，较多的箱数可以显示更细致的分布情况
较少的箱数则可以突出主要分布趋势

不适合的场景

例子 1: 不适合展示分类数据的比较

直方图针对的是连续型数值数据的分布，不适合用于非数值型的分类数据比较。对于分类数据的计数统计，应该使用普通柱状图。

例子 2: 不适合展示时间序列的趋势

直方图侧重于展示数据的分布特征，而非随时间变化的趋势。如果需要展示数据随时间的变化趋势，应使用折线图或面积图等时序图表。

直方图的扩展

多分布直方图

多分布直方图可以在同一坐标系中展示多个数据集的分布情况，便于比较不同数据集的分布特征。

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  theme: 'classic',
  autoFit: true,
});

chart.options({
  type: 'rect',
  data: {
    type: 'fetch',
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json',
    transform: [
      {
        type: 'map',
        callback: (d) => ({
          ...d,
          group: d.cut === 'Ideal' ? 'Ideal' : 'Others',
        }),
      },
    ],
  },
  encode: {
    x: 'price',
    y: 'count',
    color: 'group',
  },
  transform: [
    { type: 'binX', y: 'count', thresholds: 30, groupBy: ['group'] },
  ],
  scale: {
    y: { nice: true },
    color: { range: ['#1890FF', '#FF6B3B'] },
  },
  axis: {
    x: { title: '价格（美元）' },
    y: { title: '频数' },
  },
  style: {
    fillOpacity: 0.7,
  },
  legend: true,
});

chart.render();

说明：