logoCreated with Sketch.

G2Plot

Histogram - 直方图

阅读时间约 12 分钟

屏幕快照 2020-03-05 下午7.26.23.png

定义
直方图是一种统计报告图，由一系列高度不等的纵向条纹或线段表示数据分布的情况。

视觉通道
位置

分析目的

比较、趋势

数据准备
1 个「时间」或「有序名词」字段

0 ~ 1 个「无序名词」字段

1 个「数值」字段

快速上手

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(document.getElementById('container'), {
  data,
  binField: 'value',
  binNumber: 6,
});
histogramPlot.render();

配置属性

图表容器

width

可选, number

功能描述： 设置图表宽度。

默认配置： 400

height

可选, number

功能描述： 设置图表高度。

默认配置： 400

forceFit

可选, boolean

功能描述： 图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。

默认配置： true

pixelRatio

可选, number

功能描述： 设置图表渲染的像素比

默认配置： 2

renderer

可选, string

功能描述: 设置图表渲染方式为 canvas 或 svg

默认配置： canvas

数据映射

data 📌

必选, array object

功能描述： 设置图表数据源

默认配置： 无

数据源为对象集合，例如：[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]。

meta

可选, object

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

细分配置项名称类型功能描述
aliasstring字段的别名
formatterfunctioncallback方法，对该字段所有值进行格式化处理
valuesstring[]枚举该字段下所有值
rangenumber[]字段的数据映射区间，默认为[0,1]
const data = [
  { country: 'Asia', year: '1750', value: 502,},
  { country: 'Asia', year: '1800', value: 635,},
  { country: 'Europe', year: '1750', value: 163,},
  { country: 'Europe', year: '1800', value: 203,},
];

const areaPlot = new PercentageStackArea(document.getElementById('container'), {
  title: {
    visible: true,
    text: '百分比堆叠面积图',
  },
  data,
  meta: {    year: {      alias:'年份'      range: [0, 1],    },    value: {      alias: '数量',      formatter:(v)=>{return `${v}个`}    }  },  xField: 'year',
  yField: 'value',
  stackField: 'country',
});
areaPlot.render();

binField 📌

必选, string

功能描述： 设置直方图绘制 (进行分箱) 的字段

默认配置： 无

binWidth 📌

可选, number

DEMO

功能描述： 设置直方图的分箱宽度，binWidth影响直方图分成多少箱。

注意：binWidth 和 binNumber 只能选择一个进行配置，默认采用binWidth.

默认配置： 自动计算

binNumber ✨

可选, number

DEMO

功能描述： 设置直方图的分箱数量，binNumber影响直方图分箱后每个柱子的宽度。

注意：binWidth 和 binNumber 只能选择一个进行配置，默认采用binWidth.

默认配置： 无

图形样式

color

可选, string

功能描述： 指定直方图柱形颜色。

默认配置：采用 theme 中的色板。

columnStyle ✨

可选, object

功能描述： 设置直方图柱子样式。columnStyle中的fill会覆盖 color 的配置。 默认配置： 无

细分配置类型功能描述
fillstring填充颜色
strokestring描边颜色
lineWidthnumber描边宽度
lineDashnumber虚线描边
opacitynumber整体透明度
fillOpacitynumber填充透明度
strokeOpacitynumber描边透明度

图表组件

title

可选, optional

DEMOS

功能描述： 配置图表的标题，默认显示在图表左上角。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}
细分配置类型功能描述
visibleboolean是否显示
alignTostring位置，支持三种配置：
'left'
styleobject样式：
- fontSize: number 文字大小
- fill: string 文字颜色
- stroke: string  描边颜色
- lineWidth: number 描边粗细
- lineDash: number 虚线描边
- opacity: number 透明度
- fillOpacity: number 填充透明度
- strokeOpacity: number 描边透明度

description

可选, optional

DEMOS

功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。

默认配置：

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}
细分配置类型功能描述
visibleboolean是否显示
alignTostring位置，支持三种配置：
'left'
styleobject样式：
- fontSize: number 文字大小
- fill: string 文字颜色
- stroke: string  描边颜色
- lineWidth: number 描边粗细
- lineDash: number 虚线描边
- opacity: number 透明度
- fillOpacity: number 填充透明度
- strokeOpacity: number 描边透明度

xAxis

可选, object

DEMOS

功能描述： x方向上的坐标轴，用于展示xField对应的映射信息

默认配置：

visible: true,
grid: {
    visible: false,
},
line: {
    visible: true
},
tickLine: {
     visible: true,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: false,
    offset: 12,
},
细分配置类型功能描述
visibleboolean是否可见
lineobject坐标轴轴线
- visible: boolean 是否可见
- style：object 轴线样式
gridobject网格线
- visible: boolean 是否可见
- line：object 网格线样式
labelobject坐标轴标签
- visible: boolean 是否可见
- formatter: function 坐标轴标签格式化
- suffix: string 后缀
- offsetX: number 位置在x方向上的偏移量
- offsetY：number 位置在y方向上的偏移量
- style：object 样
-autoHide: boolean 是否自动隐藏
-autoRotate: boolean 是否自动旋转
tickLineobject坐标轴刻度
- visible：boolean 是否可见
- style: object 样式
titleobject坐标轴标题
- visible： boolean 是否可见
- text: string 标题文字
- offset: number 位置偏移量
- style：object 样式

yAxis

可选, object

DEMOS

功能描述： y方向上的坐标轴，用于展示yField对应的映射信息

默认配置： 

visible: true,
grid: {
    visible: true,
},
line: {
    visible: false,
},
tickLine: {
    visible: false,
},
label: {
    visible: true,
    autoRotate: true,
    autoHide: true
},
title: {
    visible: true,
    offset: 12,
},
细分配置类型功能描述
visibleboolean是否可见
tickCountnumber坐标轴刻度数量
tickIntervalnumber坐标轴刻度间隔
minnumber设置坐标轴最小值
maxnumber设置坐标轴最大值
lineobject坐标轴轴线
- visible: boolean 是否可见
- style：object 轴线样式
gridobject网格线
- visible: boolean 是否可见
- line：object 网格线样式
labelobject坐标轴标签
- visible: boolean 是否可见
- formatter: function 坐标轴标签格式化 DEMO
- suffix: string 后缀
- precision：number  标签精度，如配置为 2，则格式化为 2 位小数
- offsetX: number 位置在x方向上的偏移量
- offsetY：number 位置在y方向上的偏移量
- style：object 样
-autoHide: boolean 是否自动隐藏
-autoRotate: boolean 是否自动旋转
tickLineobject坐标轴刻度
- visible：boolean 是否可见
- style: object 样式
titleobject坐标轴标题
- visible： boolean 是否可见
- text: string 标题文字
- offset: number 位置偏移量
- style：object 样式

tooltip

可选, object

功能描述：信息提示框

默认配置：

visible: true,
offset: 20,
细分属性类型功能描述
visibleboolean是否显示
offsetnumber距离鼠标位置偏移值
domStylesobject配置tooltip样式
- g2-tooltip: object 设置tooltip容器的CSS样式
- g2-tooltip-title: object 设置tooltip标题的CSS样式
- g2-tooltip-list: object 设置tooltip列表容器的CSS 样式
- g2-tooltip-marker: object 设置tooltip列表容器中每一项 marker的CSS样式
- g2-tooltip-value: object 设置tooltip 列表容器中每一项 value的CSS样式
fieldsstring设置tooltip内容字段，默认为[ xField, yField ]
formatterobject对tooltip items进行格式化，入参为tooltip fields对应数值，出参为格式为{name:'a',value:1}

label

功能描述： 标签文本

默认配置：

visible: false
position: 'top'
offsetX: 6
offsetY: 6
style:{
  fill: 'rgba(0, 0, 0, 0.65)',
  stroke: '#ffffff',
  lineWidth: 2,
},
adjustColor: true,
adjustPosition: false
细分配置类型功能描述
visibleboolean是否显示
positionstringlabel的位置
- top 位于柱子顶部
- middle 位于柱子垂直中心
- bottom 位于柱子底部
formatterfunction对文本标签内容进行格式化
offsetXnumber在 label 位置的基础上再往 x 方向的偏移量
offsetYnumber在 label 位置的基础上再往 y 方向的偏移量
styleobject配置文本标签样式。
adjustColorboolean文本标签颜色是否自动适应图形颜色，position为middle时有效。
adjustPositionboolean是否根据显示区域自动调整文本标签位置，position为middle时有效。如图形区域容纳不下label，则label位置自动调整至图形上方。

guideLine

可选, object[]

DEMOS

功能描述： 配置图表辅助线，支持同时配置多条。

默认配置： 无

细分配置类型功能描述
typestring含有统计意义的辅助线类型，可选类型为 max
startarray指定辅助线起始位置，如不配置type，则该辅助线为自定义辅助线，start是必选项。
支持两种配置形式，两者不能混用：
- 原始数据值，如 ['2010-01-01', 100]
- 绘图区域百分比位置，如 ['50%', '50%']
endarray指定辅助线终止位置，如不配置type，则该辅助线为自定义辅助线，end 是必选项。
支持两种数据形式，两者不能混用：
- 原始数据值，如 ['2010-01-01', 100]
- 绘图区域百分比位置，如 ['50%', '50%']
lineStyleobject配置辅助线样式。
textobject设置辅助线文本。
- position: string 辅助线文本位置，可选项：start、center、end
- content: string 辅助线文本内容
- offsetX: number 位置在x方向上的偏移量
- offsetY: number 位置在y方向上的偏移量
- style: object 文本样式

配置统计辅助线示例代码：

{
  guideLine: [
    {
      type: 'mean',
      lineStyle: {},
      text: {},
    },
  ],
}

配置自定义辅助线示例代码：

{
  guideLine: [
    {
      start: ['2010-01-01', 100] || ['0%', '50%'],
      end: ['2010-01-10', 50] || ['100%', '80%'],
      lineStyle: {},
      text: {},
    },
  ],
}

事件

柱形图形事件

onColumnClick
柱形点击事件		onColumnDblClick
柱形双击事件		onColumnDblClick
柱形双击事件		onColumnMouseleave
柱形鼠标离开事件
onColumnMousemove
柱形鼠标移动事件		onColumnMousedown
柱形鼠标按下事件		onColumnMouseup
柱形鼠标松开事件		onColumnMouseenter
柱形鼠标进入事件

图表区域事件

onPlotClick
图表区域点击事件		onPlotDblClick
图表区域双击事件		onPlotDblClick
图表区域双击事件		onPlotMouseleave
图表区域鼠标离开事件
onPlotMousemove
图表区域鼠标移动事件		onPlotMousedown
图表区域鼠标按下事件		onPlotMouseup
图表区域鼠标松开事件		onPlotMouseenter
图表区域鼠标进入事件

图例事件

onLegendClick
图例点击事件		onLegendDblClick
图例双击事件		onLegendMouseenter
图例鼠标进入事件		onLegendMouseleave
图例鼠标离开事件
onLegendMousemove
图例鼠标移动事件		onLegendMousedown
图例鼠标按下事件		onLegendMouseup
图例鼠标松开事件		onLegendMouseenter
图例鼠标进入事件

坐标轴事件

onAxisClick
坐标轴点击事件		onAxisDblClick
坐标轴双击事件		onAxisDblClick
坐标轴双击事件		onAxisMouseleave
坐标轴鼠标离开事件
onAxisMousemove
坐标轴鼠标移动事件		onAxisMousedown
坐标轴鼠标按下事件		onAxisMouseup
坐标轴鼠标松开事件		onAxiMouseenter
坐标轴鼠标进入事件

图形标签事件

onLabelClick
图形标签点击事件		onLabelDblClick
图形标签双击事件		onLabelDblClick
图形标签双击事件		onLabelMouseleave
图形标签鼠标离开事件
onLabelMousemove
图形标签鼠标移动事件		onLabelMousedown
图形标签鼠标按下事件		onLabelMouseup
图形标签鼠标松开事件		onLabelMouseenter
图形标签鼠标进入事件

标题事件

onTitleClick
标题点击事件		onTitleDblClick
标题双击事件		onTitleDblClick
标题双击事件		onTitleMouseleave
标题鼠标离开事件
onTitleMousemove
标题鼠标移动事件		onTitleMousedown
标题鼠标按下事件		onTitleMouseup
标题鼠标松开事件		onTitleMouseenter
标题鼠标进入事件

描述事件

onDescriptionClick
标题点击事件		onDescriptionDblClick
标题双击事件		onDescriptionDblClick
标题双击事件		onDescriptionMouseleave
标题鼠标离开事件
onDescriptionMousemove
标题鼠标移动事件		onDescriptionMousedown
标题鼠标按下事件		onDescriptionMouseup
标题鼠标松开事件		onDescriptionMouseenter
标题鼠标进入事件

交互

slider ✨

可选, object

DEMO

功能描述： 缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。

细分配置类型功能描述
heightnumberslider高度
startnumber
滑块初始开始位置，值域为[0,1]
endnumber滑块初始结束位置，值域为[0,1]
trendCfgobject配置slider内的趋势组件
- smooth: boolean 趋势组件是否平滑
- isArea: boolean 趋势组件是都绘制为面积图，如设置false则绘制折线，默认false
- lineStyle: object 配置折线形态趋势组件的样式
- areaStyle: object 配置面积形态趋势组件的样式
backgroundStyleobject配置背景样式
forgroundStyleobject配置前景样式
handlerStyleobject配置滑块样式
textStyleobject配置跟随滑块的文字样式
minLimitnumber允许滑动的最小位置，值域范围为[0,1]
maxLimitnumber允许滑动的最大位置，值域范围为[0,1]

scrollBar ✨

可选, object

DEMO

功能描述： 配置横向滚动条，适用于数据较多的场景。

示例代码：

interactions: [
  {
    type: 'scrollbar',
    },
],

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

changeData()

可选

更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。