Ausrichten von Balken mehr als 2 Balken in Flot

Question

Ich versuche, Flot zu verwenden, um ein Diagramm zu erstellen, das mehrere Bars in jedem x-Achse-Raum hat, ich habe fast funktioniert, aber ich möchte alle Bars neben angezeigt werden einander, aber die einzigen Optionen zum Ausrichten: 'links', align: 'rechts' oder align: 'center'. Das bedeutet, dass sie sich bei mehr als drei Balken überlappen, gibt es diese Graphik auf diese Weise?

Answer 1

Wenn Sie möchten, dass jeder Balken einer Serie nebeneinander angezeigt wird, müssen Sie flots orderBars plugin verwenden.

Sie die Reihenfolge der einzelnen Reihe, indem das Plugin und das Hinzufügen einer order Eigenschaft zu jeder Serie bars Eigenschaft angeben:

var series = []; 

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

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

Sie werden auch abholen wollen einen entsprechenden barWidth Wert je nachdem, wie viele Serien du hast. Im Codeausschnitt unten, nahm ich eine barWidth von .25 für drei Serien:

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