Highcharts縦棒グラフを使用していますが、100%幅のレスポンシブチャートにする必要があります。コンテナは単純な<div>
書式設定なし。ドキュメントが読み込まれると、グラフの幅は常に600x400pxサイズに固定されます。ウィンドウのサイズを変更したり、別のブラウザタブに切り替えたりすると、グラフが幅いっぱいになり、思ったように応答性の高い全幅グラフになります。ページをリロードすると、幅が再び固定されます。コンテナとチャートの両方に幅を設定しようとしましたが、何も役に立ちません。コンテナdivを親divの1レベル上に移動すると、機能します。ページの読み込み時にグラフを全幅にする方法は?
ありがとう
チャートの幅はjQuery.width(container)
から取得されるため、いくつかの非表示タブまたは類似のものにチャートがある場合、幅は未定義になります。その場合、デフォルトの幅と高さが設定されます(600x400)。
これは古い質問ですが、まったく同じ問題にぶつかり、うまく機能する別の解決策を見つけました。
Highcharts 4.1.5の時点で(古いバージョンでも同様です)、chart
オブジェクトにはreflow()
関数があります。ドキュメントを表示 here 。
リフロー()
チャートをコンテナにリフローします。デフォルトでは、chart.reflowオプションに従って、window.resizeイベントに続いて、チャートは自動的にコンテナにリフローします。ただし、divのサイズ変更には信頼できるイベントがないため、ウィンドウのサイズ変更イベントなしでコンテナのサイズを変更する場合は、明示的に呼び出す必要があります。
それが他の誰かを助けることを願っています。