4

jQuery flotを使用していくつかのズーム機能を実装しましたが、正しく機能していません。ズームは、flotの「plotselected」イベントをキャプチャし、「ranges」パラメータを使用して再プロットして、xaxisとyaxisの最大値と最小値を変更することで実装されます。

プロットは最初にプロットされたときに正しく表示され、ドラッグしてxyを選択できます。プロットが再描画されると、適切なデータ範囲がプロットされますが、画面上の軸グリッドの実際のサイズは縮小します。さらに、ズーム再プロットするたびに、軸ラベルが表示されなくなりますが、インスペクターではまだ表示されており、プロットの左上に軸ラベルが上に移動したように見えるがらくたがあります。そこにあり、部分的に（ほとんど）見えません。プロットのサイズは縮小せず（ズーム時のように）、軸ラベルもビューから削除する別のデータでプロットを再描画する他のコードがあり、適切なデータが再びプロットされます。おそらく2つの問題は共通の起源を共有しているので、私は言及します。

どうにかしてプロットを破壊したり、再描画する前にキャンバスをクリアしたりすることで、これらの問題に対処できるのではないかと思いましたが、これを行う方法についてのガイダンスは見つかりませんでした。

関連するコードスニペットを次に示します。最初のリストは、最初にプロットをレンダリングし、「plotselected」イベントにバインドするコードを示しています。

            o.midGraph = $.plot($("#small-graph-mid"), testData, graphOptions);
                $("#small-graph-mid").unbind("plotselected");
                $("#small-graph-mid").bind("plotselected", function (event, ranges) {
                    graphOptions = o.midGraph.getOptions();
                    testData = o.midGraph.getData();
                    o.midGraph = $.plot($("#small-graph-mid"), testData,
                            self._graphZoomOptions(graphOptions, ranges));
                });

そして、軸の範囲を新しい範囲に設定する関数は次のとおりです。

    _graphZoomOptions: function(options, ranges) {
        return $.extend(true, {}, options, {
            xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
            yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
        });
    },

私はプロット/キャンバスを何らかの方法で破壊/クリア/リセットする必要があると考えて正しい方向に進んでいますか？

4

3 に答える 3

5

jquery 1.7.2を使用していますか？

もしそうなら、このスレッド、特にコメント＃4に含まれている固定ナビゲーションプラグインを見てください。

何時間もいじった後、ナビゲーションプラグインの問題が解決しました。

于 2012-05-26T19:42:57.083 に答える
1

Y軸を特定の範囲に設定する方法は次のとおりです。その後、すべての Y 軸が同じ範囲に設定されます。"each" ループの 4 つのステートメントのうち 2 つが不要かもしれませんが、どのステートメントか覚えていません。

$.each(yaxes, function(_, _yaxis){
    _yaxis.min = _min;
    _yaxis.max = _max;
    _yaxis.options.min=_min;
    _yaxis.options.max=_max;
});

setupGrid();
draw();

チャートを破棄して再描画する必要はありません。setupGrid および draw 関数がその部分を処理します。

于 2012-07-23T13:58:10.590 に答える
1

この問題が発生し、plot.getOptions() を使用しないことで解決しました。この原因を調べませんでしたが、プロットを開始するときに作成した元のオプション オブジェクトを使用するとうまくいきました。

于 2013-05-16T10:54:51.763 に答える