如何隐藏antd图表中的Y轴

Question

我想在 Ant 设计图表（React）中隐藏 Line 组件中的 Y 轴

我当前的版本是：

• 反应：18.3.1
• antd：5.19.3
• ant-design/图表：2.1.2

我正在使用该模块

import { Line } from '@ant-design/plots';

有了这个设置对象：

{
  data: datasets || [],
  xField: 'label',
  yField: 'value',
  width: data.hasLegends ? 1300 : 1600,
  seriesField: 'type',
  color,
  smooth: true,
  xAxis: {
    label: {
      style: {
        fill: NEUTRAL_BLACK,
        fontSize: 12,
      },
      formatter: upperCase,
    },
  },
  yAxis: false,
  position: 'right',
  legend: false,
  theme: {
    styleSheet: {
      fontFamily: 'Foundry Monoline Extra Bold',
    },
  },
  label: {
    style: {
      fontFamily: 'Foundry Monoline Medium',
      fontSize: 12,
      textAlign: 'center',
    },
    transform: [{ type: 'overlapDodgeY'}],
    textBaseline: 'bottom',
    textAlign: 'center',
    formatter: (text, record) => {
      let value = '';
      if ('accounting_type' in record) {
        switch (record.type) {
          case TYPE_REVENUE:
            value = Formatter.toCurrency(record.value);
            break;
          case TYPE_EXPENSE:
            value = `-${Formatter.toCurrency(record.value)}`;
            // this prevents an overlap of "$0.00" and "-$0.00"
            if (record.value == 0 && datasets.length === TWO_VALUES_PER_MONTH) value = ``;
            break;
          default:
            value = Formatter.toCurrency(record.value);
            break;
        }
      } else {
        value = Formatter.toCurrency(record.value);
      }
      // Retornar el valor formateado como moneda
      return value;
    },
  },
  point: {
    shape: 'circle',
    size: 3,
    style: {
      r: 4,
    },
  },
  tooltip: false,
  interactions: [
    {
      type: 'marker-active',
    },
  ],
  shapeField: 'smooth',
}

我什至尝试过文档中的此设置，但它没有按我的预期工作

axis: {
    x: {},
    y: {},
  }

在本文档中没有提及 y 轴隐藏：https://ant-design-charts.antgroup.com/en/options/plots/component/axis

我真的很感谢任何反馈；）

Answer 1

使用 null 而不是空对象。

const config = {
    ...
    axis: {
        x: null,
        y: null
    },
};


<Line {...config} />