はい、できます。
あなたが同じ寸法を持っているあなたのダッシュボードのチャートの全てを持ちたいので、私は次のことをお勧めしたい:
1)あなたのコンテナのdiv要素のすべてによって共有される基本的なスタイルを定義します。ここでは、すべてに共通の幅と高さを設定します。あなたのチャートのコードで
// in your stylesheet:
.chartStyle {
width: 100%;
height: auto;
}
<!-- in your HTML code: -->
<div id="container" class="chartStyle"></div>
<div id="container2" class="chartStyle"></div>
2)、あなたは(それらはすべて同じ幅と高さを共有しているため)最初のコンテナのdivの現在の大きさに基づいて計算されているすべてのグラフのオプション、設定幅と高さの変数を設定する前に。
var myWidth = $('#container').width();
var myHeight = $('#container').width() * 0.75;
3)各グラフのオプションで、先に宣言した変数にwidth属性とheight属性を設定します。
chart: {
width: myWidth,
height: myHeight
},
ここで、各グラフは、定義したアスペクト比でレンダリングする必要があります。ここで
は、この設定とフィドルです:ボーナスポイントhttp://jsfiddle.net/brightmatrix/eaut2jcs/
、あなたは、ユーザーがブラウザのウィンドウのサイズを変更する場合は、幅と高さの変数を更新し、グラフを再描画する$(window).resize
イベントを設定することができます。
注意点:の注意点:ブラウザは、非表示のdiv要素の寸法を正確に計算することができません。 display: none
またはvisibility: hidden
を使用して静的PNGから対話型グラフに切り替える前にグラフのdivを非表示にする場合は、ユーザーがPNGをクリックしたときに、より明示的な値とパーセンテージを設定する必要があります。