flot multibar chart - bars too far away

Question

我遇到了flot multibar图表的问题（使用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值;两对之间没有空间。这非常令人困惑，用户不匹配对。我不需要在相应的钢筋之间留出空间（或者非常小的空间），并且在这两对钢筋之间有合理的空间。

这里是两个图的照片，这样你就可以看到问题：

任何帮助？谢谢。

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>

EDITS - 更新ANSWER

另一种想法，如果你可以放弃p lugin和抖动你自己的价值。这将允许更好地控制间距。

看到这个剪断：

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>