如何用AmCharts或其他图表库创建多系列漏斗图？

AmCharts 5 实现方案 #

你之前的错误在于添加了两个独立的漏斗/金字塔系列，它们会各自生成完整的漏斗结构并叠加，而非在同一层级内拆分。正确的做法是使用单个堆叠漏斗系列，将同阶段的多组数据整合到同一分类下，配置堆叠属性实现分段显示：

步骤1：调整数据结构 #

将每个阶段的多组数据拆分为同一stage下的多个条目，新增字段区分数据类型（如type），同时指定填充色：

const data = [
  { stage: "简历筛选", type: "内部推荐", value: 300, fill: "#0057e7" },
  { stage: "简历筛选", type: "外部投递", value: 700, fill: "#d62d20" },
  { stage: "笔试", type: "内部推荐", value: 150, fill: "#0057e7" },
  { stage: "笔试", type: "外部投递", value: 350, fill: "#d62d20" },
  { stage: "面试", type: "内部推荐", value: 60, fill: "#0057e7" },
  { stage: "面试", type: "外部投递", value: 140, fill: "#d62d20" },
  { stage: "录用", type: "内部推荐", value: 20, fill: "#0057e7" },
  { stage: "录用", type: "外部投递", value: 30, fill: "#d62d20" }
];

步骤2：配置堆叠漏斗系列 #

创建单个FunnelSeries，开启stacked属性，关闭序列插值确保同阶段分段同时渲染：

// 初始化图表（省略基础初始化代码，沿用你现有逻辑）
const series = chart.series.push(
  am5percent.FunnelSeries.new(root, {
    name: "Applicants",
    valueField: "value",
    categoryField: "stage",
    orientation: "vertical",
    stacked: true, // 核心：开启堆叠，同阶段数据将在同一漏斗段内拆分
    sequencedInterpolation: false, // 关闭序列插值，避免分段先后渲染
    alignLabels: false
  })
);

series.data.setAll(data);

// 绑定填充色字段，让每个分段显示对应颜色
series.columns.template.setAll({
  fillField: "fill",
  strokeOpacity: 0 // 移除边框，优化视觉效果
});

// 添加图例（可选）
const legend = chart.children.push(am5.Legend.new(root, {
  centerX: am5.percent(50),
  x: am5.percent(50),
  layout: root.horizontalLayout
}));
legend.data.setAll([
  { name: "内部推荐", fill: "#0057e7" },
  { name: "外部投递", fill: "#d62d20" }
]);

替代图表库推荐 #

如果AmCharts的堆叠方案无法满足需求，可考虑以下库：

• Highcharts：原生支持堆叠漏斗图，只需在多个系列中设置stacking: 'normal'，配置简单直观，文档示例丰富。
• Plotly.js：通过stackgroup属性实现同阶段多分段的漏斗/漏斗面积图，支持交互式操作，适合数据探索场景。
• D3.js：完全自定义渲染逻辑，可精准控制每个分段的位置、大小和样式，适合高度定制化的视觉需求，但需要编写更多底层代码。

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