如何在highstock.js中限制导航器的大小?

时间:2016-04-29 14:37:05

标签: javascript highcharts navigation highstock

我有一个长时间序列的应用程序,我想限制导航器的最大大小。我在文档中找到了afterSetExtremes事件,我认为我可以捕获它,然后从那里限制导航器的大小。但它并没有像预期的那样真正起作用。我似乎能够限制绘制数据的x大小。但导航器根本不遵循绘制数据的大小。我错过了什么吗?我怎样才能让它正常工作?理想情况下,导航器将保持固定大小超过特定大小。这有可能实现吗?

这里是jsfiddle:

http://jsfiddle.net/jn3cww8n/2/

$(function () {
$('#container').highcharts('StockChart', {
    xAxis: {
        events: {
            afterSetExtremes: function(e) {

                var dmin = Math.abs(e.min - this.oldMin),
                    dmax = Math.abs(e.max - this.oldMax),
                    range = e.max - e.min,
                    new_min = e.min,
                    new_max = e.max,
                    yr_range = range / 1000 / 60 / 60 / 24;
                if (0.0 === dmin && 0.0 < dmax) {
                    $('#report').html('Max changed ' + yr_range);

                    if (31536000000.0 < range) {
                        $('#report').html('setting new max');
                        new_max = new_min + 31536000000.0;
                    }

                } else if (0.0 < dmin && 0.0 === dmax) {
                    $('#report').html('Min changed ' + yr_range);

                    if (31536000000.0 < range) {
                        $('#report').html('setting new min');
                        new_min = new_max - 31536000000.0;
                    }

                } else {
                    $('#report').html('Nothing changed');
                }

                this.setExtremes(new_min, new_max);

            }
        }
    },
    rangeSelector: {
        selected: 1
    },
    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});
});

1 个答案:

答案 0 :(得分:1)

我改变了这一点。我没有使用导航器的最大尺寸,而是限制用户完全改变尺寸。

我从this帖子中得到了这个想法。

只需要进行两项更改:

  1. 删除drawHandle函数Highcharts.Scroller.prototype.drawHandle = function () {};
  2. 列出几行:

    22472,22476c22472,22476
    
    <                     //if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) {
    
    <                         //scroller.grabbedLeft = true;
    
    <                         //scroller.otherHandlePos = zoomedMax;
    
    <                         //scroller.fixedExtreme = baseXAxis.max;
    
    <                         //chart.fixedRange = null;
    
    ---
    
    >                     if (isOnNavigator && math.abs(chartX - zoomedMin - navigatorLeft) < handleSensitivity) {
    
    >                         scroller.grabbedLeft = true;
    
    >                         scroller.otherHandlePos = zoomedMax;
    
    >                         scroller.fixedExtreme = baseXAxis.max;
    
    >                         chart.fixedRange = null;
    
    22479,22483c22479,22483
    
    <                     //} else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) {
    
    <                         //scroller.grabbedRight = true;
    
    <                         //scroller.otherHandlePos = zoomedMin;
    
    <                         //scroller.fixedExtreme = baseXAxis.min;
    
    <                         //chart.fixedRange = null;
    
    ---
    
    >                     } else if (isOnNavigator && math.abs(chartX - zoomedMax - navigatorLeft) < handleSensitivity) {
    
    >                         scroller.grabbedRight = true;
    
    >                         scroller.otherHandlePos = zoomedMin;
    
    >                         scroller.fixedExtreme = baseXAxis.min;
    
    >                         chart.fixedRange = null;
    
    22486,22487c22486
    
    <                     //} else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    
    <                     if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    
    ---
    
    >                     } else if (chartX > navigatorLeft + zoomedMin - scrollbarPad && chartX < navigatorLeft + zoomedMax + scrollbarPad) {
    
  3. 一切都很干净。