jqPlot이 캔버스를 렌더링하지 않는 이유는 무엇입니까?

Question

막대 그래프에 jqPlot을 사용하려고하는데 아무 것도 표시 할 수 없습니다.

jqPlot 코드와 모든 플러그인을 포함 시켰습니다.

HTML :

<div id="jqplot" class="plot"> 

</div> 

자바 스크립트 :

"use strict"; 
(function ($){ 

     $.jqplot('jqplot', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]); 

})(jQuery); 

그것은 클래스를 추가하고 'jqplot 대상 제가 직접 예제 코드를 복사 한

무엇이든지 오류가 수신되지 않는 경우 ''jqplot 'div에 javascript가 작동해야하지만 canvas/chart를 div에 추가하지 않으면 추가 된 클래스가있는 빈 div 만 표시됩니다.

왜 이것이 렌더링되지 않는가?

나는 html5boilerplate도 사용하고 있지만 두 가지와 관련된 알려진 문제점을 찾을 수 없습니다.

감사합니다,

토마스

Answer 1

문제점을 발견했습니다. jqplot이 표시되도록 설정된 주 컨테이너 div가 있습니다. 페이지로드시 아무 것도 표시되지 않고 '입력'버튼을 클릭하면 .fadeIn()과 함께 표시됩니다.

캔버스를 추가 할 수 없다고 가정합니다. 부모는 display : none; - 당신이 클릭 할 때

Answer 2

당신이 당신의 CSS는 "음모"클래스에 무엇을하고 있는지 보여줄 수 있습니까? jqPlot Usage page은 플롯 대상에 너비와 높이를 추가해야한다고 말합니다.

Answer 3

는 생성 된 차트에 replot 기능을 사용하여 ... 사용자가 클릭 입력 후 주요 컨테이너에 페이드 기능 내부 $의 .jqplot를 호출하여 작업하는 데있어 귀하의 버튼.

// create your chart 
var plot1 = $.jqplot(...); 

// hook the button press 
$("button#enter").on("click", function(){ 
    // fade your tab in, wait for it to complete, 
    $(".tab").fadeIn(1000, function(){ 
     // then replot, if not already drawn 
     if(!plot1._drawCount){ 
      plot1.replot(); 
     } 
    }); 
}); 

http://www.jqplot.com/deploy/dist/examples/hiddenPlotsInTabs.html

Answer 4

내가 다음 jqplot 코드가 작동하지 않을 것입니다이 문제 이전에, 어떤 이유에 달렸다 그러나

$(document).ready(function() { 
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]); 
} 

, 나는 $ (문서를) 전환하면 .ready (함수 {...}에서 jQuery (함수 ($) {..}) jqplot 코드가 제대로 작동했습니다.

jQuery(function ($) { 
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]); 
}