Angular-nvd3-directives 根据图表的宽度调整图表的高度答案

【问题标题】：Angular-nvd3-directives adjust height of the chart according to the width of the chartAngular-nvd3-directives 根据图表的宽度调整图表的高度
【发布时间】：2014-08-01 08:36:12
【问题描述】：

我正在尝试使用 angular-nvd3-directives 创建折线图。为了让它看起来不错，我需要将高度属性设置为“250”，这看起来不错的大屏幕和中屏幕。但是，在小屏幕上它看起来很奇怪，因为高度是固定的，并且宽度值会比高度小得多。如果不将 height 属性设置为一个值，它将太宽。我希望 y 轴的高度与图表的宽度具有相同的值。那可能吗？或者有没有其他方法可以解决这个问题？

这是一个显示问题的plunker

http://plnkr.co/edit/sjJOYm

HTML

<div class="container" >
     <div id="topGraph" class="row well">
      <div class="col-md-6">
        <div ng-controller="report">
            <nvd3-line-chart 
                data="chartData"
                id="report3"
                showXAxis="true"
                showYAxis="true"
                tooltips="true"
                margin="{left:90,top:20,bottom:20,right:20}"
                height="250"> <!-- I want that attribute to adjust according to the width -->
            <svg></svg>
        </nvd3-line-chart>
      </div>  
    </div>
    <div class="col-md-6 ">
             <h3 style="margin-top: 2em;">Statistics</h3>
            <ul>
                <li>Averge post per day: <strong>4</strong>
                </li>
                <li>Max post per day: <strong>3</strong>
                </li>
                <li>Min post per day: <strong>2</strong>
                </li>
                <li>Number of posts: <strong>1</strong>
                </li>
            </ul>
        </div>
    </div>
  </div>

JavaScript

var app = angular.module('app', ['nvd3ChartDirectives']);

app.controller('report',
    ['$scope', report]);

function report($scope) {

     $scope.chartData = [
            {
                "key": "Key1",
                "values":
                    [
                    [1, 150000.0], [2, 1000000.0], [3, 1071000.0], [4, 1271000.0],
                    [5, 1371000.0], [6, 1471000.0], [7, 1571000.0], [8, 1671000.0],
                    [9, 1771000.0], [10, 1871000.0], [11, 1971000.0], [12, 2271000.0]
                    ]
            },
            {
                "key": "key 2",
                "values":
                    [
                    [1, 150000.0], [2, 1200000.0], [3, 1371000.0], [4, 1971000.0],
                    [5, 1371000.0], [6, 1471000.0], [7, 1571000.0], [8, 1671000.0],
                    [9, 1771000.0], [10, 1871000.0], [11, 1971000.0], [12, 2271000.0]
                    ]
            }
    ]

}

这是我第一次编写 plunker，但我希望它能按我的预期工作。

【问题讨论】：

请在问题中直接贴出相关代码。发布一个 plunker 是好的，但不是必需的。用假代码块克服限制并不是一个优雅的解决方案。
你解决了吗？
否 :( ，我保留了这个解决方案，因为它“足够好”..

标签： angularjs d3.js angularjs-directive nvd3.js

【解决方案1】：

删除图表上的所有高度和宽度属性。它会根据容器自动调整大小。

然后在容器上使用普通的 CSS 来实现你想要的纵横比。 Maintain the aspect ratio of a div with CSS

【讨论】：