如何在 AngularJS 中同时使用 Angular-gridster 和 Highcharts-NG 指令
how to use angular-gridster and highcharts-ng directives together in angularjs
我正在使用angularjs-gridster(https://github.com/ManifestWebDesign/angular-gridster)和higharts-ng指令(https://github.com/pablojim/highcharts-ng/blob/master/README.md)
我正在尝试在网格单元格内生成这些高图表。我的问题是,即使我将图形抽屉功能放在$timeout服务中,高图表也会占用其默认宽度和高度(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 选项中明确给出高图表宽度和高度,因为我在 highcharts-ng 文档中读到它默认采用父宽度和高度,但它没有发生。谁能指导我可能出现的问题。
在我看来,angularjs-gridster 插件无法在 highcharts 指令能够呈现自身之前设置网格宽度和高度。请帮忙。
我最终做到了。我需要在 highcharts-ng 文档中提供的 func() 选项中添加 chart.reflow() 方法(它只是调整图表大小而不是重新绘制图表,以便性能更好)。
graph.config = {
options: { },
series: [],
func: function (chart) {
$timeout(function(){
chart.reflow();
})
}
}
希望它对其他人有所帮助。
相关文章:
- Angular JS IE9 Hashbang url rewriting
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 使用angular重定向到html页面
- angular.js没有'无法在PhoneGap中处理视图标记
- Javascript(Angular)从一个对象数组到第二个数组查找值
- angular 1.5应用程序中的导航栏
- angular的下拉菜单
- Angular只从数组中获取所需的数据
- 如何将不可变的js导入angular 2(alpha)
- Angular js-返回一个包含类似
- 如何使用 Angular JS 将数据保存在数据库中
- 将JSON对象传递给angular指令
- 从HTTPGET返回一个自定义对象列表,以便在Angular 2应用程序中使用
- Angular:更新一次性绑定的数据
- 同步调用,直到用户通过angular验证为访问者
- 将Angular js与taglib结合使用
- 在Angular Fullstack中设置TinyMCE
- 可以't使用Angular解析/检索JSON