flot multibar chart - 酒吧太远了

Question

我遇到了flot multibar chart的问题（使用orderBars插件） - 当有很多（= 24）列时，条形图彼此相距太远。我是从这个例子开始直接从http://en.benjaminbuffet.com/labs/flot/

开始的

<script type='text/javascript' src='jquery.flot.min.js'></script>
<script type='text/javascript' src='jquery.flot.orderBars.js'></script>

...

var d1 = [];
for (var i = 0; i <= 5; i += 1)
    d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 5; i += 1)
    d2.push([i, parseInt(Math.random() * 30)]);

ds.push({
    data:d1,
    bars: {
        show: true, 
        barWidth: 0.3, 
        order: 1,
        lineWidth : 2
    }
});
ds.push({
    data:d2,
    bars: {
        show: true, 
        barWidth: 0.3, 
        order: 2
    }
});

$.plot($("#placeholder"), ds, {
    grid:{
        hoverable:true
    }
});

这些酒吧彼此相邻，成对地以空格隔开。

但是，如果我放了24列（是的，我想在24小时内为值创建图表），即更改代码的开头：

var d1 = [];
for (var i = 0; i <= 23; i += 1)
    d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
    d2.push([i, parseInt(Math.random() * 30)]);

条之间有一个属于一个x值的空格;并且两对之间没有空间。这非常令人困惑，用户不匹配对。我在相应的条形之间不需要空间（或很小的空间），并且对之间没有合理的空间。

这是两张图的图片，因此您可以看到问题：

对此有何帮助？ THX。

Answer 1

在狭窄空间内有24个酒吧。您需要更多的条形组之间的空间。您的选择是：

1。）你增加了你的情节宽度。

2。）你减少了每个酒吧的大小。

您无法直接调整条形之间的空间。从评论到插件：

The plugin adjust the point by adding a value depanding of the barwidth
 * Exemple for 3 series (barwidth : 0.1) :
 *
 *          first bar décalage : -0.15
 *          second bar décalage : -0.05
 *          third bar décalage : 0.05

以下是一些可能修复的代码剪辑：

var d1 = [];
for (var i = 0; i <= 23; i += 1)
  d1.push([i, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
  d2.push([i, parseInt(Math.random() * 30)]);

ds = [];
ds.push({
  data: d1,
  bars: {
    show: true,
    barWidth: 0.3,
    order: 1,
    lineWidth: 2
  }
});
ds.push({
  data: d2,
  bars: {
    show: true,
    barWidth: 0.3,
    order: 2
  }
});

$.plot($("#placeholder"), ds, {
  grid: {
    hoverable: true
  }
});

ds1 = [];
ds1.push({
  data: d1,
  bars: {
    show: true,
    barWidth: 0.005,
    order: 1,
    lineWidth: 2
  }
});
ds1.push({
  data: d2,
  bars: {
    show: true,
    barWidth: 0.005,
    order: 2
  }
});

$.plot($("#placeholder1"), ds1, {
  grid: {
    hoverable: true
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>

<div id="placeholder" style="width:3000px; height:300px"></div>
<div id="placeholder1" style="width:600px; height:300px"></div>

编辑 - 更新的答案

另一个想法是，你可以放弃插件并自己抖动值。这样可以更好地控制间距。

请参阅此剪辑：

var barWidth = 0.2;
var jitterVal = barWidth / 1.5;

var d1 = [];
for (var i = 0; i <= 23; i += 1)
  d1.push([i - jitterVal, parseInt(Math.random() * 30)]);

var d2 = [];
for (var i = 0; i <= 23; i += 1)
  d2.push([i + jitterVal, parseInt(Math.random() * 30)]);

ds = [];
ds.push({
  data: d1,
  bars: {
    show: true,
    barWidth: barWidth
  }
});
ds.push({
  data: d2,
  bars: {
    show: true,
    barWidth: barWidth
  }
});

$.plot($("#placeholder"), ds, {
  grid: {
    hoverable: true
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>

<div id="placeholder" style="width:400px; height:300px"></div>