Question

让我试着解释＆＃34;暂停＆＃34; highcharts选择事件:(

请参阅此屏幕截图：

当我选择一个图表区域范围时，默认情况下，如果我设置＆＃34; zoomType＆＃34;则会出现缩放动画。到＆＃34; x＆＃34;

在这张图片中，当我们选择图表时，会在图表上显示一个模态div，这很容易通过使用＆＃34; chart.events.selection event＆＃34;来实现，我们只需要创建一个div元素并根据鼠标事件（如clientX＆amp; clientY）将其设置为绝对位置

我的问题出现了：

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

我尝试了类似

的内容

e.preventDefault() // this just prevent zoom

return false // just like the above one

async function // make selection event handle async

根本不工作，有人可以帮我这个吗？我想实现图片中显示的结果。

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

Answer 1

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

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/

Answer 2

从d_paul的帖子和SO帖子中获取想法。在选择事件中，我添加了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

如何＆＃34;暂停＆＃34; Highcharts选择活动

2 个答案: