Recharts 設置 Y 軸范圍

Question

無法弄清楚如何使用http://recharts.org/設置 Y 軸的范圍

希望 Y 軸在其范圍內顯示 100 而不是當前的 60。

在這種特定情況下不需要相信代碼示例或填充目的

Answer 1

在YAxis組件上將域值設置為 0 到 100（或任何你想要的）

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

檢查這個小提琴鏈接

域默認值：[0，'自動']

當軸是數字軸時，指定軸的域。 domain 的長度應該是 2，我們將驗證 domain 中的值。 數組中的每個元素都可以是一個數字、'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)]} />

Answer 2

如果圖表的值超出自定義域范圍，則域邊界設置將被忽略。 我遇到了這個問題，因為我使用自定義形狀，其中負值像正值一樣堆疊在頂部（但顏色不同）。 指定domain={[0, 'dataMax + 1000']}不起作用，因為 y 軸仍然顯示負數 - 直到我設置allowDataOverflow={true}

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

Answer 3

關於這一點的另一件事

“類型”可以是 2 種類型“數字”、“類別”

域將僅應用於軸的數字類型。

如果未應用域，請檢查您的軸類型

Answer 4

假設您正在繪制多線圖並在計算時使用自定義 YAxis。

因此，您可以從數據中定義自定義 dataKey 然后

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

Answer 5

如果問題仍然存在，可能是因為軸值是字符串類型。

手動將您的值類型轉換為可能會得到解決的數字。

Answer 6

經過多次試驗，我編寫了自定義代碼來計算 YAxis 最大值，如下所示：

const [yAxisMax, setYAxisMax] = useState(100);

.....
// json fetch here, and stored in 'data'
let currentMonthMax = Math.max(...data.map((o) => o.CurrentMonth)); // if the array has a custom object that contains 'CurrentMonth'
setYAxisMax(max * 1.1); // increase yaxis by 1.1%

.....

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