Recharts 设置 Y 轴范围
Recharts set Y-axis range
无法弄清楚如何使用 http://recharts.org/
设置 Y 轴的范围
希望 Y 轴在其范围内显示 100 而不是当前的 60。
相信代码示例在这种特定情况下不需要或填写目的
在 YAxis 组件上将域值设置为 0 到 100(或任何你想要的)
<YAxis type="number" domain={[0, 20000]}/>
勾选这个fiddleLink
Domain
DEFAULT: [0, 'auto']
Specify the domain of axis when the axis is a number axis. The length
of domain should be 2, and we will
validate the values in domain. And each element in the array can be a
number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20',
'dataMax + 100', or a function that accepts a single argument and
returns a number. If any element of domain is set to be 'auto',
comprehensible scale ticks will be calculated, and the final domain of
axis is generated by the ticks.
格式:
<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)]} />
还有一点关于这个
"type" 可以有两种类型 'number', 'category'
域将仅应用于轴的数字类型。
如果未应用域,请检查您的轴类型
假设您正在绘制多线图并在计算中使用自定义 YAxis。
因此,您可以根据数据定义自定义 dataKey,然后
<YAxis type="number"
dataKey={(v)=>parseInt(v.someValue)}
domain={[0, 'dataMax+100']} />
如果图表的值超出自定义域范围,则域边界设置将被忽略。我遇到了这个问题,因为我使用自定义形状,其中负值像正值一样堆叠在顶部(但颜色不同)。指定 domain={[0, 'dataMax + 1000']}
不起作用,因为 y 轴仍然显示负数 – 直到我设置 allowDataOverflow={true}
<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />
如果问题仍然存在,可能是因为轴值是字符串类型。
手动将您的值转换为可能会得到解决的数字。
无法弄清楚如何使用 http://recharts.org/
设置 Y 轴的范围希望 Y 轴在其范围内显示 100 而不是当前的 60。
相信代码示例在这种特定情况下不需要或填写目的
在 YAxis 组件上将域值设置为 0 到 100(或任何你想要的)
<YAxis type="number" domain={[0, 20000]}/>
勾选这个fiddleLink
Domain DEFAULT: [0, 'auto']
Specify the domain of axis when the axis is a number axis. The length of domain should be 2, and we will validate the values in domain. And each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number. If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks.
格式:
<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)]} />
还有一点关于这个
"type" 可以有两种类型 'number', 'category'
域将仅应用于轴的数字类型。
如果未应用域,请检查您的轴类型
假设您正在绘制多线图并在计算中使用自定义 YAxis。
因此,您可以根据数据定义自定义 dataKey,然后
<YAxis type="number"
dataKey={(v)=>parseInt(v.someValue)}
domain={[0, 'dataMax+100']} />
如果图表的值超出自定义域范围,则域边界设置将被忽略。我遇到了这个问题,因为我使用自定义形状,其中负值像正值一样堆叠在顶部(但颜色不同)。指定 domain={[0, 'dataMax + 1000']}
不起作用,因为 y 轴仍然显示负数 – 直到我设置 allowDataOverflow={true}
<YAxis domain={[0, 'dataMax + 1000']} allowDataOverflow={true} />
如果问题仍然存在,可能是因为轴值是字符串类型。
手动将您的值转换为可能会得到解决的数字。