Cur*_*urt 4 modal-dialog flot width twitter-bootstrap angularjs
我正在使用 Twitter Bootstrap AngularJS 来构建一个 Web 应用程序。在模态窗口中，我喜欢展示一个 JQuery Flot 实时图表，类似于：http ://people.iola.dk/olau/flot/examples/realtime.html
我从http://people.iola.dk/olau/flot/examples/realtime.html复制了代码 ，并将其放入我的服务器上一个名为 flot2.html 的文件中。有用。我只指定高度，它会自动将宽度设置为 100%
但是，当我将代码放入我的模板 (index.html) 文件和模式窗口中时，有两个问题。除非我指定宽度，否则它会在下面给我这个错误：
Invalid dimensions for plot, width = 0, height = 300
我设置了 width=100%，但看起来它只显示了 100px。
此外，Y 轴的标签位于网格左边缘/边界的上方，而不是它左侧的几个像素。
这是代码：
在 index.app.html 中：
<!DOCTYPE HTML>
<html ng-app="app">
...
<body ng-controller="AppCtrl">
...
<div class="container">
<div ng-view></div>
</div>
...
<script src="/js/jquery.min.js">
在模板 (index.html) 中：
...
<!-- Modal window -->
<div class="modal fade hide" id="chartModal">
...
<style>
display:block!important;
</style>
<script src="/js/jquery.flot.min.js"></script>
<script src="/js/flot/flot.demo.js"></script> <!-- I copied the Javascript code from http://people.iola.dk/olau/flot/examples/realtime.html and put it here -->
<div id="placeholder" style="width:100%; height:300px; display:block"></div>
在 bootstrap.css 中：
...
.hide {
display: none;
}
我注意到当我从以下位置删除“隐藏”时：
<div class="modal fade hide" id="chartModal">
我的两个问题消失了，图表显示正常。但是删除“隐藏”会导致网站上出现其他问题，因此我无法删除它。因此，我添加了此代码（如您所见）：
<style>
display:block!important;
</style>
但是，它什么也不做。我尝试了几乎所有显示选项，例如 display:auto、display:inline、display:table 等，但它们都不起作用。
有人可以提出解决方案吗？
您必须指定宽度。
根据浮动文档
你需要设置这个div的宽度和高度，否则绘图库不知道如何缩放图形。你可以像这样内联：
<div id="placeholder" style="width:600px;height:300px"></div>