javascript - Angular nvd3折线图自动调整大小

Question

我正在使用角度 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 大小。它会调整大小，但仅当我移动/打开/关闭“控制台视图”（FF 上的ctrl+ shift+ ）时。i

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

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

Answer 1

您可以尝试触发另一个可以重新绘制图形的调整大小事件。 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 附加事件执行文档。