如何動態設置c3圖表的y軸縮放比例？

Question

我正在製作一個已經分組了數據的c3圖表，並且我希望有一個顯示最大值的y軸網格線，即組合的數據不應超過。

因此，y軸網格線可以被稱爲「最大」

我知道如何使電網，但它並不總是顯示，因爲分組的數據可能遠低於電網值。但我希望網格始終顯示。

我看着y軸的填充，但它使用像素，很難準確。

是否有一種方法可以將y軸設置爲顯示比5軸更大的值，而不管y軸網格線是多少？

Answer 1

不幸的是，C3沒有設置「將Y軸設置爲最大值或最大值」。不過，我們假設您已經使用下面的方法添加了網格線。然後，您可以在這裏設置顯示的y軸填充和使用設置的最大值：

grid: { 
    y: { 
     lines: [{ value: 20 }], 
    } 
}, 
axis: { 
    y: { 
     padding: {top:5, bottom,0}, 
     max: 20 
    } 
} 

在這種情況下，我已設置的最大值是一樣的網格線值，用於填充，以創建一個小的空間它上面。這將處理您的數據低於網格線的情況。但是，如果您的數據超過（網格線+填充）總數，則圖表不會增長以適應該數據，因爲最大設置是固定的。所以，如果你的數據大於最大值，你需要動態地改變這個最大值，如果你的數據大於最大值，你可以通過查找數據的最大值來設置最大值，如果超過了網格線值，那麼就是這樣...

if(highValue > gridlineValue) 
    chart.axis.max(highValue); 
else 
    chart.axis.max(gridlineValue); 

我剛剛注意到您的數據從未超出網格線，因此您可以使用此答案的第一部分。我已經把剩下的留在了這裏，以防其他人想要更動態的解決方案。請注意，如果您希望將其明確設置爲高於網格線的值，則也可以使用不帶填充的最大值。

Answer 2

在撰寫本文時，實際上有一種方法可以將y-max重置爲動態，並將其設置爲特定的最大值。您可以將最大值設置爲undefined，如下所示：chart.axis.max(undefined);。

在這裏，有一個工作jsfiddle。