具有角度调整大小的绘图图表

Question

我使用angular指令在我的HTML中成功显示了一个flot图表。 看起来像：

<flot id="placeholder" dataset="dataset" options="options" height="300px" width="100%" style="width:100%;" ng-disabled="graphLoading" ng-class="{disabled:graphLoading}"></flot>

我注意调整窗口大小，然后希望调整flot图表的大小，因为它不会自动调整。

然而，重置数据源不起作用，我有点迷失下一步尝试什么。

window.onresize = function(event) {
  console.log('refresh size of flot chart');
  refreshDataset();
}

只是寻找方向或想法，我可以尝试调试或测试以找到解决方案。 似乎这里有一个jquery解决方案http://jsfiddle.net/9x7aJ/2029/ ，但我正在尝试找到angularJS解决方案。

Answer 1

回答我自己的问题，最好的解决方案是使用flot.resize.js插件来获取flot图表。 我最初将它包含在index.html文件中，但由于angularJS的性质（我还在学习），需要将它包含在实际的控制器视图html文件中以便访问它。 所以我把jquery.flot.resize.js放到我的项目中，引用它就像这样：

<script src="scripts/jquery.flot.min.js" cache="false"></script>
<script src="scripts/jquery.flot.time.js" cache="false"></script>
<script src="scripts/jquery.flot.resize.js" cache="false"></script>

较低技术的解决方案是调整大小时的屏幕刷新，但调整大小的插件更加优雅。

低技术解决方案：

window.onresize = function(event) {
    window.location.reload();
}