0
我試圖在角材料網格內獲得一個響應的nvd3圖表。 調整窗口大小後，它似乎工作正常，但在初始加載時沒有達到正確的大小。自動調整Angular的材質網格內的Angular-nvd3圖表的尺寸
我的方法是在'resize'指令中包裝nvd3指令。然後我可以觀察父元素並在窗口大小上更新圖表的高度和寬度。我遇到的問題是加載父div的高度和寬度屬性似乎是0.我試圖使用$超時應用範圍，但這似乎並沒有工作。
angular.module('MyApp', ['ngMaterial', 'ngMessages', 'nvd3'])
.controller('AppCtrl', function($scope) {
$scope.options = {
chart: {
type: 'discreteBarChart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value + (1e-10);
},
showValues: true,
valueFormat: function(d) {
return d3.format(',.4f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'X Axis'
},
yAxis: {
axisLabel: 'Y Axis',
axisLabelDistance: -10
}
}
};
$scope.data = [{
key: "Cumulative Return",
values: [{
"label": "A",
"value": -29.765957771107
}, {
"label": "B",
"value": 0
}, {
"label": "C",
"value": 32.807804682612
}, {
"label": "D",
"value": 196.45946739256
}, {
"label": "E",
"value": 0.19434030906893
}, {
"label": "F",
"value": -98.079782601442
}, {
"label": "G",
"value": -13.925743130903
}, {
"label": "H",
"value": -5.1387322875705
}]
}]
}).directive('resize', function($window, $timeout) {
var linker = function(scope, element, attrs) {
var w = angular.element($window);
w.bind('resize', function() {
scope.$apply();
})
$timeout(function(){
updateHeight();
updateWidth();
scope.$apply();
})
scope.$watch(function() {
return element.parent()[0].clientHeight;
}, updateHeight);
scope.$watch(function() {
return element.parent()[0].clientWidth;
}, updateWidth);
function updateHeight() {
scope.options.chart.height = element.parent()[0].clientHeight;
}
function updateWidth() {
scope.options.chart.width = element.parent()[0].clientWidth;
}
};
return {
template: '<div style="height100%;width:100%;"><nvd3 options="options" data="data"></nvd3></div>',
restrict: "E",
link: linker,
scope: {
data: '=',
options: '='
}
};
});.gridListdemoBasicUsage md-grid-list {
margin: 8px; }
.gridListdemoBasicUsage .gray {
background: #f5f5f5; }
.gridListdemoBasicUsage .green {
background: #b9f6ca; }
.gridListdemoBasicUsage .yellow {
background: #ffff8d; }
.gridListdemoBasicUsage .blue {
background: #84ffff; }
.gridListdemoBasicUsage .purple {
background: #b388ff; }
.gridListdemoBasicUsage .red {
background: #ff8a80; }
.gridListdemoBasicUsage md-grid-tile {
transition: all 400ms ease-out 50ms; }<div ng-controller="AppCtrl as appCtrl" ng-cloak="" class="gridListdemoBasicUsage" ng-app="MyApp">
<md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2" md-gutter="12px" md-gutter-gt-sm="8px">
<md-grid-tile class="gray" md-rowspan="3" md-colspan="2" md-colspan-sm="1">
<resize options="options" data="data"></resize>
<md-grid-tile-footer>
<h3>#1: (3r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green">
<md-grid-tile-footer>
<h3>#2: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="yellow">
<md-grid-tile-footer>
<h3>#3: (1r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue" md-rowspan="2">
<md-grid-tile-footer>
<h3>#4: (2r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="red" md-rowspan="2" md-colspan="2" md-colspan-sm="1">
<md-grid-tile-footer>
<h3>#5: (2r x 2c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="green" md-rowspan="2">
<md-grid-tile-footer>
<h3>#6: (2r x 1c)</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
</div>請看看這個codepen。
在此先感謝
更新：我發現採用了棱角分明nvd3s api.updateWithOptions（選項）我的應用程序的解決方案。仍然沒有在codepen中工作。可能是代碼筆的版本差異很快會附上最終解決方案。
我遇到了角材料1.1.0-rc.5和角nvd3同樣的問題1.0.7。我嘗試了updateWithOptions，但那並沒有爲我解決問題。你找到解決方案嗎？ – kpg
同樣的問題在這裏，是否有更新？ – JollyBrackets