親のdivのハイチャートの幅の流れ

Question

highchartsを使用し、rowのアクションボックスを使用してcolumnのアクションボックスに2つのボタンを使用して作成したグラフが必要なダッシュボードを作成しようとしています。私はアクションボックスが残りのスペースを取るためにコンテンツとチャートをラップするようにしたい。しかし、私は期待された結果を得ていません。 chartは、そのparent divより幅が広くなっています。つまり、containerです。ここに私のHTMLコードです。

これは私が結果として取得していますものです：：ここで

<md-content flex layout-padding> 
    <md-card layout="row" layout-wrap> 
     <div flex layout-padding> 
      <highchart id="summary-chart" config="dashboard.chartConfig"></highchart> 
     </div> 
     <div layout-align="start center" layout="column" layout-padding> 
      <div layout-align="start center" layout-fill> 
       <img src="../../../assets/images/computer.png"> 
       <label layout-fill>Computer</label> 
      </div> 
     </div> 
    </md-card> 
</md-content> 

は、私が期待するものです

注：アイコンはチャートによって隠されている

Answer 1

応答性の高いレイアウトを維持しながらチャートが境界線から外れないようにするには、次のことをお勧めします。

まず、あなたのHighchartsの可視化、独自のIDが含まれているフレックスdiv要素（この例では、chartContainer）を得：

<md-content flex layout-padding> 
    <md-card layout="row" layout-wrap> 
     <div flex layout-padding id="chartContainer"> 
      <highchart id="summary-chart" config="dashboard.chartConfig"></highchart> 
     </div> 
     <div layout-align="start center" layout="column" layout-padding> 
      <div layout-align="start center" layout-fill> 
       <img src="../../../assets/images/computer.png"> 
       <label layout-fill>Computer</label> 
      </div> 
     </div> 
    </md-card> 
</md-content> 

次へ]を、chartContainer DIVのサイズが変更されるたびに、highchart要素のサイズに設定そのdiv要素の幅と高さを一致させる：

$(".chartContainer").resize(function() { 
    $('#summary-chart').highcharts().setSize(
     $(".chartContainer").width(), // new width of the containing div 
     $(".chartContainer").height(), // new height of the containing div 
     false // don't animate the chart itself changing 
    ); 
}); 

私はhighcharts要素としてsetSize()を使用して値を渡すことができるという仮定を作ってるんだということに注意してください標準のdiv要素を使用します。

これがあなたに役立つかどうかを教えてください。

Answer 2

.highcharts-container { 
    width:100% !important; 
    height:100% !important; 
}