Flot Seite an Seite Stapel Bar

Question

Ist es möglich, eine Seite an Seite Balkendiagramm mit einer gestapelten Bar mit Flot gemischt zu haben?

Ähnlich wie die jqplot Frage hier: jqplot Side by Side Stacked Bar Chart

versucht, beide verwenden, aber nur eine der nebeneinander läuft, und wenn ich Seite an Seite zu deaktivieren, funktioniert die gestapelte Bar perfekt.

Bild wird ähnlich sein: http://peltiertech.com/Utility/pix/clusterstackchart.png

Beispielcode ich geschrieben habe, ist: http://jsfiddle.net/WAGbt/ (Kommentieren Sie die Reihenfolge: X-Eigenschaft und Sie werden sehen, wie sie wechseln)

$(document).ready(function() 
{ 
    DrawChart(); 
}); 

function GenerateSeries(added) 
{ 
    var data = []; 
    var start = 100 + added; 
    var end = 500 + added; 

    for (i = 1; i <= 20; i++) 
    { 
     var d = Math.floor(Math.random() * (end - start + 1) + start); 
     data.push([i, d]); 
     start++; 
     end++; 
    } 

    return data; 
} 

function DrawChart() 
{ 
    var dataa = GenerateSeries(100); 
    var datab = GenerateSeries(100); 
    var datac = GenerateSeries(100); 

    var ds = new Array(); 

    var data = 
    [ 
     { 
      label: "data1", 
      data: dataa, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 1, 
       lineWidth: 2 
      } 
     }, 
     { 
      label: "data2", 
      data: datab, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 2, 
       lineWidth: 2 
      } 
     }, 
     { 
      label: "data3", 
      data: datac, 
      bars: 
      { 
       show: true, 
       barWidth: 0.2, 
       order: 3, 
       lineWidth: 2 
      } 
     } 
    ]; 

    var options = { 
     series: { 
      stack: true 
     }, 
     xaxis: { 
     }, 
     grid: { 
      backgroundColor: { colors: ["#FFF", "#FFF"] } 
     } 
    }; 

    var plot = $.plot($("#placeholder"), data, options); 
} 

Answer 1

hinzufügen bars zu den Optionen ...

var options = { 
    series: { 
     stack: true 
    }, 
    xaxis: { 
    }, 
    grid: { 
     backgroundColor: { colors: ["#FFF", "#FFF"] } 
    }, 
    bars:{ // show the bars with a width of .4 
     show: true, 
     barWidth: .4 
    } 

}; 

Und die Daten in diesem Format Massage ...

var data = [ // all series 

    [ // first series (Q1) 
     [0,100], // pens Q1 N America 
     [0.4,120], // pencils Q1 N America 
     [1,130], // pens Q1 Europe 
     [1.4,140], // pencils Q1 Europe 
     [2,150], // pens Q1 Asia 
     [2.4,200], // pencils Q1 Asia 
    ], 

    [ // second series (Q2) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ], 

    [ // third series (Q3) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ], 

    [ // fourth series (Q4) 
     [0,100], 
     [0.4,200], 
     [1,200], 
     [1.4,200], 
     [2,200], 
     [2.4,200], 
    ] 

] 

Und es funktioniert wie folgt: http://jsfiddle.net/WAGbt/2/

ich ein weiteres Update mit Etikett für die Serie gemacht, und auf den Achsen: http://jsfiddle.net/WAGbt/3/