javascript jQuery浮动多条形图并排

jQuery flot multi bar chart side by side

提问by Florian Sauerwein

I'm using jQuery plot with the categories plugin to create charts. I want to plot two bars side by side for each month with this code:

我正在使用带有类别插件的 jQuery 图来创建图表。我想使用以下代码并排绘制每个月的两个条形图：

$.plot(".chart", [ { label: "Neue Mitglieder", data: data, order: 1 }, { label: "F?llige Kündigungen", data: data2, order: 2 } ], {
        series: {
            bars: {
                show: true,
                barWidth: 0.5,
                align: "center",

            }
        },
        xaxis: {
            mode: "categories",
            ticks: [[0,"Jan"], [1,"Feb"],  [2,"M?r"],  [3,"Apr"],  [4,"Mai"],  
                    [5,"Jun"],  [6,"Jul"],  [7,"Aug"],  [8,"Sep"],  [9,"Okt"],  [10,"Nov"],  [11,"Dez"]],
            tickLength: 1,

        },
        grid: {
            hoverable: true,
        },
        yAxis: {
            allowDecimals:false,
    }
    });

And that's my result:

这就是我的结果：

The bars are still overlapping but I want my result to look like

条形仍然重叠，但我希望我的结果看起来像

Does anyone know what's wrong with my code? I thought the "order" option will fix that problem, but it didn't change anything.

有谁知道我的代码有什么问题？我认为“订单”选项会解决这个问题，但它没有改变任何东西。

Here's the jsfiddle: http://jsfiddle.net/buk8mhy8/

这是 jsfiddle：http: //jsfiddle.net/buk8mhy8/

采纳答案by Sandeeproop

Found 2 mistakes in your fiddle

在你的小提琴中发现了 2 个错误

1. jquery.flot.orderBars.js link is wrong.
2. Removed order:1 and 2 from series data

3. updated your series default object with this

   series: {
     bars: {
       show: true,
       barWidth: 0.15,
       order: 1
     }
    }
   

   Check the updated fiddle

1. jquery.flot.orderBars.js 链接错误。
2. 从系列数据中删除了 order:1 和 2

3. 用这个更新了你的系列默认对象

   series: {
     bars: {
       show: true,
       barWidth: 0.15,
       order: 1
     }
    }
   

   检查更新的小提琴

Hope this helps.

希望这可以帮助。

回答by bocapio

I tried to use orderBars plugin but the result was not what I expected. So what I did was:

我尝试使用 orderBars 插件，但结果不是我所期望的。所以我所做的是：

1. Use the categories plugin
2. Define left and right align

1. 使用类别插件
2. 定义左右对齐

obs: It works only with two bars side-by-side.

obs：它仅适用于并排的两个条。

The Code:

代码：

var data1 = [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];
var data2 = [ ["January", 1], ["February", 5], ["March", 6], ["April", 3], ["May", 37], ["June", 39] ];


$.plot($("#placeholder"), 
        [{  data: data1,
            bars: {
                show: true,
                barWidth: 0.2,
                align: "left",
            }
        },
        {
            data: data2,
            bars: {
                show: true,
                barWidth: 0.2,
                align: "right",
            }
        }
        ],
        {
            xaxis: {
                mode: "categories",
                tickLength: 0
            }
        }
);

The result:

结果：