如何配置AMCharts4的XYChart使横轴0值居中显示？

要让水平XYChart的横轴0值固定在页面中心，核心是让横轴的数值范围保持对称，确保0点处于正负范围的中间位置，具体配置步骤如下：

• 计算对称范围：遍历数据中的所有横轴数值，取正负值的最大绝对值，以此作为对称范围的边界值。
• 强制设置轴范围：将横轴的最小值设为负的最大绝对值，最大值设为正的最大绝对值，同时禁止轴自动调整范围。

完整代码示例 #

// 初始化图表
am4core.useTheme(am4themes_animated);
const chart = am4core.create("chartdiv", am4charts.XYChart);

// 示例数据
chart.data = [
  { category: "类别1", x: -35 },
  { category: "类别2", x: 28 },
  { category: "类别3", x: -12 },
  { category: "类别4", x: 42 }
];

// 配置Y类别轴
const yAxis = chart.yAxes.push(new am4charts.CategoryAxis());
yAxis.dataFields.category = "category";
yAxis.renderer.grid.template.location = 0;

// 配置X数值轴
const xAxis = chart.xAxes.push(new am4charts.ValueAxis());
xAxis.renderer.minGridDistance = 30;

// 计算并设置对称轴范围
const values = chart.data.map(item => item.x);
const maxAbs = Math.max(...values.map(Math.abs));
xAxis.min = -maxAbs;
xAxis.max = maxAbs;
xAxis.keepSelection = true; // 禁止轴自动调整范围

// 创建横向柱状系列
const series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueX = "x";
series.dataFields.categoryY = "category";
series.columns.template.tooltipText = "{valueX}";

补充说明 #

• 如果数据是动态更新的，需要在数据更新后重新计算最大绝对值，再更新横轴的min和max值。
• 即使数据只有正值或只有负值，此方法依然有效：比如只有正值时，横轴左侧会自动填充对称的负范围，确保0点保持在中心位置。

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