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();
}

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

1 个答案: