複数のダイグラフを1列に並べる

Question

私はこのダイグラフ事業全体で非常に新しいもので、解決策を見つけるのに苦労しています。私はバックグラウンドのキャンバスに2つのダイアグラムを並べて配置しようとしていますが、それはうまく機能しません。 右のグラフのdivのdisplay-inlineプロパティを使用しようとしました：左のdivの左側にleftを置いてください。他の多くのdivの構造を整理しましたが、Dygraphsを描画すると動作しないようです。浮動小数点：leftはCanvas上に両方を置くことができるonljのものでしたが、左ダイアグラフを非対話的にしました（私はそれが不可能であるという欠点があると考えています）。

HTML：

<div id="container" > 
       <canvas class="canvas" id="cnv" width="140" height="60px" style="border:1px solid #999999;"></canvas> 
       <div style="width:120px; height:65px; "> 
        <div id="graphdiv2" style="width:60px; height:65px;"></div> 
        <div id="graphdiv3" style="width:60px; height:65px;"></div> 
       </div>  
      </div> 

JS：ここ

g = new Dygraph(document.getElementById("graphdiv2"), 
       // For possible data formats, see http://dygraphs.com/data.html 
       // The x-values could also be dates, e.g. "2012/03/15" 
       "X,Y,Z\n" + 
       "1,0,3\n" + 
       "2,2,6\n" + 
       "3,4,8\n" + 
       "4,6,9\n" + 
       "5,8,9\n" + 
       "6,10,8\n" + 
       "7,12,6\n" + 
       "8,14,3\n", 
       { 
        // options go here. See http://dygraphs.com/options.html 
        legend: 'always', 
        animatedZooms: true, 
        title: 'dygraphs chart template' 
       }); 

g2 = new Dygraph(document.getElementById("graphdiv3"), 
       // For possible data formats, see http://dygraphs.com/data.html 
       // The x-values could also be dates, e.g. "2012/03/15" 
       "X,Y,Z\n" + 
       "1,0,3\n" + 
       "2,2,6\n" + 
       "3,4,8\n" + 
       "4,6,9\n" + 
       "5,8,9\n" + 
       "6,10,8\n" + 
       "7,12,6\n" + 
       "8,14,3\n", 
       { 
        // options go here. See http://dygraphs.com/options.html 
        legend: 'always', 
        animatedZooms: true, 
        title: 'dygraphs chart template' 
       }); 

はフィドル：http://jsfiddle.net/eM2Mg/

Answer 1

オクラホマので、最終的には満足sollutionを見つけることができました。私の将来の参照のために、それは両方のdivグラフ上に描画するdivsの上に

display: inline-block; 

の使用でした。

の幅がの値に設定されている必要があります（少なくともそれ以前は動作しませんでした）。

これが今の私のdivのコードです：

<div id="graphdiv3" style="width: 200px; height: 100px; display: inline-block;"></div> 

が、これは同じ問題を持つ人がお役に立てば幸いです。 :)