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

Question

我正在制作一個具有分組數據的c3圖表，並且我希望有一個顯示最大值的y軸網格線，該分組數據的總和不應超過。

因此，y軸網格線可以稱為“最大”

我知道如何制作網格，但是它並不總是顯示，因為分組的數據可能比網格值低很多。 但我希望網格始終顯示。

我查看了y軸的填充，但是它使用像素，很難准確。

是否有辦法僅將y軸設置為比y軸網格線大5個值？

Answer 1

不幸的是，C3沒有“將Y軸設置為yvalue的最大值或最大數據”的設置。 但是，假設您已使用以下方法添加了網格線。 然后，您可以使用此處顯示的設置來設置y軸填充和最大值：

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

在這種情況下，我將最大值設置為與網格線值相同，並使用填充在其上方創建一個小空間。 這將處理您的數據低於網格線的情況。 但是，如果您的數據超過了（網格+填充）總數，則圖表將無法容納該數據，因為最大設置是固定的。 因此，如果您的數據大於最大值，則需要通過JavaScript動態更改此最大值，方法是查找數據中的最大值，然后將max設置為大於最大值（如果它超過網格線值），類似這樣...

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

我只是注意到您的數據永遠不會超出網格線，因此您可以使用此答案的第一部分。 如果有人希望獲得更動態的解決方案，我將其余的內容留在這里。 請注意，如果您想將其顯式設置為高於網格線的值，也可以不使用填充而使用最大值。

Answer 2

在撰寫本文時，實際上有一種方法可以將y-max設置為特定的max，然后將其重置為動態。 您可以通過將max設置為undefined ，例如： chart.axis.max(undefined); 。

在這里，有一個工作的jsfiddle 。