javascript - 当还启用缩放时，如何使用 Highcharts 触发模态视图？

Question

我有一个网页显示启用了缩放类型“x”的 Highcharts 图表。图表 div 包裹在容器 div 中，例如:

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

还有一个事件处理程序附加到图表容器上的“mouseup”事件，它通过切换 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()
});

我遇到的问题是，发生缩放时，“chart-container”上的 mouseup 事件先于 x 轴上的 setExtremes 事件触发。因此，每次用户使用缩放功能时都会切换模态视图。我该如何阻止这种情况发生？我希望用户能够在不切换模态视图的情况下进行缩放，并且能够单击图表来切换模态视图。

Answer 1

问题当然是“chart-container”上的“mouseup”事件首先触发，即使用户正在缩放，模态视图也会切换。为了防止这种情况，我们需要延迟模式切换并在必要时取消它。一种解决方案是使用 setTimeout(与全局变量相关联)延迟模式切换，然后在使用缩放功能时在适当的位置清除超时。

我将“chart-container”类的事件处理程序更改为:

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

然后在图表上 xAxis 的 setExtremes 事件中取消 setTimeout:

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