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

OR

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

Answer 1

您必须使用此插件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
    }
});

Flot Bar Chart多个系列问题

1 个答案: