nvd3 resize lineplusbarchart

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

好的，所以我終於明白了這一點。當您在AngularJS中使用像nvd3-line-plus-bar-chart這樣的指令時，您需要注意高度的變化，因爲angular-nvd3指令確實是而不是會自動執行此操作，至少對於高度參數。

這在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; 
    }) 
    });  
} 

希望這有助於其他人誰正在努力！

Answer 2

您將不得不根據窗口大小調整here is an example on SO to get the window height來動態計算高度，並在調整大小時將高度值傳遞給圖表。

這裏有你需要的變化：

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

希望它能幫助。