Question

我正在使用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>

在bootstrap.css中：

...
.hide {
  display: none;
}

当我从“

”中删除“隐藏”时，我注意到了

<div class="modal fade hide" id="chartModal">

我的两个问题消失了，图表显得很好。但删除“隐藏”会导致网站上的其他问题，因此我无法将其删除。因此，我添加了这段代码（如上所示）：

<style>
  display:block!important;
</style>

但是，它没有做任何事情。我已经尝试了几乎所有显示选项，例如display：auto，display：inline，display：table等，但它们都不起作用。

有人可以建议解决方案吗？

Answer 1

您必须指定宽度。

根据flot文档

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

 <div id="placeholder" style="width:600px;height:300px"></div>

Answer 2

CSS规则很棘手。尝试直接引用CSS中的元素，并确保CSS位于bootstrap include之后。

所以

#chartModal { display:block; }

应该工作，如果需要放入！important。我不喜欢在CSS中引用ID，但有时它会让你更快地结束游戏。

如何在Twitter Bootstrap AngularJS模态窗口中以100％宽度显示Flot图表

2 个答案: