javascript - 浮选条形图多个系列的问题

我使用Flot图表已有很短的时间，并且需要根据选择显示一个或两个系列的条形图：

if (lC2 != 'None') {
      values = [
          { label: lC1, data: arrC1, color: cC1 },
          { label: lC2, data: arrC2, color: cC2 }
               ];
      bWidth = 0.15;
 }
 else {
      values = [{ data: arrC1, color: cC1 }];
      bWidth = 0.3;
}

我绘制图表的函数是：

function BarChartH(id, data, ticksl) {

$.plot(id, data, {
    series:{
        bars: {
            show: true,
            barWidth: bWidth,
            order: 1,
            horizontal: true
        }
    },
    grid: {
        hoverable: true
        , align: "center"
        //,horizontal: true
    },
    legend: {
        show: true
    }
    , yaxis: { ticks: ticksl }
});
}

但是，当需要显示两个系列（lC2 != 'None'）时，仅显示第二个系列（条形图堆叠在一起）。

问题是，如果我从函数中删除“ order：1”并为每个数据添加顺序，例如：

values.push({ label: lC1, bars: { order:1 }, data: arrC1, color: cC1 });
values.push({ label: lC2, bars: { order:2 }, data: arrC2, color: cC2 });

要么

values = [
    { label: lC1, bars: { order:1 }, data: arrC1, color: cC1 },
    { label: lC2, bars: { order:2 }, data: arrC2, color: cC2 }];

它显示了这两个系列，但是条形图之间有很大的空间，并且在它们之间有很多重叠（如左图所示，第一个Y标签的lC2条与第二个Y标签的lC1条重叠）。



我需要使同一Y标签的两个条形更接近，以使它们之间有所不同，但我不知道我做错了什么。

编辑：
添加：
fiddle

最佳答案

您必须使用此插件orderBars ...选中此fiddle
我为此使用了orderBars插件...也可以增加bWidth的值以减少条之间的空间。

这也是我所做的：

var arrC1 = [[7,5], [3,4],[4,3],[6,2],[4,1]];
var arrC2 = [[2,5], [1,4],[0,3],[5,2],[4,1]];

var ticksl = [[5, "Five"], [4, "Four"], [3, "Three"], [2,"Two"], [1,"One"]];

var data = [{bars:{order:1},data: arrC1,color: 'red'},
        {bars:{order:2},data: arrC2,color: 'green'}];

var bWidth=0.43;

$.plot($('#Chart'), data, {
    series: {
        bars: {
            show:true,
            lineWidth: 1,
            barWidth: bWidth,
            order: 1,
            horizontal: true
        }
    },
    grid: {
        align: "center"
    },
    legend: {
        show: true
    },
    yaxis:{
        ticks: ticksl,
        autoscaleMargin: 0.8
    }
});