Nvd3调整线+条形图大小

nvd3 resize lineplusbarchart

本文关键字：条形图 调整 Nvd3      更新时间：2023-09-26

我正在使用nvd3框架中的lineplusbar图，我看到当窗口仅在水平轴上调整大小时，图表被重新绘制。垂直方向上，高度保持静态，即使拉伸或压缩，如图所示。这让我相信改变高度的唯一方法是每次初始化它，像这样:

<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布局拆分器，它允许我扩展或压缩我认为合适的图表。然而，在垂直压缩有一个滚动条插入，这不是我正在寻找的行为。文档中没有调整大小的事件，所以我不能将这个新的高度参数传递给nvd3，让它调整大小并重新绘制自己的新尺寸。我还在nvd3文档中看到chart.update方法，但我不确定它在这种情况下如何工作。

如何解决这个问题?如果我需要更好的解释，请告诉我。

您必须根据窗口调整大小动态计算高度，这里有一个关于SO的示例，以获取窗口高度并在调整大小期间将高度值传递给图表。

下面是你可能需要做的修改:

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

希望能有所帮助。

好了，我终于弄明白了。当你在AngularJS中使用像nvd3-line-plus-bar-chart这样的指令时，你需要注意高度的变化，因为angular-nvd3指令不会自动地这样做，至少对于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;
    })
  });    
}

希望这有助于其他人谁是挣扎!

相关文章：