확대/축소가 가능할 때 하이 차트로 모달보기를 트리거하는 방법은 무엇입니까?

Question

확대/축소 유형 'x'가 활성화 된 Highcharts 차트를 표시하는 웹 페이지가 있습니다.

<div class='chart-container'> 
    <div id='chart_0' class='chart'></div> 
</div> 

도 modalChart의 CSS를 전환하여 모달 뷰 차트 스위치 차트 컨테이너의 "와 mouseUp"이벤트에 연결된 이벤트 핸들러가 다음 차트 DIV는 같은 컨테이너 DIV에 싸여

.modalChart { 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    background: rgba(0, 0, 0, 0.7); 
    z-index: 999999; 
} 

.chart { 
    height: 300px; 
} 

.modalChart .chart { 
    height: 90%; 
    width: 90%; 
    max-width: none; 
    margin: 1em auto; 
} 

이벤트 핸들러는 다음과 같이 정의된다 : 같은 클래스는 정의

$("body").on("mouseup", ".chart-container", function(){ 
    $(this).toggleClass "modalChart" 
    $(".chart", this).highcharts().reflow() 
}); 

의 I는 데 문제가 그 setExtreme 전에 화재은 "차트 용기"에 MouseUp 이벤트 줌이 발생하면 x 축에서 이벤트가 발생합니다. 따라서 사용자가 확대/축소 기능을 사용할 때마다 모달보기가 토글됩니다. 어떻게 이런 일이 일어나지 않게 할 수 있습니까? 사용자가 모달 뷰를 토글하지 않고 확대/축소하고 차트를 클릭하여 모달 뷰를 전환 할 수있게하려고합니다.

Answer 1

"차트 컨테이너"의 "mouseup"이벤트가 먼저 발생하고 사용자가 확대/축소 중에도 모달보기가 토글되는 문제는 물론 있습니다. 이를 방지하려면 모달 토글을 지연하고 필요한 경우 취소해야합니다. 해결 방법은 setTimeout (전역 변수와 연관된)을 사용하여 모달 전환을 지연시킨 다음 줌 기능을 사용할 때 적절한 위치에서 clearTimeout을 사용하는 것입니다.

난에 "차트 컨테이너"클래스에서 이벤트 핸들러를 변경 :

$("body").on("mouseup", ".chart-container", function(){ 
chart = this 
Application.modalTimeout = setTimeout(function(){ 
    $(chart).toggleClass "modalChart"; 
    $(".chart", chart).highcharts().reflow(); 
}, 100) 
}); 

다음 차트에서 x 축에 대한 setExtremes 이벤트와의 setTimeout 취소 :

xAxis: { 
    events: { 
    setExtremes: function(){ 
     if (Application.modalTimeout) 
     { 
     return clearTimeout(vm.Analysis.modalTimeout); 
     } 
    } 
    } 
}