Ant Design双轴折线图特定数据点绘制异常原因咨询

我正在使用Ant Design制作双轴折线图，用于展示本年度的Revenue（营收）与Forecast（预测值）。我的数据如下：

[
{
    "Month": "January",
    "Revenue": 0,
    "Forecast": 0
},
{
    "Month": "February",
    "Revenue": 0,
    "Forecast": 0
},
{
    "Month": "March",
    "Revenue": 0,
    "Forecast": 0
},
{
    "Month": "April",
    "Revenue": 0,
    "Forecast": 0
},
{
    "Month": "May",
    "Revenue": 0,
    "Forecast": 0
},
{
    "Month": "June",
    "Revenue": 162.065,
    "Forecast": 0
},
{
    "Month": "July",
    "Revenue": 1191.839,
    "Forecast": 0
},
{
    "Month": "August",
    "Revenue": 1265.07,
    "Forecast": 0
},
{
    "Month": "September",
    "Revenue": 228.957,
    "Forecast": 228.957
},
{
    "Month": "October",
    "Revenue": 0,
    "Forecast": 114
},
{
    "Month": "November",
    "Revenue": 0,
    "Forecast": 171
},
{
    "Month": "December",
    "Revenue": 0,
    "Forecast": 142
}
]

将数据传入双轴折线图后，多数数据绘制正常，但在Revenue与Forecast本该重合的九月数据点处，两者相距较远，仅Forecast点绘制异常（图表异常示意图：）。我的图表配置代码如下：

const config = {
data:[data2, data2],
xField: 'Month',
yField: ['Revenue', 'Forecast'],
geometryOptions: [
  {
    geometry: 'line',
    color: '#5B8FF9',
  },
  {
    geometry: 'line',
    color: '#FF0000',
  },
],
  };

请问该异常问题产生的原因是什么？

问题原因及解决思路 #

问题出在数据配置和双轴逻辑的冲突上：

• 你把data设置为[data2, data2]，同时指定yField: ['Revenue', 'Forecast']，这会让Ant Design Charts为两条线分别启用左右两个独立Y轴。
• 左侧Y轴的刻度范围由Revenue的最大值（1265.07）决定，右侧Y轴的刻度范围由Forecast的最大值（228.957）决定。
• 九月的Forecast值228.957在右侧Y轴处于最高位，但对应到左侧Y轴的位置仅约为18%（228.957/1265.07），所以视觉上和Revenue的点（在左侧Y轴对应228.957的位置）相距很远。

修正方案

1. 不需要双轴的场景：将data改为data2，让两条线共享同一个Y轴，配置如下：

const config = {
  data: data2,
  xField: 'Month',
  yField: ['Revenue', 'Forecast'],
  geometryOptions: [
    { geometry: 'line', color: '#5B8FF9' },
    { geometry: 'line', color: '#FF0000' },
  ],
};

2. 需要双轴的场景：如果必须保留双轴，可通过手动指定Y轴的min/max让两个轴的范围对齐，或者开启syncViewPadding同步轴的内边距，确保数值对应的位置一致。

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