Flot 그래프의 크기를 변경하여 크기를 변경하는 방법

Question

Flot 그래프 라이브러리 jQuery 플러그인을 사용하고 있는데 그래프가 포함되어있을 때 크기를 조절할 수있는 좋은 방법을 찾지 못했습니다. 예 : 만기 시간 (예 : 만기일) <div> 창 크기 조정). onresize 이벤트를 처리 할 때 포함하는 너비와 높이가 올바른 크기로 업데이트되었는지 확인한 다음 setupGrid를 호출하고 플롯 개체에 아무런 영향을 미치지 않고 그려 보았습니다. 나는 그저 포함하고있는 것을 제거하고 읽는 접근법을 통해 성공을 거두었 다. 그 안에 그래프를 다시 채운다. 그러나이 무한 크기 조정 이벤트 루프에 붙어 점점 경향이있는 것 같아요 (그래픽에 대한 도구 설명과 같은) 동시에 다른 <div> 요소를 문서에 추가해야합니다. 그 크기 조정 이벤트를 트리거 할 수 있습니다. ? 내가 빠진 것을 처리 할 수있는 좋은 방법이 있습니까?

Answer 1

나는 창에서 resize 이벤트에 바인딩하는 것을 발견했으며, plot을 호출하는 것은 정말 잘 작동합니다. 예를 들어 내 데이터와 옵션이 페이지의 변수에 저장되어 있습니다. 그럼 설정이 $에 (문서) .ready는() :

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

Answer 2

나는 것 (나는 또한 그 아무것도 할 수 있다면, FLOT을 사용할 수 있도록하기 위해 IE에 대한 ExplorerCanvas을 사용하고 있습니다. 정말 아직 다른 브라우저에서 시도하지 않은) 왜 솔루션이 작동하는지 완전히 모르겠지만 해결책을 찾았습니다. 나는 여전히 문서에서 포함 된 <div>을 제거하고 읽는 방법을 사용하고 있습니다. 그리고 그 안에 그래프를 다시 채 웁니다. 그러나 나는 redrawFunc이 문서에 무엇을했는지에 따라 무한 루프가 될 것 같았다 무엇으로 얻는 경향 것 같았다

window.onresize = redrawFunc; //redrawFunc removes and readds the containing div and replots 

을하고 있었다 경우 이전에.

대신 내가 바인딩 jQuery의 크기 조절을 사용하여 시도

$(window).resize = redrawFunc; 

지금까지, 아무리 내가 아직 루프에 갇혀 점점이 접근 방식에 문제가 있었다하지 않은 redrawFunc에서 문서로 만들어 다른 어떤 변화 . 왜 그런지 모르겠습니다.

Answer 3

난 그냥 내 자신이 해결책을 발견했다. $.plot()에 내 전화를 포장 했으므로 문제가 원래 발생했을 수 있지만 flot은 jQuery resize 이벤트를 사용했을 때조차도 크기를 조정하지 않았습니다.

$(window).resize(function() { 
    // erase the flot graph, allowing the div to shrink correctly 
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div 
    $.plot($('#graph_div'), data, opts); 
}); 

Answer 4

flot API 문서의 최신 버전은, 적어도, 같은 광고 작동 resize 이벤트를 설명 : 여기에 모든 것을 고정 내 코드 변경입니다.

크기 조정은()

자리의 크기로 그리기 캔버스의 크기를 조정 FLOT을 지시합니다. 나중에 setupGrid() 및 draw()를 실행해야합니다. 캔버스 크기 조절은 파괴적인 작업입니다. 이것은 내부적으로 크기 조정 플러그인에 의해 으로 사용됩니다.

Answer 5

가장 쉬운 방법은 크기 조정 플러그인을 사용하는 것입니다.http://www.flotcharts.org/flot/examples/resize/

하지만 당신은 여기

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>