flot图表中的条宽一致

Question

我无法在Flot中获得一致的条宽。我有的图表可以有1到10个数据点。当有10个数据点时，条形图的大小正确。但是，当数据点少于10时，图表中的条形开始变胖。以下两张图片证明了这一点。

当有10件物品时，酒吧尺寸合适。

当只有一个项目时，条形变得非常大。

我知道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，min为 - （maxSeries - numSeries）/ 2.即使数量低于maxSeries，也会保留条形图上方和下方的空间。

这两项都要求您了解将出现的最大系列数。

Answer 2

我认为你必须将某些标签传递给你的yaxis（ticks属性）。假设您的标签位于myLabels数组中。因此，如果只有一个标签，请在它之前和之后添加新的空标签，以使您的唯一条形更小：

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,
    // [...]
},