一行中的多个 dygraphs

Question

所以我对整个 Dygraph 业务都很陌生，并且很难找到解决方案。我试图在背景 canvas 上并排放置两个 dygraphs，但它不起作用。我尝试在右侧的图表 div 上使用 display-inline 属性，在左侧的图表 div 上使用 float:left 和许多其他 div 排列结构，但是 none 当我在它们上绘制 Dygraphs 时，它们似乎起作用了。 Float:left 是唯一一个设法将它们都放在 Canvas 上但使左侧 Dygraph 无法交互的人（我认为这是它不可动画的缺点）。

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'
                 });

Fiddle 这里：http://jsfiddle.net/eM2Mg/

Answer 1

好的，终于找到满意的解决方案了。为了我将来的参考，它是使用

display: inline-block;

在我绘制的两个 div 上。

为了正确使用，它们必须将 width 参数设置为某个值（至少对我来说，在那之前它不起作用）。

这是我现在的 div 代码：

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

希望这对遇到同样问题的人有所帮助。 :)

一行中的多个 dygraphs

Multiple dygraphs in one row

html

javascript

canvas

dygraphs