如何在AMCharts 5中绘制基于前值增量的柱形图？

问题排查与修复步骤 #

1. 移除无关配置 #

你给Y轴添加的calculateTotals: true是用于计算数据总计的，和增量计算逻辑完全无关，先删除该配置避免干扰：

var yAxis = this.state.chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: am5xy.AxisRendererY.new(root, {})
}));

2. 确保数据排序正确 #

valueYShow: "valueYChangePrevious"是基于数据的顺序来计算与前一条的差值，如果你的date字段没有按时间升序排列，计算逻辑会直接出错，导致图表空白。检查并确保数据源是按date从小到大排序的。

3. 手动计算增量（更稳妥的方案） #

如果上述调整后仍出现空白，建议直接在数据层面手动计算增量，再绑定到系列上，这种方式更直观且不易出问题：

处理原始数据

假设你的原始数据结构如下：

const originalData = [
  { date: "2024-01-01", field1: 1 },
  { date: "2024-01-02", field1: 3 },
  { date: "2024-01-03", field1: 8 },
  { date: "2024-01-04", field1: 11 },
  { date: "2024-01-05", field1: 20 }
];

遍历数据计算增量字段：

const processedData = originalData.map((item, index) => {
  return {
    ...item,
    delta: index === 0 ? 0 : item.field1 - originalData[index - 1].field1
  };
});

修改系列配置

将系列的valueYField替换为手动计算的delta字段：

series = chart.series.push(am5xy.ColumnSeries.new(root, {
  name: "Series",
  xAxis: xAxis,
  yAxis: yAxis,
  valueYField: "delta",
  valueXField: "date",
  tooltip: am5.Tooltip.new(root, {
    labelText: "{valueY}"
  })
}));

最后给系列设置处理后的数据：

series.data.setAll(processedData);

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