如何在启用缩放功能的情况下使用Highcharts触发模态视图？

Question

我有一个显示启用缩放类型'x'的Highcharts图表的网页。图表的div被包装在容器中的div，如：

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

还有连接到图表-容器通过切换modalChart CSS交换机的图表模态的视图的“鼠标松开”事件的事件处理程序类定义为：

.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() 
}); 

时遇到的问题是，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); 
     } 
    } 
    } 
}