2016-08-19 9 views
1

저는이 전체 다이어 그래프 비즈니스에서 매우 새로워서 해결책을 찾기 위해 투쟁합니다. 백그라운드 캔버스에 두 개의 대화 상자를 나란히 놓으려고하고 있는데 그냥 작동하지 않습니다. 오른쪽에있는 그래프의 div에 display-inline 속성을 사용 해봤습니다 : 왼쪽 div에 왼쪽으로 왼쪽으로 많은 div div 구조체를 배치했지만 그 중 아무 것도 Dygraphs를 그릴 때 작동하지 않는 것 같습니다. 플로트 : 캔버스에 두 가지 모두 넣을 수있는 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/

답변

1

좋아, 그래서 결국은 만족 sollution을 찾을 수 있었다. 나에 대한 미래의 참고 자료로 dygraphs를 그렸던 두 div 모두에서

display: inline-block; 

을 사용했습니다.

올바른 사용을 위해서는 너비 매개 변수가 일부 값으로 설정되어 있어야합니다 (적어도 나에게는 그 전에는 작동하지 않았습니다). 이 같은 문제를 가진 사람을 도움이

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

희망 :

이 지금 내 DIV 코드입니다. :)