javascript - 'drag' 的 highcharts 包装函数

Question

我正在尝试为“拖动”编写一个包装函数，以便当我单击鼠标并拖动鼠标时，我可以获得 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>