Question

我试图设置图表的最小缩放（最大范围）。基本上我试图做与minRange属性相反的事情。我在这个问题上挣扎了一段时间。我有一个＆＃34; solution＆＃34;但我不喜欢它，这个解决方案允许用户选择一个大于＆＃34;最大范围＆＃34;的范围，并且马上纠正它。

可能的解决方案

<?php
class YourClass {
    public static $config       = NULL;
    public static $app_path     = NULL;
    public static $_INITIALIZED = FALSE;

    public static init() {
        if(!self::$_INITIALIZED) {
            self::$config = array(
                                'base_url' => '',
                                'environment' => '',
                                'database' => array(
                                    'dbdriver' => '',
                                    'dbhost'   => '',
                                    'dbname'   => '',
                                    'dbuser'   => '',
                                    'dbpass'   => ''
                                ));
            self::$app_path = self::config['base_url'];
            self::$_INITIALIZED = TRUE;
        }
    }
    // ....
    // Your Stuf ...
    // ....
}
YourClass::init();

我想阻止用户选择大于允许范围的范围，换句话说，当导航器太大时阻止导航器

我也遵循此issue，我尝试了所有提议的解决方案，但我遇到了错误（＆＃34;未捕获的ReferenceError：未定义Highcharts＆＃34;）

Answer 1

谢谢塞巴斯蒂安！

我设法找到一个解决方案（fiddle）包装＆＃34;渲染＆＃34;功能。这样做我设法真正设置了一个缩放＆＃34; min zoom＆＃34;在导航栏上。

    $(function() {

    var lastX0;
    var lastX1;
    var maxRange = 100; //100 pixels

    (function (H) {       
        H.wrap(H.Scroller.prototype, 'render', function (proceed) {    
            console.log(arguments)
            if(arguments[4] - arguments[3] > maxRange + 2) {
                if (arguments[3] < lastX0) {
                    arguments[3] = lastX0;
                } else {
                    arguments[4] = lastX1;
                }
            }
            proceed.apply(this, [].slice.call(arguments, 1));

            lastX0 = arguments[3];
            lastX1 = arguments[4];
        });
    }(Highcharts));  

    $('#container').highcharts('StockChart', {
        scrollbar: {
            liveRedraw: true
        },
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });


    var highchart = $('#container').highcharts();
    var extremes = highchart.xAxis[0].getExtremes();
    var rangeTotal = extremes.max - extremes.min;

    var f = maxRange / $('#container').width();
    highchart.xAxis[0].setExtremes(extremes.max - (f * rangeTotal), extremes.max);
});

在示例代码中，我使用了固定数量的像素，但在我的实际应用中，我将它变为动态。我这样做，因为我不能在我工作的软件中使用数据分组属性，并且因为图表中条形的最小尺寸是1个像素（显然），高图隐藏了一些条形图（或者点）。

我设置了最小变焦，因此显示范围内的所有条都可见，因为用户无法在x轴中显示更高的范围＆＃34;隐藏＆＃34;酒吧＆＃34;问题＆＃34; （是一个很棒的功能，但我无法使用它）不会发生

设置导航器最小缩放

1 个答案: