對齊超過2個酒吧的酒吧

Question

我想用flot來創建一個圖形，在每個x軸空間有多個酒吧，我幾乎有這個工作，但是，我想所有的酒吧出現在旁邊彼此，但唯一的選擇對齊：'左'，對齊：'右'或對齊：'中心'。這意味着它們有三個以上的條重疊，無論如何要以這種方式繪製這個圖？

Answer 1

如果您希望系列中的每個小節顯示爲彼此相鄰，則必須使用flot的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值你有。在下面的代碼片段，我挑的.25一個barWidth爲三個系列：

$(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>