如何「暫停」 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評選活動

回答

相關問題