javascript - novus - Angular nvd3 Line Chart cambio de tamaño automático

nvd3 pie chart

Question

Estoy usando las directivas angulares nvd3.

de acuerdo con el ejemplo: 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.
-->

Bueno, si cambio el tamaño de Div de la gráfica. cambia de tamaño, pero solo cuando muevo / abro / cierro la ''vista de consola'' ( ctrl + shift + i en FF).

Reviso la directiva angular-nvd3. No hay llamada de evento para el cambio de tamaño, ¿así que supongo que es un comportamiento d3 / nvd3?

Mi pregunta hasta ahora: ¿Cómo simular este tipo de evento para que el gráfico cambie de tamaño?

Answer 1

No estoy seguro de que te ayude o no, pero supongo que puedes actualizar el gráfico mientras que el tamaño de tu div funciona en mi caso:

Por ejemplo:-

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

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

});

Answer 2

Podría intentar disparar otro evento de cambio de tamaño que podría volver a pintar el gráfico. window.dispatchEvent(new Event(''resize''));

Un enfoque similar me funcionó con Chart.js. Es extraño que cuando la consola sea visible cambia la página, aún no entiendo bien cómo funciona, pero aparece regularmente con diseños dinámicos.

Answer 3

Puede agregar un controlador de eventos jquery resize, si no está utilizando jquery, puede adjuntar un controlador de eventos usando solo angular.

Usando jQuery

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

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

});

Usando solo Angular

Here hay un ejemplo que muestra cómo adjuntar un evento a un documento usando angular.