Amcharts5折线图：移除默认轴并创建自定义值轴

核心思路 #

直接禁用默认X轴的所有元素，创建完全自主控制的自定义轴，精准匹配标签间隔与网格线位置，彻底规避原方案的布局错位问题。

具体实现步骤 #

1. 彻底禁用默认X轴 #

先把默认X轴的轴线、网格线、标签全部隐藏，完全脱离默认轴的自动布局约束：

// 隐藏默认X轴的所有组件
xAxis.axisLine.template.set("visible", false);
xAxis.grid.template.set("visible", false);
xAxis.labels.template.set("visible", false);

2. 创建自定义轴的承载容器 #

在图表底部添加一个容器，专门放置自定义轴标签：

const customAxisContainer = chart.plotContainer.createChild(am4core.Container);
customAxisContainer.width = am4core.percent(100);
customAxisContainer.height = 30; // 自定义轴标签区域高度
customAxisContainer.y = am4core.percent(100); // 定位到图表底部
customAxisContainer.layout = "horizontal";

3. 动态生成匹配间隔的轴标签与网格线 #

基于数据中的range值和指定间隔，手动计算每个元素的位置并生成：

// 提取数据中唯一的range值并排序
const rawRanges = this.series.values.data.map(item => item.range);
const uniqueRanges = [...new Set(rawRanges)].sort((a, b) => a - b);

// 设置自定义间隔（比如每2个range显示一个标签）
const interval = 2;
const displayRanges = uniqueRanges.filter((_, idx) => idx % interval === 0);

// 计算range对应的图表X轴百分比位置
const xMin = Math.min(...uniqueRanges);
const xMax = Math.max(...uniqueRanges);
const getXPercent = (range) => ((range - xMin) / (xMax - xMin)) * 100;

// 生成网格线和标签
displayRanges.forEach(range => {
  const xPos = getXPercent(range);
  
  // 添加垂直网格线
  const gridLine = chart.plotContainer.createChild(am4core.Line);
  gridLine.stroke = am4core.color("#eee");
  gridLine.strokeWidth = 1;
  gridLine.x = am4core.percent(xPos);
  gridLine.y1 = 0;
  gridLine.y2 = am4core.percent(100);
  
  // 添加轴标签
  const label = customAxisContainer.createChild(am4core.Label);
  label.text = range.toString();
  label.horizontalCenter = "middle";
  label.x = am4core.percent(xPos);
  label.fontSize = 12;
});

4. 适配图表缩放/平移（可选） #

如果图表支持交互缩放，监听extremesChanged事件同步更新自定义轴：

chart.events.on("extremesChanged", () => {
  // 清除旧的网格线和标签
  chart.plotContainer.children.each(child => {
    if (child instanceof am4core.Line && child.stroke.rgb === am4core.color("#eee").rgb) {
      child.dispose();
    }
  });
  customAxisContainer.children.clear();

  // 根据当前视图极值重新生成轴元素
  const currentMin = chart.xAxes.getIndex(0).min;
  const currentMax = chart.xAxes.getIndex(0).max;
  const visibleRanges = uniqueRanges.filter(r => r >= currentMin && r <= currentMax);
  const displayVisibleRanges = visibleRanges.filter((_, idx) => idx % interval === 0);

  displayVisibleRanges.forEach(range => {
    const xPos = ((range - currentMin) / (currentMax - currentMin)) * 100;
    // 重复步骤3的网格线和标签生成逻辑
  });
});

方案优势 #

• 完全摆脱默认轴的自动布局限制，标签间隔与网格线位置100%匹配
• 可自由定制标签样式、网格线样式，扩展性更强
• 避免原适配器方案中“标签空白未隐藏”的潜在问题

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