AmCharts 4能否实现单系列Horizontal Stacked Bar Chart？

AmCharts原生的stacked = true确实依赖多系列，但你可以通过数据预处理+单系列分组配置来实现预期的水平堆叠效果，无需创建多个独立系列，具体方案如下：

1. 数据结构预处理 #

从数据库获取单条数据后，将其拆分为对应各堆叠分段的子数据项。比如原始数据是{ category: "项目A", 已完成: 20, 进行中: 30, 未开始: 50 }，转换为以下数组格式：

[
  { category: "项目A", segment: "已完成", value: 20 },
  { category: "项目A", segment: "进行中", value: 30 },
  { category: "项目A", segment: "未开始", value: 50 }
]

这种拆分可以在后端接口返回时处理，也可以在前端获取数据后用JS转换，完全适配动态取数场景。

2. AmCharts配置实现 #

基于预处理后的分段数据，使用单系列+分组配置模拟堆叠效果，核心代码示例（以AmCharts 5为例）：

// 初始化图表
const root = am5.Root.new("chartdiv");
const chart = root.container.children.push(
  am5xy.XYChart.new(root, {
    layout: root.verticalLayout,
    panX: false,
    panY: false
  })
);

// Y轴（分类轴，对应项目名称）
const yAxis = chart.yAxes.push(
  am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

// X轴（数值轴，对应分段数值）
const xAxis = chart.xAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

// 创建水平条形系列
const series = chart.series.push(
  am5xy.ColumnSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueXField: "value",
    categoryYField: "category",
    grouped: true, // 启用同分类下的分组堆叠
    orientation: "horizontal" // 设置为水平条形
  })
);

// 为不同分段设置颜色
series.columns.template.adapters.add("fill", (fill, target) => {
  const segment = target.dataItem.dataContext.segment;
  switch(segment) {
    case "已完成": return am5.color("#2ecc71");
    case "进行中": return am5.color("#f39c12");
    case "未开始": return am5.color("#e74c3c");
    default: return fill;
  }
});

// 加载预处理后的分段数据
series.data.setAll([
  { category: "项目A", segment: "已完成", value: 20 },
  { category: "项目A", segment: "进行中", value: 30 },
  { category: "项目A", segment: "未开始", value: 50 }
]);

3. 方案优势 #

• 无需维护多个系列，仅用单系列即可实现堆叠效果，降低代码复杂度；
• 数据预处理逻辑简单，适配数据库动态返回的任意结构；
• 保留AmCharts原生的交互能力（如tooltip、动画等）。

内容的提问来源于stack exchange，提问作者Taygz