flot side by sideスタックバー

Question

Flotを使用してスタックバーと混在したサイドバーチャートを作成できますか？ここjqplot質問と同様に

：jqplot Side by Side Stacked Bar Chart

はサイドの実行によって両方が、片側だけを使用してみましたし、私が並んで無効にした場合、スタックバーが完璧に動作します。オプションにbarsを追加

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

：（Xプロパティを、あなたがそれらを切り替えて表示されます順序をコメントアウト）http://jsfiddle.net/WAGbt/：http://peltiertech.com/Utility/pix/clusterstackchart.png

私が書いたサンプル・コードは次のとおりです。

イメージのようになります。 ...

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

}; 

そして、この形式にデータをマッサージ...

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], 
    ] 

] 

そしてそれは次のように動作します。私は、一連のラベルを持つ別のアップデートを行い、軸上http://jsfiddle.net/WAGbt/2/

：http://jsfiddle.net/WAGbt/3/