Question

因此，我对整个Dygraph业务非常陌生，并且很难找到解决方案。我试图在背景画布上并排放置两个dygraph，它只是不起作用。我尝试在右侧的图形div上使用display-inline属性，float：左边的div和许多其他div排列结构但是当我在它们上绘制Dygraphs时它们似乎都不起作用。浮动：左边是onlj，它设法将它们都放在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'
                 });

在这里小提琴：http://jsfiddle.net/eM2Mg/

Answer 1

好的，所以终于找到了满意的溶剂。对于我将来的参考，它是使用

display: inline-block;

在我绘制dygraphs的两个div上。

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

这是我的div代码：

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

希望这可以帮助有同样问题的人。 :)

一行中有多个dygraph

1 个答案: