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

【问题标题】：How can I make the size of stacked-area-chart in nvd3-angularjs-directives adjustable depending on the size of the div?如何根据 div 的大小调整 nvd3-angularjs-directives 中堆叠区域图的大小？
【发布时间】：2015-03-24 09:42:29
【问题描述】：

我有一个使用 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;" 中添加了这个。效果也不好

【问题讨论】：

标签： width stacked-area-chart angularjs-nvd3-directives

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

【讨论】：