Flot Bar Chart несколько выпуск серии

Question

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

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') он появляется только второй (бары становятся сложены).

Дело в том, что если я удалю «порядок: 1» от функции и добавить заказ для каждого данных, таких как:

values.push({ label: lC1, bars: { order:1 }, data: arrC1, color: cC1 }); 
values.push({ label: lC2, bars: { order:2 }, data: arrC2, color: cC2 }); 

ИЛИ

values = [ 
    { label: lC1, bars: { order:1 }, data: arrC1, color: cC1 }, 
    { label: lC2, bars: { order:2 }, data: arrC2, color: cC2 }]; 

отображает обе серии, но с большим пространством между полосками и когда их много накладывается (панель lC2 от первой метки Y перекрывается с линией lC1 со второй метки Y, как на прикрепленном изображении).

Мне нужно, чтобы получить как прутья же Y этикетки ближе к сделать разницу между ними, но я не знаю, что я делаю неправильно.

EDIT: Добавлено: 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 
    } 
});