0

レポートを生成する Java サーブレットがあります。N 個のハイチャート グラフを含むハイチャート ダイアグラムを生成するオプションが追加されました。図はモーダル要素 (ライトボックス、iframe、関係ありません) で開く必要があります。fancybox を使って、iframe に読み込まれた図を表示したのですが、高さと幅がすべてめちゃくちゃです。

ブラウザ/ファンシーボックスは、ハイチャートがレンダリングされる前にダイアグラムの要素のサイズを計算しているようで、iframe を小さなサイズで表示します。

ダイアグラムはサーブレット URL から呼び出され、そのサイズを事前に知ることは不可能ですが、iframe の使用に縛られていません。

その場合は、別の jquery ライブラリを使用できます。

fancybox 2.0.5、jquery 1.7.2、highcharts 2.2.5を使用

4

1 に答える 1

1

ハイチャート HTML コンテナをフローティング div からテーブル構造に変更し、fancybox モードを iframe から ajax に変更することで、この問題を解決しました。

このようにして、fancybox は正しいサイズを読み取ることができます。

Fancybox は、リンクから正しくトリガーできる唯一の jquery プラグインでした (jqmodal と simplemodal もテストしました)。リンクは、ページが読み込まれた後に、ページでの ajax 呼び出しによって動的に読み込まれます。

これは $(document).ready( 呼び出しのコードです

$("a.modalLightbox").fancybox({
type : 'ajax'
autoSize : true,
padding : 5,
fitToView : true,
});

テーブルの幅はインライン CSS で設定されていました (最適ではありませんが、各ダイアグラムにはサーブレットによって計算された独自の幅があるため、インラインで行う必要がありました)。

all-floats アプローチでは、iframe の body 要素の高さが 0 で、幅が継承されたままになっていました。

于 2012-07-25T15:50:04.850 に答える