Highcharts 如何"；暂停“；海图选择事件

让我试着解释一下highcharts选择事件中“暂停”的含义：(

请看以下截图：

当我选择一个图表区域范围时，如果我将“zoomType”设置为“x”，默认情况下将显示缩放动画

在这张图片中，当我们选择图表时，图表上将显示一个模式div，这很容易通过使用“chart.events.selection event”实现，我们只需要创建一个div元素，并根据鼠标事件将其设置为绝对位置（类似于clientX和clientY）

我的问题来了：

如何在图表上保留蓝色突出显示区域

---

我试过类似的东西

e.preventDefault() // this just prevent zoom

return false // just like the above one

async function // make selection event handle async 

根本不工作，有人能帮我吗？我想达到图中所示的效果

---

另外，我是中国人，我的语法可能有问题。

您可以在选定区域的位置添加绘图带

chart.xAxis[0].addPlotBand({
  from: xMin,
  to: xMax,
  color: 'rgba(209, 228, 235, 0.5)',
  id: 'plot-band-1'
});

API参考：

示例：

---

从d_paul的帖子和帖子中汲取灵感。在选择事件中，我添加了

plotBand

和暂停按钮。默认的重置按钮删除了

plotBand

和按钮。希望此逻辑接近您的要求，并且在react模式中使用相同的逻辑

代码摘录

chart: {
        zoomType: 'x',
        events: {
          selection: function(event) {

            if ($('.pausebutton') != null) {
              $('.pausebutton').remove();
            }
            var chart = this,
            normalState = new Object();
            hoverState = new Object();
            hoverState = normalState;
            hoverState.fill = 'red';
            pressedState = new Object();
            pressedState = normalState;

            var pausebutton = chart.renderer.button('Pause', 94, 10, function() {
              disableZoom = 1;
            }, null, hoverState, pressedState).attr({
              class: 'pausebutton'
            }).add();

            if (event.resetSelection) {
              this.xAxis[0].removePlotBand('plot-band-1');
              $('.pausebutton').remove();
              disableZoom=0;
              return;
            }
            if (disableZoom == 1) {
              return false;
            }
            var xAxis = event.xAxis[0],
              plotLinesAndBands = xAxis.axis.plotLinesAndBands,
              xMin = xAxis.min,
              xMax = xAxis.max;

            // event.preventDefault();

            if (plotLinesAndBands.length > 0) {
              xAxis.axis.removePlotBand('plot-band-1');
            }

            chart.xAxis[0].addPlotBand({
              from: xMin,
              to: xMax,
              color: 'rgba(209, 228, 235, 0.5)',
              id: 'plot-band-1'
            });

            const {
              min,
              max,
              axis
            } = event.xAxis[0];

            const x = event.originalEvent.clientX - 150;
            const y = event.originalEvent.clientY - 100;

            var dom = $(`<div class="modal-chart" style="height: 200px; width: 300px; left: ${x}px; top: ${y}px;"></div>`);

            $(document.body).append(dom);

            // I want to "pause" the selection progress here

            // and render a react component in the modal div above
            // so I can continue the selection progress 
            // or dispatch some action to redux to do some other jobs

            // ReactDOM.render(<Test></Test>, dom[0]);
          }
        }
      },

图表：{
zoomType:'x'，
活动：{
选择：功能（事件）{
如果（$（'.pausebutton'）！=null）{
$（'.pausebutton'）.remove（）；
}
var图表=此，
normalState=新对象（）；
hoverState=新对象（）；
hoverState=normalState；
hoverState.fill='red'；
pressedState=新对象（）；
pressedState=正常状态；
var pausebutton=chart.renderer.button（'Pause'，94，10，function（））{
禁用缩放=1；
}，空，悬停状态，按状态）。属性({
类：“暂停按钮”
}).add（）；
如果（事件重置选择）{
this.xAxis[0].removePlotBand（'plot-band-1'）；
$（'.pausebutton'）.remove（）；
禁用缩放=0；
返回；
}
如果（禁用缩放==1）{
返回false；
}
var xAxis=event.xAxis[0]，
plotLinesAndBands=xAxis.axis.plotLinesAndBands，
xMin=xAxis.min，
xMax=xAxis.max；
//event.preventDefault（）；
如果（plotLinesAndBands.length>0）{
X轴移除PlotBand（“plot-band-1”）；
}
chart.xAxis[0]。addPlotBand({
发件人：xMin，
致：xMax，
颜色：“rgba（209228235,0.5）”，
id:“绘图带-1”
});
常数{
闵，
最大值，
轴
}=event.xAxis[0]；
常量x=event.originalEvent.clientX-150；
常量y=event.originalEvent.clientY-100；
var dom=$（``）；
$（document.body）.append（dom）；
//我想在这里“暂停”选择进度
//并在上面的model div中呈现react组件
//这样我就可以继续选择了
//或者向redux发送一些操作以执行其他一些工作
//ReactDOM.render（，dom[0]）；
}
}
},

---

add live example，您在其中进行了模态div，该示例将显示在图表上。它将有助于满足所需的行为。@Deep3015您好，我添加了一个JSFIDLE谢谢您的回答，但似乎这不是我想要的，我在上面添加了一个JSFIDLE，我想“暂停”选择进程，并在模式中继续或取消它，react呈现的内容我认为选择事件的异步函数句柄将生效，我尝试事件：{selection:async function（e）{xxx}}实际上我想要的是类似异步函数的东西，当选择触发句柄函数时，highcharts在句柄函数返回之前不会缩放，因此如果我可以在句柄函数中等待，那么蓝色绘图带将自动保留，而不是通过codeHello、@d_paul绘制，我发现如果我可以通过代码缩放图表，并且有了你的解决方案，我就可以实现这个目标了，有没有api可以主动缩放图表？很抱歉回复太晚。要缩放到图表的特定部分，可以使用setextrems（）函数（）。示例：。谢谢你的回答！请看一下d_paul帖子中的评论，我解释了我到底想要什么