팝업의 플롯 그래프에 축 레이블이 겹쳐져 있습니다.

Question

커서를 올려 놓은 팝업 테이블이있는 데이터 테이블이 있습니다. 이러한 팝업은 간단히 div 요소이며 position: absolute 및 display: none이 초기 설정되어 있습니다. 몇 줄의 JavaScript가 마우스를 가리키면 숨기거나 표시합니다. 플롯 그래프가 각 팝업에 첨부됩니다.

하나의 장애를 제외하고는 위와 같은 효과가 있습니다. Flot에는 그래프가 이와 같은 팝업의 일부일 때 왼쪽 아래 모서리에서 x 축 및 y 축 레이블이 겹치는 버그가 있습니다. 즉, 그래프를 생성하기 전에 포함 된 div를 표시하는 것이 솔루션입니다.

각 팝업 div의 CSS에서 초기 display: none을 제거한 해결책을 시도했습니다. 또한 background-color 및 border 스타일 요소를 제거하여 이러한 div를 효과적으로 보이지 않도록했습니다. 그런 다음 간단한 jQuery가 그래프를 생성하고 이러한 팝업 (배경색, 테두리 설정 등)에 적합한 CSS 스타일을 지정합니다. 이것은 기능적으로 작동합니다. 그래프 레이블이 올바르게 배치되었습니다. 하지만 은입니다. 페이지의 로딩 시간을 쉽게 3 배로합니다. 이는 받아 들일 수 없습니다.

팝업 divs에 대한 초기 CSS에 display: none을 다시 추가하면 모든 성능 문제가 해결됩니다. 따라서 jQuery 코드 자체가 병목 현상이 될 수는 없습니다. 그러나 물론 레이블 서식이 다시 엉망이됩니다.

아무도이 문제를 극복하는 방법을 알고 있습니까?

Answer 1

나는 초기 해당 마우스를 마우스로 가리키기 이벤트가 발생할 때까지 각 그래프의 생성을 지연함으로써이 문제를 해결했습니다. 또한 처음에는 포함 div의 z- 인덱스를 -1로 설정 한 다음 그래프 생성시이를 1로 변경해야했습니다. 그렇지 않으면 보이지 않는 div가 다른 페이지 내용을 덮어서 예를 들어 그래프가 생성되기 전에 div의 "behind"링크를 클릭 할 수 없게됩니다.

Answer 2

발견했듯이 Flot은 DOM에 첨부 된 div에 그림을 그려야합니다. 예제가 없으면 말할 수는 없지만, 성능 저하는 div가 콘텐츠가 없어도 화면에 표시되어 여전히 다시 그리기를 실행한다는 사실에 기인한다고 생각합니다. 당신이 그들을 바꿀 때마다.

배경과 테두리를 숨기는 대신 div를 화면 밖으로 멀리 떨어 뜨리면됩니다. top:-9999px; left:-9999px. 그런 식으로 아직 레이아웃에 있기 때문에 Flot은 측정을 할 수 있지만 브라우저는 화면 밖에서 뭔가를 다시 그리지 않을 정도로 똑똑합니다.