highcharts wrapper function for 'drag'

Question

Я пытаюсь написать функцию обертки для «перетаскивания», чтобы при щелчке мышью и перетаскивании мышью я могу получить значение min/max выбранной области на xAxis. Когда я пытаюсь сделать следующее, я вижу, что e является MouseEvent, однако я не могу видеть e.min и e.max (они не определены).

Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function(p, e) { 
     console.log('drag started'); 
     console.log(e); 
     console.log(e.min, e.max); 
     p.call(this, e); 
    }); 

Кто-нибудь знает, что есть способ получить границу выбранной области на xAxis?

Большое спасибо!

Answer 1

Вы можете сделать это следующим образом:

JSFiddle link

var axisMin = -1, axisMax = -1; 
 

 
$(function() { 
 
    Highcharts.wrap(Highcharts.Pointer.prototype, "dragStart", function(p, e) { 
 
     console.log('drag started'); 
 
     p.apply(this, Array.prototype.slice.call(arguments, 1)); 
 
     // the dragStart function sets this.mouseDownX for you 
 
     // documentation for Axis#toValue() function is here: 
 
     // http://api.highcharts.com/highcharts#Axis.toValue 
 
     axisMin = this.chart.xAxis[0].toValue(this.mouseDownX, 0); 
 
    }); 
 

 
    Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function(p, e) { 
 
     // e.chartX represents the pixel position of the mouse pointer in the chart 
 
     axisMax = this.chart.xAxis[0].toValue(e.chartX, 0); 
 
     console.log('' + new Date(axisMin) + ' to ' + new Date(axisMax)); 
 
     p.apply(this, Array.prototype.slice.call(arguments, 1)); 
 
    }); 
 

 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) { 
 

 
     $('#container').highcharts({ 
 
      chart: { 
 
       zoomType: 'x' 
 
      }, 
 
      xAxis: { 
 
       type: 'datetime' 
 
      }, 
 
      series: [{ 
 
       data: data 
 
      }] 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.src.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>