Recharts设置Y轴范围

时间:2018-04-28 16:38:45

标签: reactjs recharts

无法弄清楚如何使用http://recharts.org/

设置Y轴的范围

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

Recharts

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

4 个答案:

答案 0 :(得分:8)

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

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

检查这个小提琴Link

  

<强>域   默认:[0,'自动']

     

当轴是数字轴时,指定轴的域。长度   域应该是2,我们会   验证域中的值。并且数组中的每个元素都可以是a   number,'auto','dataMin','dataMax',像'dataMin - 20'这样的字符串,   'dataMax + 100',或接受单个参数的函数   返回一个数字。如果域的任何元素设置为“auto”,   将计算可理解的刻度刻度,并计算最终域   轴由刻度线生成。

<强>格式:

<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)]} />

答案 1 :(得分:1)

假设您正在绘制多线图,并且在计算时具有自定义的YAxis。

因此,您可以从数据中定义自定义dataKey,然后

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

关于此的另一件事

“类型”可以是“数字”,“类别”两种类型

域仅适用于轴的数字类型。

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