디스플레이가있는 div에 캔버스가 작동하지 않습니다.

Question

캔버스 요소에 문제가 있습니다. 숨겨진 div에 있고 div가 전환 된 경우 표시되지 않습니다. 더 나은 설명과 FF와 크롬 (테스트하지 다른 사람) 여기에

http://jsfiddle.net/78sJT/10/

이 일어나고 예. 아무도이 문제를 극복하는 이유/방법을 말해 줄 수 있습니까?

Answer 1

dygraphs는 div의 너비/높이를 0/0으로 감지하고 다시 그릴 때까지는 배우지 않습니다 (개별 DOM 요소의 크기가 조정될 때 발생하는 JS 이벤트가 없음). http://jsfiddle.net/78sJT/13/

Answer 2

난 그냥이 충돌

가장 쉬운 해결 방법은 내가 업데이트 g.resize();

$(document).ready(function(){ 
     $('.click').click(function(){ 
     $('#hidden').toggle(); 
     g.resize(); 
     }); 
    }); 

단지 명시 적으로 jsfiddle dygraph은 그것의 크기를 업데이트하고 사업부를 사용하여 전환 후를 다시 그려야 함을 알 수 있도록하는 것입니다 OP 질문에 설명 된 문제와 일치하는 Chrome 37.0.2062.124 m에서 문제가 발생했습니다. 그러나 특정 그래프 라이브러리를 사용하지 않고 캔버스로 그리기 만합니다. DIV의 크기가 바뀌면 이미 캔버스를 다시 그려 넣었습니다.

캔버스의 너비 또는 높이를 0으로 설정하면 신뢰할 수 없게됩니다. 다음에 너비와 높이를 0이 아닌 값으로 설정하면 너비와 높이가 이제 0이 아니며 요소 트리에 표시 될 수 있지만 즉시 그 위에있는 모든 도면은 무시됩니다. 크롬 디버거에서 페이지에서 강조 표시됨).

그래서 benni_mac_b의 대답에 조언뿐만 아니라 당신은 다음 중 하나를 수행해야

• 사용 setTimeout 또는 즉시 너비/높이를 설정 한 후 그것을 할, 또는
하지 않도록, 캔버스에 그리기 지연과 유사
• 너비/높이가 0 인 캔버스를 설정하지 않았는지 확인하십시오. 픽셀이 1 픽셀 이상인지 확인하십시오.

나는 간단하게하기 위해 나중에 문제를 해결합니다. 요약

:

단지 (1000, 1000)에 (0, 0)에서 성장했다 캔버스 즉시에 그려 질 수 없다 - 그것은 모든 그리기 명령을 무시합니다. 그러나 방금 (1, 1)에서 (1000, 1000)으로 성장하면 즉시 모든 것을 그릴 수 있습니다.