Recharts 设置 Y 轴范围答案

【问题标题】：Recharts set Y-axis rangeRecharts 设置 Y 轴范围
【发布时间】：2018-10-09 06:23:42
【问题描述】：

不知道如何使用http://recharts.org/设置Y轴范围

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

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

【问题讨论】：

【解决方案1】：

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

 <YAxis type="number" domain={[0, 20000]}/>

检查这个小提琴Link

域默认值：[0，“自动”]

当轴为数字轴时，指定轴的域。长度的域应该是 2，我们将验证域中的值。并且数组中的每个元素都可以是 number, '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)]} />

【讨论】：

效果很好。在阅读文档时，让我感到困惑的是“域名”名称。谢谢你的精彩回答?
如果我想要间隔应该在 100 上有所不同，该怎么办

【解决方案2】：

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

<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />

【讨论】：

【解决方案3】：

关于这个的另一件事

"type" 可以是 'number', 'category' 2 种类型

domain 将仅适用于 number 类型的轴。

如果未应用域，请检查您的轴类型

【讨论】：

想要数字时不要使用字符串！

【解决方案4】：

假设您正在绘制一个多线图并在计算时使用自定义 YAxis。

所以，您可以从数据中定义自定义 dataKey

   <YAxis type="number" 
           dataKey={(v)=>parseInt(v.someValue)}
           domain={[0, 'dataMax+100']} />

【讨论】：

【解决方案5】：

如果问题仍然存在，可能是因为轴值是字符串类型。

手动将您的值转换为可能得到解决的数字。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。