2016-11-16 15 views
1

プロットのアスペクト比をどのように指定しますか?私は静的なPNGチャートをクリックするとハイチャートに変わるダッシュボード上で作業しています。問題は、私の静的なグラフのプロット領域がより正方形であるのに対して、ハイチャートはデフォルトでより広いアスペクト比になります。プロットのアスペクト比

固定幅と高さを指定せずにグラフに使用するアスペクト比を指定する方法はありますか?

EDIT:

良く説明するために、私は私のチャートのターゲットとしてのdivを使用する場合、それは正しく幅を埋めるが、高さが、私はどのように知らないアスペクト比可変のいくつかの種類が決定した取得するようです変化する。

EDIT2:

私はすべての私のチャートのために、例えば指定することができます。

chartHeight = chartWidth * 0.75?

答えて

1

はい、できます。

あなたが同じ寸法を持っているあなたのダッシュボードのチャートの全てを持ちたいので、私は次のことをお勧めしたい:

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をクリックしたときに、より明示的な値とパーセンテージを設定する必要があります。

関連する問題