4

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) ファイルとモーダル ウィンドウに入れると、2 つの問題が発生します。幅を指定しないと、以下のエラーが表示されます。

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">

私の 2 つの問題は解決し、グラフは正常に表示されます。しかし、「非表示」を削除すると、サイトに別の問題が発生するため、削除できません。したがって、このコードを追加しました (上記を参照)。

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

しかし、それは何もしません。display:auto、display:inline、display:table など、ほぼすべての表示オプションを試しましたが、どれも機能しません。

誰でも解決策を提案できますか?

4

2 に答える 2

5

幅を指定する必要があります。

flotのドキュメントによると

この 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 に答える