2

ウィンドウのサイズを小さくしたときに、ハイチャートのサイズを小さくするのに問題があります。

JSFiddle http://jsfiddle.net/britboy/UvFaQ/でコードの例を作成しました

<table border='1' width='100%'><tr><td width='100%'>
<div id="container" width='100%'></div>
</td></tr></table>

テーブルに表示される単純なハイチャート チャートです。ウィンドウを大きくするとチャートが拡大しますが、ウィンドウを小さくするとチャートは縮小されず、代わりにテーブルにスクロール バーが表示されます。

サイズ変更イベントを設定してから、chart.setSize() でグラフのサイズを調整しようとしましたが、問題は、グラフを含む div のサイズがそれ以上縮小されないため、setSize() がトリガーされないことです。チャートコンテナが大きくなるとチャートのサイズが自動的に変更されるため、チャートが小さくなると同じことが機能するはずです。問題は、グラフのサイズが原因でコンテナーが縮小されていないことだと思います。

テーブルが縮小されるとサイズが縮小するテーブルにグラフをコーディングするにはどうすればよいですか? ありがとう

4

3 に答える 3

3

それを達成する方法はn個あります。

1つは@Azeemが指摘したとおりです。コメントで。

他の方法では、実際には でバインドしwindowます。ウィンドウのサイズが変更されるたびに、bind イベントによって関数がトリガーされ、チャートのレンダリングに使用される div 要素のサイズが変更されます。

$(window).bind("resize", resizeChart);

それから、

function resizeChart() {
    var width = $(document).width() - 55;
    var height = $(document).height() - 60;
    $("#container").css("width", width);
    $("#container").css("height", height);
}

サンプルの fiddle を確認してくださいhere。

于 2013-04-25T12:49:08.957 に答える
1

この方法を試してください：

var chart = $('#graph1').highcharts();
var DetailsWidth = $('#graph1');

http://jsfiddle.net/cjohn/5ghzk4t8/4/

于 2015-04-09T09:10:04.167 に答える