我使用angularjs-gridster（https://github.com/ManifestWebDesign/angular-gridster）与higharts-ng的指令（https://github.com/pablojim/highcharts-ng/blob/master/README.md）
我正在尝试在网格单元中生成这些图表。我的问题是，即使我将图形抽屉功能放在$ timeout服务中，highcharts仍占据其默认的宽度和高度（600px * 400px）。这是代码：
HTML：
<div class="graph-list" gridster="gridsterOpts">
<ul>
<li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'">
<highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"></highchart>
</li>
</ul>
</div>
JS：
// inside the graph-list div controller
$scope.gridsterOpts = {
colums: 4,
rowHeight: 240,
margins: [10,10],
outerMargin: false,
draggable: {
enabled: false // whether dragging items is supported
}
};
$scope.graphs = {}; //
$scope.somefunction(){ /* this function populates the graphs object */ };
function drawGraphs(){ /* this function populates the graph.config object by looping through all the graph objects */ }
$timeout(function(){
drawGraphs();
});
我尝试在网格单元的宽度和高度上创建手表，但是它没有显示变化。我没有在graph.config选项中明确给出highchart的宽度和高度，因为我在highcharts-ng文档中读到，默认情况下它采用父级的宽度和高度，但不会发生。谁能指导我可能是什么问题。
在我看来，在highcharts指令能够呈现自身之前，angularjs-gridster插件无法设置网格的宽度和高度。请帮忙。
我最终做到了。我需要在highcharts-ng文档中提供的func（）选项中添加chart.reflow（）方法（只是调整图表的大小，而不是重新绘制图表，这样也可以提高性能）。
graph.config = {
options: { },
series: [],
func: function (chart) {
$timeout(function(){
chart.reflow();
})
}
}
希望它可以帮助别人。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句