nvd3调整lineplusbarchart的大小答案

【问题标题】：nvd3 resize lineplusbarchartnvd3调整lineplusbarchart的大小
【发布时间】：2014-03-13 06:30:30
【问题描述】：

我正在使用来自 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 方法，但我不确定它在这种情况下如何工作。

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

【问题讨论】：

标签： javascript angularjs nvd3.js

【解决方案1】：

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

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

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

希望对你有帮助。

【讨论】：

我在其他地方看到过这段代码，但是我想知道如果图形的代码类似于 <nvd3-line-plus-bar-chart data="data" showXAxis="true" ....></nvd3-line-plus-bar-chart>，变量 chart 会是什么
我也在这里找到了你的答案stackoverflow.com/questions/16474988/… 真的很有帮助！但在我的情况下，我仍在为如何访问 chart 对象而苦苦挣扎：/
真的很抱歉，但我不太确定它如何与 Angularjs 一起使用，我添加了标签 JavaScritpt 以获得论坛上的更多支持。尝试将您的代码放到JSFiddle 上，这样人们就可以查看您的整个代码并为您提供帮助。

【解决方案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;
    })
  });    
}

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

【讨论】：