当还启用缩放时，如何使用 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()
});

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

Answer 1

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

我将“图表容器”类的事件处理程序更改为：

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