2015-01-12 3 views
3

각 지시문을 사용하여 HTML에 플롯 차트를 성공적으로 표시했습니다. 나는 창 크기 조정을 감시하고 FLOT 차트의 크기를 조정하고자하는각도 조정 플롯 차트

<flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{disabled:graphLoading}"></flot> 

그렇게 자동으로하지 않는 한 : 같은 는 것 같습니다.

그러나 데이터 소스를 다시 설정하면 작동하지 않으며 다음에 시도 할 내용이 다소 손실됩니다.

window.onresize = function(event) { 
    console.log('refresh size of flot chart'); 
    refreshDataset(); 
} 

방금 ​​방향을 찾고 있거나 해결책을 찾기 위해 디버그 또는 테스트를 시도 할 수있는 아이디어를 찾고 있습니다. jquery 솔루션은 여기 http://jsfiddle.net/9x7aJ/2029/ 인 것처럼 보이지만 나는 angularJS 솔루션을 찾으려고합니다.

답변

1

제 질문에 대한 답변으로, 가장 좋은 해결책은 flot.resize.js 플러그인을 사용하여 플롯 차트를 작성하는 것입니다. 나는 처음에 그것을 index.html 파일에 포함 시켰지 만, angularJS의 특성으로 인해 실제 컨트롤러보기 html 파일에 액세스 할 필요가있었습니다 (아직 배우고 있습니다). 그래서 난 내 프로젝트에 jquery.flot.resize.js를 떨어과 같이 그것을 참조 :

<script src="scripts/jquery.flot.min.js" cache="false"></script> 
<script src="scripts/jquery.flot.time.js" cache="false"></script> 
<script src="scripts/jquery.flot.resize.js" cache="false"></script> 

낮은 기술 솔루션은 크기 조절에 화면 재생 될 것했지만, 크기 조정 플러그인은 훨씬 더 우아 .

낮은 기술 솔루션 :

window.onresize = function(event) { 
    window.location.reload(); 
} 
+0

당신이 어떻게 작동하는지에 대한 추가 정보를 제공합니다 개 pls 수 있을까? 당신은 여전히 ​​지시어에서 높이 속성을 300px로 설정합니까? – nuander