Recharts设置Y轴范围

Mat*_*erg 11 reactjs recharts

无法弄清楚如何使用http://recharts.org/设置Y轴的范围

希望Y轴在其范围内显示100而不是当前的60.

Recharts

在这种特定情况下,不需要Belive代码示例或填充目的

Gau*_*aik 21

在 YAxis组件上设置域值从0到100(或任何你想要的)

 <YAxis type="number" domain={[0, 20000]}/>
Run Code Online (Sandbox Code Playgroud)

检查这个小提琴链接

域名 默认:[0,'自动']

当轴是数字轴时,指定轴的域.域的长度应为2,我们将验证域中的值.并且数组中的每个元素都可以是数字,'auto','dataMin','dataMax',类似'dataMin - 20','dataMax + 100'的字符串,或者接受单个参数并返回数字的函数.如果域的任何元素设置为"自动",则将计算可理解的比例刻度,并且通过刻度生成轴的最终域.

格式:

<YAxis type="number" domain={['dataMin', 'dataMax']} />
<YAxis type="number" domain={[0, 'dataMax']} />
<YAxis type="number" domain={['auto', 'auto']} />
<YAxis type="number" domain={[0, 'dataMax + 1000']} />
<YAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<YAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
Run Code Online (Sandbox Code Playgroud)

  • 效果非常好。在阅读文档时,“域名”让我感到困惑。谢谢你的精彩回答 (3认同)
  • 如果我想要间隔相差 100 该怎么办 (2认同)

小智 5

如果图表的值超出自定义域范围,则域边界设置将被忽略。我遇到了这个问题,因为我使用自定义形状,其中负值像正值一样堆叠在顶部(但颜色不同)。指定domain={[0, 'dataMax + 1000']}不起作用,因为 y 轴仍然显示负数 - 直到我设置allowDataOverflow={true}

<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />
Run Code Online (Sandbox Code Playgroud)