Question

我正在尝试使用 angular-nvd3-directives 创建折线图。为了使它看起来很好，我需要将height属性设置为“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，但我希望它按照我的意图运作。

Answer 1

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

然后在容器上使用普通的CSS来实现所需的宽高比。 Maintain the aspect ratio of a div with CSS

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

1 个答案: