web-dev-qa-db-ja.com

プロットの無効な寸法、幅= 0、高さ=非表示タブ内の400

2番目、3番目などの非表示タブにチャートを挿入すると、このエラーが発生します。ここにエラーがあります。

Invalid dimensions for plot, width = 0, height = 400 in js/jquery.flot.min.js:6.

bootstrap 2およびjquery：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

ライブラリは次のとおりです。

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

そしてCSS：

#plotarea
{
    max-width: none;
    height: 400px;
}
#pie 
{
    max-width: none;
    height: 400px;
}
#barmonth 
{
    max-width: none;
    height: 400px;
}
#baryear 
{
    max-width: none;
    height: 400px;
}

すべてのチャートのIDを持つdiv（idは常にplotarea、pie、barmonth、baryearなどのように、表示する必要があるチャートに変更します）：

<div id="plotarea"></div>

そして、幅エラーを修正するためにこのスタイルを追加します.ui-tabs .ui-tabs-hide { left: -10000px; visibility: hidden !important; }、しかし、これでもチャートはそれらの隠されたタブの内側にチャートを描画しません。最初のビューにある最初のタブのみを描画します...それを修正するフォームがあれば今できますか？

カリスマテンプレートを使用します。

宜しくお願いします！

jquerycsstwitter-bootstrapchartsflot
15
asterix_jv

さて、私はすでにそれを作りました！

このライブラリがある場合は<script src="js/jquery.flot.resize.min.js"></script>、styles.css（スタイルシートファイル）内でこれを変更するだけです。

max-width: none;
height: 400px;

これとともに：

width: 100%;
height: 400px;

現在、チャートはすべての画面で常にサイズ変更されます。

30
asterix_jv

同じ問題がありました。別の解決策がうまくいきました。

  • 必ず高さと幅を設定してください
  • Flotが存在しないdivを探していないことを確認してください。これは、1つ目と3つ目のプロットを使用したのに対して、3つのプロットがあるページからコピーしたためです。 chromeのコンソールを使用して見つけることができました（ページ内で2番目のdivが見つからなかったためクラッシュしました。したがって、3番目のdivはプロットされませんでした。jsの未使用のプロットをコメントアウトして、
13
my account_ram

IE8とAndroidでも同じ問題がありました。鉱山チャートは最初はトグル機能で非表示になっており、非表示のdiv内にチャートをプロットしようとするとエラーが発生しました。 CSSはすでに定義されているので、助けにはなりませんでした。

プロットdiv要素の後にjQueryの非表示および切り替えコードを移動すると、問題が解決しました。

1
dev101

Divが非表示になっていなかったときに、同様の問題が発生しました。 IE11でも同様のエラーが表示されます。コンテナがブロック要素である必要があること、つまりdisplay: block。これが誰かが私よりも時間を無駄にしないのに役立つことを願っています！

0
Ash McConnell