Amcharts5多折线图表问题：Y轴货币符号、X轴标签及无折线显示

1. Y轴标签添加货币符号 #

使用Amcharts5的NumberFormatter配置格式化规则，绑定到Y轴的标签格式化逻辑：

// 创建货币格式化器
const numberFormatter = am5.NumberFormatter.new(root, {
  numberFormat: "$#,###.00" // 可按需调整格式，比如"$#,###"去掉小数位
});

// 配置Y轴
const yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {}),
  label: {
    formatter: function(label) {
      return numberFormatter.format(label.dataItem.value);
    }
  }
}));

2. X轴标签垂直显示 #

设置X轴标签的rotation属性为90，并调整对齐参数避免标签截断：

const xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
  categoryField: "category", // 替换为你的X轴对应字段名
  renderer: am5xy.AxisRendererX.new(root, {
    label: {
      rotation: 90,
      centerY: am5.p50,
      centerX: am5.p100,
      paddingRight: 15 // 增加右侧内边距防止标签被容器截断
    }
  })
}));

3. 预览无折线显示排查方案 #

从以下核心方向逐一排查：

• 数据格式校验：确保数据结构符合要求，每个数据点包含X/Y轴对应字段，示例结构：

  const data = [
    { category: "Jan", value1: 100, value2: 150 },
    { category: "Feb", value1: 120, value2: 180 }
  ];
  

• 系列绑定校验：确认折线系列已正确关联数据与轴：

  // 创建折线系列并绑定数据
  const series1 = chart.series.push(am5xy.LineSeries.new(root, {
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value1", // 对应数据中的Y值字段
    categoryXField: "category" // 对应数据中的X值字段
  }));
  series1.data.setAll(data);
  

• 容器与初始化校验：确保图表容器有明确宽高（如CSS设置width: 100%; height: 500px;），且调用了初始化方法：

  chart.appear(1000, 100);
  

• 调试数据：在控制台打印series1.data.values，确认数据已正确加载。

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