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

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

我正在尝试使用 创建折线图angular-nvd3-directives .为了让它看起来不错,我需要将高度属性设置为“250”,这在大屏幕和中屏幕上看起来都不错。但是,在小屏幕上它会看起来很奇怪,因为高度是固定的,并且宽度值会比高度小得多。如果不将高度属性设置为值,它会太宽。我希望 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,但我希望它能按我的预期工作。

最佳答案

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

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

关于angularjs - Angular-nvd3-directives 根据图表的宽度调整图表的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25076083/

相关文章:

javascript - 未加载时的背景图像微调器

javascript - 如何在 Angular 单击按钮时显示不受欢迎的复选框?

javascript - D3垂直条形图为标签文本添加换行符

javascript - d3 防止拖拽特定元素

javascript - 验证时使另一个字段无效

javascript - AngularJS 指令 - "scope:{}"是什么意思?

javascript - Angular JS - 替换 ng-options 中的空值

javascript - 单击 Angular 加载模板

javascript - Angular 上的嵌套 ng-repeat 不起作用

javascript - 数据加入d3;我一定没有正确理解选择和/或数据键功能