'drag' 的 highcharts 包装函数

Question

我正在尝试为 'drag' 编写一个包装函数，以便当我单击鼠标并拖动鼠标时，我可以获得 xAxis 上选定区域的 min/max 值。当我尝试以下操作时，我可以看到 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>

'drag' 的 highcharts 包装函数

highcharts wrapper function for 'drag'

javascript

highcharts

highstock