2

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

细条

当有 10 个项目时，这些条的大小适中。

脂肪棒

当只有 1 个项目时，栏变得非常大。

我知道该barWidth属性，并且已尝试更改它。问题是它只影响图表中包含 10 个项目的条形的大小，但它只影响图表中的粗条。

我还在某处读过，我可以尝试更改div包含图表的高度，但我想避免这种情况，因为我希望图表具有固定的尺寸，而不管显示的项目如何。

4

2 回答 2

6

问题是 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，这也会在条形图上方和下方保留空间.

这两个都要求您对将出现的最大系列数有所了解。

于 2013-03-26T12:02:13.010 回答
0

我认为您必须将某处标签传递给您的 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,
    // [...]
},
于 2014-05-07T13:37:56.100 回答