带有角度调整大小的浮动图表

Question

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

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

我观察窗口调整大小，然后希望调整浮动图表的大小，因为它不会自动这样做。

但是重置数据源不起作用，我有点不知道接下来要尝试什么。

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

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

Answer 1

在回答我自己的问题时，最好的解决方案是将 flot.resize.js 插件用于浮点图。我最初将它包含在 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();
}