如何在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
相关产品推荐
相关产品推荐

