HighCharts: Come utilizzare il reflow per consentire il ridimensionamento automatico dopo aver modificato la dimensione

Question

Nella nostra app Angolare stiamo usando highcarts-ng per l'implementazione HighCharts.

Ecco la Carta ingrandire e ridurre la funzione, che funziona:

function expandChartPanel() { 
    vm.chartMaxed = !vm.chartMaxed; 

    viewHeader = ScopeFactory.getScope('viewHeader'); 
    highChart = ScopeFactory.getScope('highChart'); 

    var chart = highChart.chartObject; 
    var highChartContainer  = document.getElementById("highchart-container"); 
    var highChartContainerWidth = document.getElementById('highchart-container').clientWidth; 
    var highChartContainerHeight = document.getElementById('highchart-container').clientHeight; 

    var windowWidth = window.innerWidth; 
    var windowHeight = window.innerHeight; 

    if (vm.chartMaxed) { 

     vs.savedWidth = highChartContainerWidth; 
     vs.savedHeight = highChartContainerHeight; 

     console.log('savedWidth = ', vs.savedWidth); 
     console.log('savedHeight = ', vs.savedHeight); 

     root.chartExpanded   = true; 
     viewHeader.vh.chartExpanded = true; 
     highChart.highChartMax  = true; 

     highChartContainerHeight = document.getElementById('highchart-container').clientHeight; 
     windowWidth = window.innerWidth; 
     windowHeight = window.innerHeight; 

     highChart.chartConfig.size.width = windowWidth; 
     highChart.chartConfig.size.height = windowHeight - 220; 

     chart.setSize(windowWidth, windowHeight - 220); 
    } 
    else { 
     root.chartExpanded   = false; 
     viewHeader.vh.chartExpanded = false; 
     highChart.highChartMax  = false; 

     highChart.chartConfig.size.width = vs.savedWidth; 
     highChart.chartConfig.size.height = vs.savedHeight; 

     chart.setSize(vs.savedWidth, vs.savedHeight); 
    } 

    highChart.restoreChartSize(); 
} 

Ecco la funzione di riflusso:

function restoreChartSize() { 
    console.log('restoreChartSize'); 
    if (!vs.chartObject.reflowNow) { 
     vs.chartObject.reflowNow = vs.chartObject.reflowNow = function() { 
      this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); 
      this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); 
      this.setSize(this.containerWidth, this.containerHeight, true); 
      this.hasUserSize = null; 
     } 
    } 

    vs.chartObject.reflowNow(); 
} 

Questa funzione di riflusso sopra, funziona perfettamente in questo jsFiddle, ma non in la nostra app.

The full Gist file of our HighChartsDirective file.

Dopo aver fatto clic su Ingrandisci, il grafico si espande fino alla dimensione totale della finestra del browser, ma dopo aver trascinato per ridimensionare la finestra del browser, chiamo la funzione restoreChartSize, che attiva il reflow.

Tuttavia la dimensione del grafico non va per l'auto-size: 100% al 100%, si risale alla dimensione precedente del grafico :(

Prima Massimizza:

Dopo la Massimizza funzione:

Ora, dopo il ridimensionamento della finestra del browser:

window.onresize = function(event) { 
    console.log('window resizing...'); 
    highChart = ScopeFactory.getScope('highChart'); 
    highChart.restoreChartSize(); 
    console.log('highChart.chartConfig = ', highChart.chartConfig); 
}; 

^torna alle dimensioni statiche più piccole, non auto-size: 100%

Answer 1

Si può fare questo con l'aggiunta di un nuovo metodo per grafico che attivare manualmente il riflusso in questo modo:

chart.reflowNow = function(){ 
    this.containerHeight = this.options.chart.height || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'height'); 
    this.containerWidth = this.options.chart.width || window.window.HighchartsAdapter.adapterRun(this.renderTo, 'width'); 
    this.setSize(this.containerWidth, this.containerHeight, false); 
    this.hasUserSize = null; 
} 

Poi ogni volta che si vuole uscire dal ridimensionamento manuale tramite setSize() basta chiamare chart.reflow()

Ecco un esempio di lavoro: jsFiddle

Riferimento tratto da: github-issue

aggiornamento per gli utenti NG-Highcharts

Per fare questo quando si utilizza libreria NG-Highcharts, si può semplicemente estrarre il oggetto grafico nel controllore che ha highcharts-ng dipendenza e aggiungere la funzione reflowNow, così:

var chart = this.chartConfig.getHighcharts(); 
chart.reflowreflowNow = function(){ ... } 

Questo è anche il modo consigliato di estrarre il grafico per eseguire lavori personalizzati dall'autore di ng-highchart come indicato in here e questo fiddle.

Answer 2

Alla fine ho trovato una soluzione alternativa per essere l'unica cosa che potevo ottenere lavorando, ed in realtà era piuttosto semplice e semplice da fare.Nel caso in cui qualcun altro stia cercando una soluzione per questo, ecco i link alle risorse che sono state utili e ho risolto il problema per me.

Si può semplicemente aggiungere questo al proprio oggetto di configurazione grafico, allo stesso livello di config.series o config.options. Il commento Informazioni riferimenti ma la soluzione reale che ha funzionato per me usi $ timeout con 0 secondi, qui

* Per utilizzare highcharts-ng ovviamente

http://plnkr.co/edit/14x7gfQAlHw12XZVhWm0?p=preview

$scope.chartConfigObject = { 

    // function to trigger reflow in bootstrap containers 
    // see: http://jsfiddle.net/pgbc988d/ and https://github.com/pablojim/highcharts-ng/issues/211 
    func: function(chart) { 
     $timeout(function() { 
      chart.reflow(); 
      //The below is an event that will trigger all instances of charts to reflow 
      //$scope.$broadcast('highchartsng.reflow'); 
     }, 0); 
    } 
};