width - 如何根据 div 的大小调整 nvd3-angularjs-directives 中堆叠区域图的大小？

Question

我有一个使用 nvd3-angularjs-directives 创建的图表。我希望此图的大小根据其 div 的大小进行调整。我的问题最初是 y 的值达到这个值 2000000000 并且标签在两者之间的某处被切断。我希望图表能够调整，以便整个图表甚至标签都能正确显示。

这是图表

<div ng-controller="GraphController">
    <nvd3-stacked-area-chart
    data="GraphData"
    id="Graphs"
    showXAxis="true"
    showYAxis="true"
    showLegend="true"
    interactive="true"
    tooltips="true"
    objectEquality="true"
    width="auto"

    xAxisTickFormat="xAxisTickFormatFunction()"
    yAxisTickFormat="yAxisTickFormatFunction()"
    >
        <svg></svg>
    </nvd3-stacked-area-chart>
</div>

1）我将宽度的值更改为自动。但它没有用。

2) 我在 div style="color:blue;width:auto;" 中添加了这个。它也没有工作

Answer 1

我相信你必须给它一个绝对大小。我为解决这个问题所做的是定义内联尺寸：

<nvd3-stacked-area-chart 
  style="width:{{chartSettings.width}}px; height:{{chartSettings.height}}px;"
  ...
</nvd3-stacked-area-chart>

然后在控制器中动态确定大小：

$scope.chartSettings= {
    width:      $window.innerWidth*0.8, 
    height:     $window.innerHeight*0.8 
}