Выровнять бары более 2-х баров на флоте

Question

Я пытаюсь использовать флот для создания графика, который имеет несколько баров в каждом пространстве оси x, я почти все это работаю, но я бы хотел, чтобы все бары появлялись рядом с друг друга, но единственные опции для выравнивания: «left», align: «right» или align: «center». Это означает, что с более чем тремя полосами они перекрываются, так или иначе, чтобы построить этот график таким образом?

Answer 1

Если вы хотите, чтобы каждый столбец в ряду появлялся рядом друг с другом, вам необходимо использовать флот orderBars plugin.

Вы можете указать порядок каждой серии, включив плагин и добавив order свойство каждой серии bars свойство:

var series = []; 

series.push({ 
    data: [], // your raw data 
    bars: { 
     order: 0 
    } 
}); 

series.push({ 
    data: [], // your raw data 
    bars: { 
     order: 1 
    } 
}); 

Вы также хотите, чтобы выбрать подходящий barWidth значение в зависимости от того, как много серий у тебя есть. В фрагменте кода ниже, я выбрал barWidth из .25 для трех серий:

$(function() { 
 
    var data1 = [ 
 
     [0, 12.3], 
 
     [1, 295], 
 
     [2, 143], 
 
     [3, 79], 
 
     [4, 125], 
 
     [5, 8], 
 
     [6, 125] 
 
     ]; 
 
    var data2 = [ 
 
     [0, 15], 
 
     [1, 28.95], 
 
     [2, 163], 
 
     [3, 74], 
 
     [4, 125], 
 
     [5, 85], 
 
     [6, 125] 
 
     ]; 
 
    var data3 = [ 
 
     [0, 158], 
 
     [1, 28.95], 
 
     [2, 103], 
 
     [3, 74], 
 
     [4, 145], 
 
     [5, 85], 
 
     [6, 105] 
 
     ]; 
 

 
var dataSet = [{ 
 
     data: data1, 
 
     bars: { order: 1 } 
 
    },{ 
 
     data: data2, 
 
     bars: { order: 2 } 
 
    },{ 
 
     data: data3, 
 
     bars: { order: 3 } 
 
    }]; 
 

 
    $.plot("#chart", dataSet, { 
 
     series: { 
 
      bars: { 
 
       show: true, 
 
       barWidth: .25 
 
      } 
 
     } 
 
    }); 
 
});

#chart { 
 
    width: 400px; 
 
    height: 250px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> 
 
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script> 
 
<div id="chart"></div>