条形图

阅读时间约 2 分钟

定义

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

别名: 条状图

何时使用

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

视觉通道

位置、颜色

分析目的

比较、分布、排名

数据准备

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

1 个「数值」字段

设计指引

用法建议

design

元素构成

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

快速上手

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();
📊 查看更多示例.

🎨 条形图详细的配置参考 API 文档

条形图特性

指定柱子最大宽度、最小宽度

通过设置 maxBarWidth 可以指定柱子的最大宽度,设置 minBarWidth 可以指定柱子的最小宽度。

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

设置柱子的圆角

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

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

设置柱子的背景样式

通过设置 barBackground.style 可以指定柱子的背景样式。