Highcharts 加载图表时是否可以禁用highchart图表的缩放

加载图表时，是否可以禁用highchart图表的缩放功能。

---

我有多个图形，因此希望禁用缩放选项，直到加载所有图形。

只需在图表配置中将zoomType设置为null即可

zoomType: null

---

请参阅文档

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

请参阅下面的代码：

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

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

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

老实说，我不确定旧图表会发生什么。希望它只是被覆盖了，不会造成很大的内存问题

---

我创建了一个fiddle，您可以发现它可以动态更改图表的zoomType，但它不是官方API的一部分。这样，在加载所有图表后，您将能够将其zoomType从none更改为some

$(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('');        
    });
});

---

jsIDLE:

基本上，当显示图表的加载标签时，您可以停止“选择”事件（缩放）

使用默认的Highcharts函数

.showLoading（）

显示加载标签，使用默认变量

loadingShown

验证是否显示加载标签

因此，通过使用函数

.showLoading（）

，比如在执行AJAX请求之前，使用变量

loadingShown

验证是否显示了加载标签，我们可以停止选择事件

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

在下一个示例中，您将了解如何使用

.showLoading（）

函数取消缩放，以及如何使用jQuery插件：pLoading（用于显示加载掩码）

---

jsfiddle中的示例：

重点是在图表呈现后很难更新图表设置。（通常需要重新创建整个图表）在图表渲染之前，如果需要显示特定范围，也可以使用setExtreme。哦，真的，那么很难实现此功能。根据要求，禁用缩放，直到所有图形都显示出来loaded@NishithKantChaturvedi根据问题，加载数据后需要启用缩放功能。在这种情况下，请使用setExterem，以便在加载所需范围内的所有数据时以及加载后，用户可以根据需要进行缩放。希望我能理解您的问题。换句话说，在加载所有图表后，您需要启用动态缩放？谢谢，它可以正常工作，但面临的问题是，我使用的是xtype:highchart而不是$（“#容器”）。highcharts({，所以在图表渲染后无法获取对象。请help@cheeku还有其他获取图表的方法，比如使用非jQuery cunstructor-。另一种方法是使用全局数组

Highcharts。charts

保存当前页面/帧中的所有图表。我在一个循环中呈现了多个图表，并且必须使用Xtype:highchart来准备图表。Moto将在加载所有图形后启用缩放Highcharts.Chart.prototype.callbacks.push（函数（wchart）{正在为最后一个图形工作only@cheeku你能发布一个活生生的例子吗，比如JSFIDLE？你是如何创建图表的？你的数据是如何加载的？谢谢！它在GWT的“moxiegroup”包装器中运行得非常好

$(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('');        
    });
});

$(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'});
                });
            }();
        });