angle2でハイチャートを使用してレンダリングされたグラフは、親の高さを取らない

Question

angle2-highchartsを使用してグラフをレンダリングしようとしています。ただし、グラフは親divの高さを継承しません。どのように私はこれを修正することができますか？ここで

plunkerリンクです： https://plnkr.co/edit/tk0aR3NCdKtCo3IpVPsf?p=preview

は、任意のヘルプ感謝！

@Component({ 
selector: 'my-app', 
directives: [CHART_DIRECTIVES], 
styles: [` 
    chart { 
    display: block; 
    } 
    .c{ 
    height:200px; 
    } 
`] 
template: `<div class="c"><chart [options]="options"></chart></div>` 
}) 
class AppComponent { 
constructor() { 
    this.options = { 
     title : { text : 'simple chart' }, 
     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2], 
     }] 
    }; 
} 
options: Object; 
} 

Answer 1

ハイチャートは自動的に含まれている要素の高さを想定しません。通常、CSSやインラインスタイルを使用して描画する必要があるかどうかを指定する必要があります。

次のいずれかを試してみることをお勧めします。

1）autoにグラフの高さを設定：

styles: [` 
    chart { 
     display: block; 
     height: auto; // tell the chart to fill 100% of the height of the 'c' container 
    } 
    .c{ 
     height:200px; 
    } 
`] 

2）明示的に容器と同じ高さであることがチャートに教える：

styles: [` 
    chart { 
     display: block; 
    } 
    .c, chart { // assign this attribute to both 'c' and the chart 
     height:200px; 
    } 
`] 

3）インラインスタイルを使用グラフの高さを教えてください：

template: `<div class="c"><chart [options]="options" style="height: 200px;"></chart></div>` 

私はこれがあなたに役立つことを願っています！