You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Ant Design Charts的Line组件中隐藏Y轴?

解决Ant Design Charts Line组件隐藏Y轴的问题

针对@ant-design/charts 2.1.2版本,正确隐藏Y轴的方式是在yAxis配置对象中设置visible: false,而非直接将yAxis设为false,也不是使用旧版的axis嵌套配置。

以下是可直接复用的代码示例:

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

const DemoLine = () => {
  const data = [
    { year: '2018', value: 10 },
    { year: '2019', value: 20 },
    { year: '2020', value: 15 },
    { year: '2021', value: 25 },
  ];

  const config = {
    data,
    xField: 'year',
    yField: 'value',
    // 核心配置:隐藏Y轴
    yAxis: {
      visible: false,
    },
    // 若需精细化控制(比如仅隐藏标签/刻度),可单独配置
    // yAxis: {
    //   label: false, // 隐藏Y轴标签
    //   tick: false, // 隐藏Y轴刻度
    //   line: false, // 隐藏Y轴线
    // },
  };

  return <Line {...config} />;
};

export default DemoLine;

该配置会完全隐藏Y轴的所有元素(轴线、刻度、标签),如果只需要隐藏部分元素,可单独调整label、tick或line为false。

内容的提问来源于stack exchange,提问作者FariqueFece

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 08:39:53