jQuery flot多條形圖並排

Question

我正在使用帶有類別插件的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,
    }
    });

那是我的結果：

酒吧仍然重疊，但我希望我的結果看起來像

有誰知道我的代碼有什么問題？ 我認為“訂單”選項將解決這個問題，但它沒有改變任何東西。

這是jsfiddle： http ： //jsfiddle.net/buk8mhy8/

Answer 1

在你的小提琴中發現了2個錯誤

1. jquery.flot.orderBars.js鏈接錯誤。
2. 已刪除訂單：系列數據中的1和2

3. 用這個更新了你的系列默認對象

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

   檢查更新的小提琴

希望這可以幫助。

Answer 2

我試圖使用orderBars插件，但結果不是我的預期。 所以我做的是：

1. 使用類別插件
2. 定義左右對齊

obs：它只能與兩個並排的桿一起使用。

代碼：

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

結果：