javascript - float 多条形图 -- 条形图距离太远

Question

我在使用 flot 多条形图表(使用 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>

编辑 - 更新答案

另一个想法，如果你可以删除插件并自己抖动值。这可以更好地控制间距。

看这个片段:

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>