jQuery flot multi bar chart бок о бок

Question

Я использую jQuery plot с плагинами категорий для создания диаграмм. Я хочу построить два бара бок о бок в течение каждого месяца с этим кодом:

$.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 ошибки в вашем fiddle

1. jquery.flot.orderBars.js ссылка неверна.
2. Удалены заказ: 1 и 2 из рядов данных

3. обновленные ваш объект серии по умолчанию с этим

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

   Проверьте updated fiddle

Надеется, что это помогает.

Answer 2

Я попытался использовать плагин orderBars, но результат не был тем, что я ожидал. Так что я сделал:

1. Используйте категории плагин
2. Определить левый и правый выравнивать

набл: Он работает только с двумя планками бок о бок.

Кодекс:

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

Результат: