Bar

4 min read

定义

使用柱形显示维度的数值。横轴显示分类维度,纵轴显示相应的值

别名: 条状图

何时使用

条形图通过水平柱子长短对比数值大小,它与柱状图类似,只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。

视觉通道

位置、颜色

分析目的

比较、分布、排名

数据准备

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

1 个「数值」字段

Design Guide

用法建议

design

元素构成

design
  • X 轴:通常对应连续数据,值为数字,调用连续数据 X 轴。
  • Y 轴:通常对应分类数据,值为文本,调用连续数据 Y 轴。
  • 图例:通常出现在分组柱关图、分组条形图中,用来区分不同柱子代表的数据含义。
  • 标签:用来解释数据点的值。
  • 辅助元素:用来解释某个特殊的数据点的值,或标记出某个特殊含义的区域。

Quick start

import { Bar } from '@antv/g2plot';

const data = [
  { year: '1951 年', value: 38 },
  { year: '1952 年', value: 52 },
  { year: '1956 年', value: 61 },
  { year: '1957 年', value: 145 },
  { year: '1958 年', value: 48 },
];

const bar = new Bar('container', {
  data,
  xField: 'value',
  yField: 'year',
  seriesField: 'year',
  legend: {
    position: 'top-left',
  },
});

bar.render();
📊 See more examples.

🎨 For an overview of the bar plot options see the API reference.

Bar plot features

Specify minWidth and maxWidth of bar

Using maxBarWidth to specify the maximum width of bar, and minBarWidth to specify the minimum width of bar.

通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。

Set corner-radius of bar

通过设置 barStyle.radius 可以指定柱子的圆角,数据类型可以是 number 也可以是 number[]

当柱子数值为正值时,const [r1, r2, r3, r4] = radius 依次代表柱子左上角、右上角、右下角、左下角的 radius。 当柱子数值为负值时,const [r1, r2, r3, r4] = radius 依次代表柱子左下角、右下角、右上角、左上角的 radius

Set background style of bar

Using barBackground.style to specify the background style of bar.