4

我正在使用 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 等，但它们都不起作用。

有人可以提出解决方案吗？

4

2 回答 2

5

您必须指定宽度。

根据浮动文档

你需要设置这个div的宽度和高度，否则绘图库不知道如何缩放图形。你可以这样内联：

 <div id="placeholder" style="width:600px;height:300px"></div>
于 2012-10-18T18:19:40.067 回答
0

CSS 规则很棘手。尝试直接在您的 CSS 中引用该元素，并确保您的 CSS 在引导程序包含之后。

所以

#chartModal { display:block; }

应该可以工作，如果需要，请放入！important。我不喜欢在 CSS 中引用 id，但有时它会让你更快地进入最后阶段。

于 2012-10-12T19:02:14.283 回答