「BUG AntV G2」柱状图加折线图的双轴图中会出现无数据图形占位

[CrazyOctopusDan]

问题描述

我需要有一张双柱形图+折线图+双坐标轴的chart。 在我把数据处理好传入后发现刻度没有对准中间区域，我以为是柱形图画歪了，仔细检查过后发现其实是存在了一个空数据的柱形图绘制在了坐标轴中：期望为「销售金额」「指标金额」两个柱形图，实际上多了一个未知柱形图。

数据为

const TrendChartData = [
  {
    year: '202401',
    name: '销售金额',
    amount: 69000000
  },
  {
    year: '202401',
    name: '指标金额',
    amount: 55000000
  },
  {
    year: '202401',
    rateType: '达成率',
    rate: 1.3
  },
  {
    year: '202401',
    rateType: '同比',
    rate: 0.01
  },
  {
    year: '202401',
    rateType: '环比',
    rate: 0.9
  },
  {
    year: '202402',
    name: '销售金额',
    amount: 70000000
  },
  {
    year: '202402',
    name: '指标金额',
    amount: 60000000
  },
  {
    year: '202402',
    rateType: '达成率',
    rate: 1.3
  },
  {
    year: '202402',
    rateType: '同比',
    rate: 0.01
  },
  {
    year: '202402',
    rateType: '环比',
    rate: 1
  },
  {
    year: '202403',
    name: '销售金额',
    amount: 75000000
  },
  {
    year: '202403',
    name: '指标金额',
    amount: 65000000
  },
  {
    year: '202403',
    rateType: '达成率',
    rate: 1.2
  },
  {
    year: '202403',
    rateType: '同比',
    rate: 0.07
  },
  {
    year: '202403',
    rateType: '环比',
    rate: 0.8
  },
  {
    year: '202404',
    name: '销售金额',
    amount: 76000000
  },
  {
    year: '202404',
    name: '指标金额',
    amount: 70000000
  },
  {
    year: '202404',
    rateType: '达成率',
    rate: 1.1
  },
  {
    year: '202404',
    rateType: '同比',
    rate: 0.01
  },
  {
    year: '202404',
    rateType: '环比',
    rate: 1.1
  },
  {
    year: '202405',
    name: '销售金额',
    amount: 77000000
  },
  {
    year: '202405',
    name: '指标金额',
    amount: 75000000
  },
  {
    year: '202405',
    rateType: '达成率',
    rate: 1.0
  },
  {
    year: '202405',
    rateType: '同比',
    rate: 0.01
  },
  {
    year: '202405',
    rateType: '环比',
    rate: 0.9
  },
  {
    year: '202406',
    name: '销售金额',
    amount: 78000000
  },
  {
    year: '202406',
    name: '指标金额',
    amount: 80000000
  },
  {
    year: '202406',
    rateType: '达成率',
    rate: 0.9
  },
  {
    year: '202406',
    rateType: '同比',
    rate: 0.01
  },
  {
    year: '202406',
    rateType: '环比',
    rate: 1.2
  }
]

chart代码按照逻辑来的

...
// 柱状图
chart.scale('amount', {
          nice: true,
          min: 0,
          formatter: (val) => {
            // 按照千分位格式化加上逗号
            if (val == null) {
              return;
            } else {
              return `${val}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            }
          }
        });
chart
          .interval()
          .position('year*amount')
          .color('name', (field) => {
            if (!field) {
              return;
            }
            return _nameColor[field];
          })
          .adjust({
            type: 'dodge',
            marginRatio: 0.1
          });
// 折线图
this.chart.scale('rate', {
          nice: true,
          min: 0,
          formatter: (val) => {
            if (val == null) {
              return;
            } else {
              return val;
            }
          }
        });

        this.chart
          .line()
          .position('year*rate')
          .color('rateType', (field) => {
            if (!field) {
              return;
            }
            return _lineColor[field];
          })
          .label('rateType', (field) => {
            if (!field) {
              return;
            }

            return {
              content: (obj) => {
                return obj.rate;
              },
              style: {
                fill: _labelColor[field]
              }
            };
          })
          .shape('line');
...

重现链接

No response

重现步骤

在绘制charts的时候传入的data是两种数据的混合，即又描述了柱形图又描述了折线图就会出现空数据占位图形。

预期行为

我希望不显示这个空的柱子。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

在官网中的例子，在我本地的例子

补充说明（可选）

No response