web-dev-qa-db-fra.com

Angular Redimensionnement automatique du graphique en courbes nvd3

J'utilise des directives angulaires nvd3.

selon l'exemple: https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives/blob/master/examples/lineChart.with.automatic.resize.html

<!--
width and height are removed from the directive for automatic resizing.
-->

Eh bien, si je change la taille de la Div du graphique. redimensionner mais seulement quand je bouge/ouvre/ferme la 'vue console' (ctrl + shift + i sur FF).

Je vérifie angular-nvd3-directive, il n’existe pas d’appel d’événement pour le redimensionnement, donc je suppose que c’est un comportement d3/nvd3?

Ma question jusqu'à présent: comment simuler ce type d'événement pour que le graphique se redimensionne?

javascriptangularjsnvd3.jsangularjs-nvd3-directives
17
ssbb

Vous pouvez essayer de déclencher un autre événement de redimensionnement qui pourrait repeindre le graphique. window.dispatchEvent(new Event('resize'));

Une approche similaire a fonctionné pour moi avec Chart.js. Il est étrange que la console soit visible lorsque la page change. Vous ne comprenez toujours pas comment cela fonctionne, mais cela se produit régulièrement avec les dispositions dynamiques.

8
Dylan Valade

Je ne suis pas sûr que cela vous aidera ou non, mais je suppose que vous pouvez mettre à jour le graphique pendant que votre div redimensionne tout fonctionne dans mon cas: -

Par exemple:-

$('#my_div').bind('resize', function(){

            for (var i = 0; i < nv.graphs.length; i++) {
                nv.graphs[i].update();
            }

});
1
squiroid

Vous pouvez ajouter un gestionnaire d'événements jquery resize. Si vous n'utilisez pas jquery, vous pouvez attacher un gestionnaire d'événements en utilisant uniquement angulaire.

Utilisation de jQuery 

$(document).on('resize', function() {

  for (var i = 0; i < nv.graphs.length; i++) {
    nv.graphs[i].update();
  }

});

Utilisation de Angular uniquement

Ici est un exemple montre comment attacher un événement à un document en utilisant angular.

0
Laxmikant Dange