highcharts包装功能'拖'

我想写一个'拖'的包装功能，以便当我点击鼠标并拖动鼠标时，我可以得到xAxis上选定区域的最小/最大值。当我尝试以下时，我可以看到e是一个MouseEvent，但是，我无法看到e.min和e.max（它们是未定义的）。highcharts包装功能'拖'

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上的选定区域的边界？

非常感谢！

来源

2015-10-05 Guifan Li

没有它解决您的问题http://stackoverflow.com/questions/32528010/highchart-select -an-area-to-show-some-info-by-clicking-and-drag-mouse-but-not-re –

@NishithChaturvedi不是，你所描述的那个是关于在图表上拖动数据点的，但是，我的问题是要获得变焦在释放鼠标之前在图表上选择的区域。它更类似于这个http://jsfiddle.net/highcharts/K7pN9/。当你点击鼠标并拖动时，你会看到一个可以放大的区域，但是我想在释放之前获得所需的数据。 –

你可以这样说：

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>

来源

2015-10-06 07:01:00

非常感谢，这正是我正在寻找的。为此非常感谢。 –

嗨Vicky，只是想知道有一种方法来获取工具提示的日期值在'拖'包装函数？我问这个问题的原因是，有时axisMax需要四舍五入以与工具提示上的日期显示一致。有时舍入结果是不同的。例如，如果我将鼠标拖到星期五和星期一之间的某个地方，axisMax将在某个时间星期六。 –

是的，我也注意到了，我不确定是什么原因导致了错误。但是你可以在这里查看'Highcharts.Pointer'源代码，看看它是否有帮助：https：//github.com/highslide-software/highcharts.com/blob/master/js/parts/Pointer.js#L342 –

highcharts包装功能'拖'

回答

相关问题