如何调整AmCharts 4 FunnelSeries切片的最大宽度

解决方案 #

要实现顶部切片为最大宽度的指定百分比，后续切片按该基准比例缩小，同时标签等元素尺寸不变，需要通过调整系列宽度基准+固定标签尺寸的组合方式，具体如下：

• 利用FunnelSeries.widthRatio定义顶部切片相对容器最大宽度的比例
• 强制固定标签的字体大小、内边距或尺寸，避免随切片缩放
• 若需更精细控制，可通过适配器动态修改系列的maxWidth

代码修改示例 #

基于你的Angular项目代码，修改核心部分如下：

import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

// 初始化图表
let chart = am4core.create("chartdiv", am4charts.SlicedChart);
chart.hiddenState.properties.opacity = 0;

// 设置数据
chart.data = [
  { category: "Step 1", value: 100 },
  { category: "Step 2", value: 80 },
  { category: "Step 3", value: 50 },
  { category: "Step 4", value: 30 }
];

// 创建漏斗系列
let series = chart.series.push(new am4charts.FunnelSeries());
series.dataFields.value = "value";
series.dataFields.category = "category";
series.alignLabels = true;

// 关键设置1：顶部切片设为最大宽度的80%
series.widthRatio = 0.8;

// 关键设置2：固定标签尺寸，不随切片缩放
series.labels.template.fontSize = 14;
series.labels.template.padding(6, 12, 6, 12);
series.labels.template.fill = am4core.color("#333");

// 若使用LabelBullet，同样固定其尺寸
let labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.fontSize = 14;
labelBullet.label.width = 130;
labelBullet.label.wrap = true;
labelBullet.label.textAlign = "middle";

为什么之前的方法无效？ #

• 直接设置slices.width/slices.maxWidth：仅针对单个切片设置固定宽度，不会改变系列内部的比例计算逻辑，后续切片仍会基于原始最大宽度缩放
• 调整图表宽度：会整体缩放图表容器内的所有元素（包括标签、线条等），无法单独控制切片尺寸
• 未正确使用适配器：若适配器未针对series.widthRatio或series.maxWidth修改，无法影响系列的宽度基准计算

进阶精细控制（适配器方式） #

如果需要动态计算顶部切片比例，可通过适配器修改系列的maxWidth：

// 动态设置系列最大宽度为容器宽度的75%
series.adapter.add("maxWidth", function(maxWidth) {
  return maxWidth * 0.75;
});

// 强制标签字体大小不变
series.labels.template.adapter.add("fontSize", function(size) {
  return 14;
});

这样设置后，顶部切片宽度会基于容器最大宽度的指定百分比生成，后续切片按数据值与顶部切片的比例缩小，标签等元素保持原始尺寸。

内容的提问来源于stack exchange，提问作者Przemysław Świat