Integrazione di Highcharts in angular-gridster

Question

Sto cercando di integrare Highharts usando la direttiva angolare highcharts-ng all'interno di Angular-grister (una direttiva angolare dashboard/widget).

Ecco il mio HTML:

<div ng-controller="myCtrl"> 
    <div gridster="gridsterOptions"> 
     <ul> 
      <li gridster-item="item" ng-repeat="item in standardItems"> 
       <highchart id="chart1" config="chartConfig" class="chart"></highchart> 
      </li> 
     </ul> 
    </div> 
</div> 

mio CSS styling:

body { 
    color: #858584; 
    background-color: #e0e0e0; 
} 
.gridster .gridster-item { 
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 
    color: #004756; 
    background: #ffffff; 
    padding: 10px; 
} 
.chart { 
    border:1px #000 solid; 
} 

E la mia app angolare:

var myApp = angular.module('myApp', ['gridster', 'highcharts-ng']); 

myApp.controller('myCtrl', function ($scope) { 
    $scope.gridsterOptions = { 
     margins: [20, 20], 
     columns: 4, 
     rowHeight: 300, 
     pushing: true, 
     floating: true, 
     swapping: true, 
     resizable: { 
      enabled: true 
     }, 
     draggable: { 
      enabled: true 
     } 
    }; 

    $scope.standardItems = [{ 
     sizeX: 2, 
     sizeY: 1 
    }, { 
     sizeX: 2, 
     sizeY: 1 
    }]; 

    $scope.chartConfig = { 
     options: { 
      chart: { 
       type: 'bar' 
      } 
     }, 
     series: [{ 
      data: [10, 15] 
     }], 
     title: { 
      text: 'Hello' 
     }, 

     loading: false 
    }; 
}); 

Essa si traduce in qualcosa di simile con i widget nella cruscotto di rotazione:

ci sono due questioni riguardanti il ​​layout reattivo:

1. L'altezza dei componenti Highchart è sempre 400 px. Si trovano all'interno del widget dashboard e dovrebbero avere la stessa altezza del widget. Attualmente sono più alti del loro widget di dashboard e il loro contenuto è straripante.
2. Durante il rendering, i componenti Highcharts sono più larghi del loro contenitore. Se ridimensiono la finestra, vengono ridipinti e la larghezza ora è corretta.

Come posso risolvere questi problemi?

Vedi il mio esempio demo su JSFiddle: http://jsfiddle.net/dennismadsen/xxy2uy9x/

Answer 1

Credo che questo sia duplicato di this one o this one domanda. O almeno la risposta è molto simile.

In breve: quando grafico viene reso, larghezza ed altezza del contenitore sono undefined o 0 (contenitore non fa parte del DOM o è nascosto da display: none), che si traduce in larghezza e l'altezza predefinita per il grafico.

soluzione alternativa è quella di dare del browser (e angolare) un respiro e in setTimeout (o $timeout) chiamata chart.reflow() per consentire il grafico di adattarsi al contenitore, vedi: http://jsfiddle.net/xxy2uy9x/5/

$scope.chartConfig = { 
    options: { 
     chart: { 
      type: 'bar', 
      events: { 
       load: function() { 
        var c = this; 

        setTimeout(function() { 
         c.reflow(); 
        }, 123) 
       } 
      } 
     } 
    }, 
    series: [{ 
     data: [10, 15] 
    }], 
    title: { 
     text: 'Hello' 
    }, 

    loading: false 
};