Можем мы отключить масштабирование по высокому графику при загрузке графика

Question

Можем ли мы отключить масштабирование по высокому графику при загрузке графика. У меня есть несколько графиков, которые хотели бы отключить параметр масштабирования, пока не будут загружены все графики.

Answer 1

вы можете сделать это с помощью простой установки zoomType в нуль в вашей диаграмме конфигурации

zoomType: null 

Смотрите документацию here for more details

Answer 2

В принципе единственное, что вам нужно, чтобы сделать это удаление диаграммы и заменить его один с настройками, которые вам нравятся.

Смотрите код ниже:

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

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

После того, как вы хотите, чтобы включить масштабирование (или любой другой параметр):

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

Чтобы быть честным, я не уверен, что происходит со старым диаграмма. Надеюсь, это просто перезаписано и не накладывает большой проблемы с памятью.

Я создал скрипку вы можете найти here

Answer 3

Можно изменить zoomType из диаграммы динамически, но это не является частью официального API. Таким образом, после того, как все диаграммы загружены, вы сможете изменить их zoomType от никого до некоторого.

$(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 4

В принципе вы можете остановить "выделение" событие (масштабирование), когда отображается загрузка метка графика.

Использование функции 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/