Flot 条形图多系列问题

Question

我使用 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 }];

它显示了两个系列，但是在条之间有很多 space，并且当有很多重叠时（第一个 Y 标签的 lC2 条与第二个 Y 标签的 lC1 条重叠如附图所示）。

我需要让同一个 Y 标签的两个条更靠近一些才能区分它们，但我不知道我做错了什么。

编辑： 添加： fiddle

Answer 1

你必须使用这个插件orderBars ... check this fiddle 为此我使用了 orderBars 插件...您也可以增加 bWidth 的值以减少柱之间的 space。

这也是我所做的：

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
    }
});

Flot 条形图多系列问题

Flot Bar Chart multiple series issue

javascript

jquery

charts

flot