twitter-bootstrap – 如何在Twitter Bootstrap AngularJS模式窗

发布时间：2020-12-17 21:26:40 所属栏目：安全来源：网络整理

导读：我正在使用Twitter Bootstrap AngularJS来构建一个Web应用程序.在模态窗口中,我想显示一个 JQuery Flot实时图表,类似于： http://people.iola.dk/olau/flot/examples/realtime.html 我从中复制了代码 http://people.iola.dk/olau/flot/examples/realtime.htm

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

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

解决方法

你必须指定宽度.

根据flot文档

You need to set the width and height of this div,otherwise the plot library doesn’t know how to scale the graph. You can do it inline like
this:

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!