Question

我正在使用nvd3框架中的lineplusbarchart，我发现当窗口仅在水平轴上调整大小时，图表会重新绘制。垂直高度保持静止，即使在拉伸或压缩时也是如此，您可以看到here。这让我相信改变高度的唯一方法是每次都这样初始化它：

<nvd3-line-plus-bar-chart data="data"
      showXAxis="true" showYAxis="true"
      margin="{left:75,top:20,bottom:50,right:75}"                                                                                  
      height="300"                            
</nvd3-line-plus-bar-chart>

我的应用程序使用ui-layout splitter，这允许我按照我认为合适的方式扩展或压缩图表。但是，在垂直压缩时会有一个插入的滚动条，这不是我正在寻找的行为。文档中没有事件在调整大小时触发，因此我无法将此新高度参数传递给nvd3，以便调整大小并使用新维度重绘自身。我在nvd3文档中也看到了chart.update方法，但我不确定它在这种情况下是如何工作的。

我该如何解决这个问题？如果我需要更好地解释自己，请告诉我。

Answer 1

您必须根据窗口调整大小here is an example on SO to get the window height动态计算高度，并在调整大小期间将高度值传递给图表。

以下是您可能需要的更改：

nv.utils.windowResize(function() {
    chart.height(yourNewHeight);
    chart.update();
});

希望它有所帮助。

Answer 2

好的，所以我终于弄明白了。当你在AngularJS中使用像nvd3-line-plus-bar-chart这样的指令时，你需要注意高度的变化，因为angular-nvd3-directive 不自动执行此操作，至少对于height参数

nvd3LinePlusBarChart指令中的这一小段代码为我做了：

 scope.$watch('height',function(height) {
          if (height) {
            if (scope.chart) {
              return scope.d3Call(scope.data, scope.chart);
            } 
          }
 });

就是这样！在我自己的指令中，我只是更新事件调用的高度，如下所示：

 scope.$on('someEvent', function() {
    scope.$apply(function(){
        scope.height = height;
    })
  });    
}

希望这可以帮助其他正在挣扎的人！

nvd3调整lineplusbarchart

2 个答案: