如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表
Posted
技术标签:
【中文标题】如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表【英文标题】：How to show Flot chart in 100% width in Twitter Bootstrap AngularJS modal window 【发布时间】：2012-10-03 14:41:41 【问题描述】：我正在使用 Twitter Bootstrap AngularJS 构建一个网络应用程序。在模态窗口中，我喜欢显示一个 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 等，但它们都不起作用。
有人可以提出解决方案吗？
【问题讨论】：
如果您没有在要绘制图形的占位符上指定高度和宽度，或者如果占位符被隐藏，Flot 会感到不安。您不能重新排列它，以便仅在占位符可见时绘制图表吗？ 嗨@MattBurland：从people.iola.dk/olau/flot/examples/realtime.html 复制代码并将其放入单独的html 文件后，我从DIV 占位符中取出宽度规范。它仍然有效。图表宽度自动变为 100%。如何重新排列它，以便在占位符可见后绘制我的图表？我将 移到占位符下方，但这并没有改变任何东西。 我不熟悉 AngularJS，但我假设您可以移动实际的$.plot("#placeholder",...) 代码位，以便它仅在您运行使模态窗口出现的代码后运行第一名。
【参考方案1】：
你必须指定宽度。
根据 flot 文档
你需要设置这个div的宽高，否则绘图库不知道如何缩放图形。你可以像这样内联 这个：
<div id="placeholder" style="width:600px;height:300px"></div>
【讨论】：
【参考方案2】：CSS 规则很棘手。尝试直接在您的 CSS 中引用该元素，并确保您的 CSS 在引导程序包含之后。
所以
#chartModal display:block;
应该可以工作，如果需要的话，放在 !important 中。我不喜欢在 CSS 中引用 id，但有时它会让你更快地完成游戏。
【讨论】：
嗨@DanDoyon：我试过了，不管有没有！important。它们都不起作用，我的 CSS 在 bootstrap.css 包含之后。我也将 style="display:block" 与 DIV 一起放入，但无济于事。 然后在我看来，似乎有一些 javascript 正在以编程方式设置样式。您可能想尝试添加自己的代码来撤消此操作。尝试将 ng-show 放在 div 上，看看是否有帮助。以上是关于如何在 Twitter Bootstrap AngularJS 模态窗口中以 100% 宽度显示 Flot 图表的主要内容，如果未能解决你的问题，请参考以下文章
如何让 twitter-bootstrap 导航栏子项在小屏幕上折叠/展开？
如何在 twitter-bootstrap-3 模态框中使用复选框
如何在 IE 中覆盖 Twitter Bootstrap 下拉悬停