浮動圖表中的條形寬度一致

Question

我無法在Flot中獲得一致的條形寬度。 我的圖表可以包含1到10個數據點之間的任意位置。 當有10個數據點時，條形大小正確。 但是，當數據點少於10個時，圖表中的條形開始變胖。 以下兩個圖像對此進行了說明。

當有10個項目時，條形圖的大小合適。

當只有1個項目時，條形變得非常大。

我知道barWidth屬性，並且嘗試更改它。 問題在於，它僅影響具有10個項目的圖表中條形圖的大小，但僅使圖表具有胖條。

我還讀過一些地方，我可以嘗試更改包含圖表的div的高度，但是我想避免這種情況，因為我希望圖表具有固定的尺寸，而與顯示的項目無關。

Answer 1

問題在於，barWidth以軸為單位表示。 隨着減少條形數量，y軸會自動縮放，直到只有一個條形從0變為1，並且默認條形寬度0.8占據了大部分垂直空間。

您可以通過兩種方式解決此問題：

1. 計算barWidth以按系列數縮放，即0.8 * numSeries / maxSeries。 如果maxSeries為10，則barWidth將從10個系列的0.8縮放到一個系列的0.08。

2. 在y軸上設置固定的最小值和最大值，最大值為numSeries +（maxSeries-numSeries）/ 2，最小值為-（maxSeries-numSeries）/2。這會在條形上方和下方保留空間，即使其數量降至maxSeries以下。 。

這兩項都要求您對將要出現的最大系列數有所了解。

Answer 2

我認為您必須將標簽傳遞到yaxis（ticks屬性）。 假設您的標簽位於myLabels數組中。 因此，如果只有1個標簽，請在標簽前后添加新的空標簽，以使唯一的條形變得更小：

var myLabels = [];

// add a fake label (in my production code I grab labels from the server)
myLabels.push([0, 'My only label']); // This label has index=0

if (myLabels.length == 1) {
    myLabels.splice(0, 0, [-1, '']); // (-1) is the new index lower than my label's index
    myLabels.push([1, '']); // (1) is the new index greater than my label's index
}

// In configuration of a plot:

// [...]
yaxis: {
    ticks: myLabels,
    // [...]
},