5

コンテナのサイズが変更されたときのグラフのレンダリングについて2つの質問があります。

まず、コンテナのサイズが変更されたときにグラフを正しくレンダリングする方法です。

つまり、最大化/復元の問題です。最初のレンダリングでは問題なく機能しますが、ウィンドウのサイズを復元すると、グラフは以前のサイズとしてオーバーレイされ始めます。次の写真からわかるように： ここに画像の説明を入力してくださいここに画像の説明を入力してください

ウィンドウのサイズが変更されるたびにグラフを更新するようにサイズ変更ハンドラーを設定する（そして少し待つ）と、問題を解決できることを私は知っています。チャートを毎回更新せずに、チャートを適切なサイズにフローさせる方法は他にもあるかと思います。

2つ目は、チャート領域が<div>コンテナ内にあり、コンテナのサイズがサイズ変更バーで変更される場合です。次のコードを使用して、ウィンドウのサイズ変更で機能させます。ただし、移動するサイズ変更バーでは機能しません。

$(window).resize(function () {
        setTimeout(function () {
            createChart(chartData);
        }, 300);
    });

注：グリッドコンポーネントはどのような場合でも問題なく機能し、チャートだけで常に問題が発生します。私はHighCharts、kendoUIグリッドを使用しており、どちらもjQueryUIポートレットでレンダリングされます。

コメントをいただければ幸いです！この問題には長い時間がかかりました。

更新：問題の説明が十分に明確ではないと思うので、理解を深めるためにJSFiddleの例を追加しました。基本的に私は2つのことを望んでいます：1。ウィンドウのサイズが変更されているときに、チャートのサイズをそのコンテナーに合うようにリフローします。2.サイズ変更バーが移動しているときに、チャートのサイズをコンテナに合わせてリフローします。

この例では、グラフ作成にプラグインのハイチャートを使用し、レイアウト管理にjQueryUIレイアウトを使用しています。私が使用している他のいくつかのプラグインについては、ここを参照してください。競合があるかどうかはわかりません。

ありがとう！

4

2 に答える 2

3

サイズ変更イベントをフックしてグラフを再描画しないと、あなたが望むことを達成できるとは思いません。

「div」サイズ変更の問題を解決するには、このようなものを見てください。これにより、サイズ変更イベントをウィンドウ以外のもの（この場合は「コンテナ」div）にバインドできます。

これが実際のフィドルです。

于 2012-07-09T13:58:40.437 に答える
0

同様の問題があり、次のようにして解決しました。

higchartsチャートを含むサイズ変更可能なdivを定義する場合：

        $("#container").resizable({
            resize: function (event, ui) {
                var delay = 1000;
                setTimeout(function () {
                    $(window).resize();
                }, delay);
            }
        });

そしてチャートの定義の中に：

           var chart = new Highcharts.Chart({
           .........
            $(window).resize(function() {
                chart.reflow();
           ..........
            });

したがって、基本的には、ウィンドウのサイズを変更するのに時間がかかります。あまりエレガントではありませんが、私には問題なく動作します。

于 2017-01-25T14:31:37.237 に答える