我正在尝试使用 创建折线图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/