Highcharts包装函数'

highcharts wrapper function for 'drag'

本文关键字：函数 包装 Highcharts      更新时间：2023-09-26

我试图为'拖动'编写包装器函数，以便当我单击鼠标并拖动鼠标时，我可以获得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上获得选定区域的边界吗?

非常感谢!

你可以这样做:

JSFiddle联系

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>

相关文章：