分组柱状图（BarGroupChart）#

本示例演示如何在 BarChart 中使用 positionBy 属性将柱状图按子分类（如颜色）进行分组，并使用 foregroundStyleBy 对每组数据应用不同的颜色样式。此方式适用于在主分类下对多个子类进行对比展示。

场景说明#

数据包含了不同颜色（如 Green, Purple, Pink, Yellow）下的三种物体类型（Cube, Sphere, Pyramid）及其数量（count）。图表展示了每种颜色下各类型物体的数量，按颜色分组并以不同颜色区分。

核心概念说明#

positionBy#

1positionBy: {
2  value: item.color,
3  axis: 'horizontal',
4}

• 将柱状图按照 value（此处为颜色）进行分组。

• axis 指定分组的方向：

  • 'horizontal'：按 Y 轴进行分组（即按颜色垂直堆叠或排列）。
  • 'vertical'：按 X 轴分组（通常用于横向柱状图）。

foregroundStyleBy#

1foregroundStyleBy: item.color

• 根据指定的字段值（颜色）为每个柱状条应用前景样式（颜色）。
• 有助于在图表中清晰地区分不同的分组。

代码摘要#

1const data = [
2  { color: "Green", type: "Cube", count: 2 },
3  { color: "Purple", type: "Sphere", count: 1 },
4  ...
5]
6
7const list = data.map(item => ({
8  label: item.type,              // 主标签（如 Cube、Sphere）
9  value: item.count,             // 数值高度
10  positionBy: {
11    value: item.color,           // 分组依据（颜色）
12    axis: 'horizontal',
13  },
14  foregroundStyleBy: item.color, // 应用不同颜色
15  cornerRadius: 8,
16}))

完整示例#

1<Chart frame={{ height: 400 }}>
2  <BarChart marks={list} />
3</Chart>

该图表将以颜色为分组单位，每组包含三种类型（Cube、Sphere、Pyramid）的柱状条，每种颜色对应一组条，并应用统一的颜色样式。

适用场景#

此类分组柱状图适用于：

• 展示主分类下的子分类对比（例如不同行业中不同岗位数量对比）。
• 展示结构化数据的分布情况。
• 强调多个子类在各分组中的占比和数量。