我正在使用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
我将宽度设置为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>
在引导程序中.css:
...
.hide {
display: none;
}
我注意到，当我从中删除"隐藏"时
<div class="modal fade hide" id="chartModal">
我的两个问题消失了，图表看起来很好。但是删除"隐藏"会导致网站上的其他问题，因此我无法删除它。因此，我添加了以下代码(如您所见)：
<style>
display:block!important;
</style>
但是，它没有任何作用。我几乎尝试了所有显示选项，如display:auto、display:inline、display:table等，但都不起作用。
有人能提出解决方案吗？
您必须指定宽度。
根据flot文件
您需要设置这个div的宽度和高度，否则绘图库不知道如何缩放图形。你可以像这样内联这个：
<div id="placeholder" style="width:600px;height:300px"></div>
CSS规则很棘手。尝试直接引用CSS中的元素，并确保您的CSS在引导程序包含之后。
所以
#chartModal { display:block; }
应该工作，如果需要的话放在！重要的我不喜欢在CSS中引用id，但有时它会让你更快地到达游戏的终点。