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大小。 它调整大小，但只有当我移动/打开/关闭'控制台视图'时（ ctrl + shift + i在FF上）。

我检查了angular-nvd3-directive，调整大小没有事件调用，所以我想这是一个d3 / nvd3 comportement？

到目前为止我的问题：如何模拟这种事件以使图形调整大小？

Answer 1

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

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

Answer 2

我不确定它会对你有什么帮助，但我猜你可以更新图表，而你的div调整大小适用于我的情况： -

例如：-

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

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

});

Answer 3

你可以添加一个jquery resize事件处理程序，如果你没有使用jquery，那么你可以只使用angular附加事件处理程序。

使用jQuery

 $(document).on('resize', function() { for (var i = 0; i < nv.graphs.length; i++) { nv.graphs[i].update(); } }); 

仅使用Angular

这是一个示例，说明如何使用angular附加事件do文档。