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

这是我的结果：

plotting a chart

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

Correct chart

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

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

Answer 1

在fiddle

中发现了2个错误

jquery.flot.orderBars.js链接错误。
删除订单：系列数据中的1和2

使用此

更新了系列默认对象

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

检查updated fiddle

希望这有帮助。

Answer 2

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

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

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

结果：

jQuery flot多条形图并排

2 个答案: