Question

我们可以在图表加载时禁用高亮图上的缩放。我有多个图表，因此想要禁用缩放选项，直到所有图形都被加载。

Answer 1

可以动态更改图表的zoomType，但它不是官方API的一部分。这样，在加载所有图表后，您将能够将其zoomType从none更改为某些。

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: ''
        },
        xAxis: {
            minRange: 1
        },
        series: [{
            data: [1,2,3,4,5,6,7]
        }]
    });

    function enableZoom(zoomType) {
        var chart = $('#container').highcharts(),
            zoomX = /x/.test(zoomType),
            zoomY = /y/.test(zoomType);

            chart.options.zoomType = zoomType;

            chart.pointer.zoomX = zoomX;
            chart.pointer.zoomY = zoomY;

            chart.pointer.zoomHor = zoomX;
            chart.pointer.zoomVert = zoomY;
    }

    $('#zoomX').click(function () {
        enableZoom('x');
    });

    $('#zoomY').click(function () {
        enableZoom('y');        
    });

    $('#zoomXY').click(function () {
        enableZoom('xy');        
    });

    $('#noZoom').click(function () {
        enableZoom('');        
    });
});

JSFiddle：http://jsfiddle.net/pearp126/

Answer 2

您可以通过在图表配置中简单地将zoomType设置为null来实现此目的

zoomType: null

请参阅文档here for more details

Answer 3

基本上你唯一需要做的就是删除图表并用你喜欢的设置替换它。

请参阅以下代码：

var chart = $('#container').highcharts();

function renderChart(){
    chart = new Highcharts.Chart(chart.options);
    chart.render();
}

想要启用缩放（或任何其他设置）：

$('#container').highcharts().options.chart.zoomType = 'xy';
renderChart();

说实话，我不确定旧图表会发生什么。希望它只是被覆盖，并没有带来很大的内存问题。

我创建了一个你可以找到的小提琴here

Answer 4

基本上你可以停止选择＆＃34;事件（缩放），当显示图表的加载标签时。

使用默认的Highcharts函数.showLoading()显示加载标签和默认变量loadingShown，验证是否显示加载标签。

因此，通过使用函数.showLoading()，在执行AJAX请求之前说，并且如果显示加载标签，则使用变量loadingShown进行验证，我们可以停止选择事件。

另一种方法是使用第三方加载掩码，并将其添加到图表的容器中。

在下一个示例中，您将找到如何使用.showLoading()函数取消缩放以及如何使用jQuery插件：pLoading https://github.com/joseshiru/p-loading（用于显示加载掩码）

$(function () {
          var setEvents;
          var chart;
            $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {        
                chart = new Highcharts.Chart({
                    chart: {
                      renderTo: 'container',
                        zoomType: 'x',
                        events: {
                         selection: function () {
                           //Quit the selection event, while the loading spinner is displayed.
                           if (chart.loadingShown) {
                             return false;
                            }
                          }
                        }
                    },
                    title: {
                        text: 'USD to EUR exchange rate over time'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        title: {
                            text: 'Exchange rate'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [{
                        type: 'area',
                        name: 'USD to EUR',
                        data: data
                    }]
                });
         });
          setEvents = function () {
            var $showLoadingBtn = $('.show-loading');
                var $hideLoadingBtn = $('.hide-loading');
                var $showExternalMask = $('.show-toggle-mask');
                var $hideExternalMask = $('.hide-toggle-mask');

                $showLoadingBtn.on('click.showLoading', function () {
                 chart.showLoading();
                });

                $hideLoadingBtn.on('click.hideLoading', function () {
                 chart.hideLoading();
                });

                $showExternalMask.on('click.toggleMask', function () {
                 $('#container').ploading({action: 'show'});
                });

                $hideExternalMask.on('click.toggleMask', function () {
                 $('#container').ploading({action: 'hide'});
                });
            }();
        });

jsfiddle中的示例：http://jsfiddle.net/8p2fzbxw/3/

我们可以在图表加载时禁用高亮图上的缩放

4 个答案: