7

FlotグラフライブラリjQueryプラグインを使用していますが、サイズの変更が含まれている場合<div>（たとえば、ウィンドウのサイズ変更のため）、グラフのサイズ変更を処理するための適切な方法が見つかりませんでした。onresizeイベントを処理するときに、包含の幅と高さが<div>正しいサイズに更新されていることを確認してから、setupGridとdrawの両方をプロットオブジェクトに呼び出してみましたが、効果はありませんでした。含まれているグラフを削除して再読み込みし、その中のグラフを再プロットするというアプローチで、ある程度の成功を収めまし<div>た。ただし、他を追加する必要がある場合、これは無限のサイズ変更イベントループでスタックする傾向があるようです<div>同時にドキュメントの要素（グラフのツールチップなど）は、サイズ変更イベントもトリガーできると思いますか？私が行方不明になっていることを処理する良い方法はありますか？

（Flotと関係がある場合は、Flotを使用できるようにするためにExplorerCanvas for IEも使用しています。他のブラウザーではまだ実際に試していません）

4

5 に答える 5

17

ウィンドウのサイズ変更イベントにバインドするだけで、plotの呼び出しが非常にうまく機能することがわかりました。たとえば、データとオプションをページの変数に保存しています。次に、これを$（document）.ready（）で設定します。

$(window).resize(function() {$.plot($('#graph_div'), data, opts);});

于 2010-05-20T01:07:48.397 に答える
8

少なくとも、flot APIドキュメントの最新バージョンでは、アドバタイズされたとおりに機能するサイズ変更イベントについて説明しています。

resize（）

描画キャンバスのサイズをプレースホルダーのサイズに変更するようにFlotに指示します。キャンバスのサイズ変更は破壊的な操作であるため、後でsetupGrid（）とdraw（）を実行する必要があります。これは、サイズ変更プラグインによって内部的に使用されます。

于 2011-08-12T17:50:07.297 に答える
3

私はこれに対する解決策を自分で見つけました。$.plot()特定の問題の元の原因である可能性があるため、への呼び出しをラップしましたが、jQueryresizeイベントを使用した場合でも、flotはタイムリーにサイズ変更することを拒否しました。これがすべてを修正した私のコード変更です：

$(window).resize(function() {
    // erase the flot graph, allowing the div to shrink correctly
    $('#graph_div').text(''); 

    // redraw the graph in the correctly sized div
    $.plot($('#graph_div'), data, opts);
});
于 2011-02-22T08:25:20.050 に答える
3

最も簡単な方法は、サイズ変更プラグインを使用することです。ここで示されています：http ：//www.flotcharts.org/flot/examples/resize/

しかし、あなたはただ追加します

<script language="javascript" type="text/javascript" src="../../jquery.flot.resize.js"></script>
于 2015-09-08T16:08:45.147 に答える
0

なぜそれが機能するのか完全にはわかりませんが、私は解決策を見つけたようです。私はまだ<div>、ドキュメントから内容物を削除して再読み込みし、その中のグラフを再プロットするというアプローチを使用しています。しかし、以前私がやっていたところ

window.onresize = redrawFunc;  //redrawFunc removes and readds the containing div and replots

これは、redrawFuncがドキュメントに対して行ったことに応じて、無限ループのように見えるものに入る傾向があるように見えました。

代わりに、jQueryのサイズ変更バインディングを使用してみました

$(window).resize = redrawFunc;

これまでのところ、redrawFuncでドキュメントに他にどのような変更を加えても、このアプローチがループに陥る問題はまだ発生していません。理由はよくわかりません。

于 2010-05-18T15:48:43.180 に答える