如何解决删除 Recharts SimpleAreaChart 中的顶行
我使用的是 Recharts 2.0.9,我能够将面积图的样式设置为几乎它应该看起来的样子,但问题是当我将 axisLine 设置为 false 时,仍然有一条短线,看起来很奇怪。 还向 Y 轴添加了一条额外的顶线。也许有人会知道我如何隐藏那些短线和顶线?
<ResponsiveContainer width="100%" height={124}>
<AreaChart
data={data}
margin={{
top: 0,right: 0,left: 0,bottom: 0,}}>
<Cartesiangrid vertical={false} />
<YAxis
type="number"
domain={[60,90]}
ticks={[60,70,80,90]}
height={111}
interval={0}
tick={{ fontSize: 11 }}
width={20}
padding={{ top: 10 }}
axisLine={false}
tickLine={false}
/>
</ResponsiveContainer>
解决方法
Recharts 中的这些短线称为刻度线。您可以使用 tickLine
轴属性删除它们:
<XAxis tickLine={false} />
<YAxis tickLine={false} />
不看源码,很难判断为什么会出现上面的横线。有可能是轴的内边距是通过 padding
属性指定的,或者 Recharts 错误地定义了边界,这里您可以尝试通过 domain
属性设置边界:
<YAxis type="number" domain={['dataMin','dataMax']} />
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。