Angular nvd3 折线图自动调整大小

Question

我正在使用 angular nvd3 指令。

根据例子：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.
-->

好吧，如果我改变图表的 Div 大小。它调整大小但只有当我 move/open/close 'console view' (ctrl + shift + i 在 FF 上）。

我检查了 angular-nvd3-指令，没有调整大小的事件调用，所以我想这是一个 d3/nvd3 的行为？

我目前的问题：如何模拟这种事件来调整图形大小？

Answer 1

我不确定它是否对您有帮助，但我想您可以在 div 调整大小时更新图表，它在我的情况下有效：-

例如：-

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

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

});

Answer 2

您可以添加一个 jquery 调整大小事件处理程序，如果您不使用 jquery，那么您可以仅使用 angular 附加事件处理程序。

Using jQuery

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

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

});

Using Angular Only

Here 是一个示例，显示如何使用 angular.

附加事件文档

Answer 3

您可以尝试触发另一个可以重新绘制图形的调整大小事件。 window.dispatchEvent(new Event('resize'));

Chart.js 类似的方法对我有用。当可见的控制台更改页面时，这很奇怪 - 仍然不完全理解它是如何工作的，但它会定期显示动态布局。

Angular nvd3 折线图自动调整大小

Angular nvd3 Line Chart automatic resizing

javascript

angularjs

nvd3.js

angularjs-nvd3-directives