如何“暂停” Highcharts评选活动

让我试着解释“暂停”一highcharts评选活动:(如何“暂停” Highcharts评选活动

看到这个screenshoot的含义：

当我选择一个范围如果我将“zoomType”设置为“x”，默认情况下会出现缩放动画

在这幅图中，当我们选择图表时，模式div将显示在图表上，这很容易通过使用“chart.events.selection事件”，我们只需要创建一个div元素，并将其设置为基于鼠标事件的绝对位置（像clientX & clientY）

这里来我的问题：

如何保持图表上的蓝色高亮区域？

我已经试过类似

e.preventDefault() // this just prevent zoom 

return false // just like the above one 

async function // make selection event handle async

不工作，可能有人帮助我？我想实现图片中显示的结果。

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

来源

2017-07-25 miaojiuchen

添加活生生的例子[小提琴]（https://jsfiddle.net/），您做了_a模式格会在图表上显示，_。它将帮助用于满足所需的行为。 –

@ Deep3015你好，我添加一个jsfiddle https://jsfiddle.net/jd4onsr7/1/ – miaojiuchen

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

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

API参考：
http://api.highcharts.com/highcharts/Axis.addPlotBand

例子：
http://jsfiddle.net/bjyzv6sv/

来源

2017-07-25 12:39:35

感谢您的回答，但它似乎不是我想要的，我添加上面的jsfiddle，我想“暂停”选择进度，并继续它或取消它的模态，通过反应呈现的东西https://jsfiddle.net/jd4onsr7/1/ – miaojiuchen

我认为，选择事件的异步函数句柄会影响，我尝试事件：{ （e） } – miaojiuchen

我更正了这个例子： –

以观念自d_paul的帖子，并从SO post.On评选活动，我加入plotBand和暂停按钮。默认重置按钮删除plotBand和按钮。希望这个逻辑接近你的要求，并且在反应模式中也使用相同的逻辑。

代码片段

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]); 
      } 
     } 
     },

Fiddle Demonstration

来源

2017-07-26 07:18:35

感谢您的回答！请在d_paul的帖子中查看以上评论，我解释我想要的内容 – miaojiuchen

如何“暂停” Highcharts评选活动

回答

相关问题