하이 차트 ng2-admin - Angular2 ng2-admin 템플릿에서 카드의 100 % (높이 너비)

Question

akveo/ng2-admin 템플릿에서 Highcharts를 사용하지 않을 것입니다. gevgeny/angular2-highcharts도 설치하십시오.

그러나 하이 차트는 크기를 변경하지 않고 상위 컨테이너에 적응하지 않습니다.

CSS 클래스 작동하지 :

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

component.ts

import {Component, ElementRef} from '@angular/core'; 

import 'style-loader!./Chart.scss'; 

@Component({ 
    selector: 'ngbd-tabset-basic2', 
    templateUrl: './chart.html' 
}) 
export class Chart { 
    options: Object; 
    chart: Object; 

    constructor() { 
     this.options = { 
      chart: { 
      }, 
      title : { text : 'simple chart' }, 
      series: [{ 
       data: [29.9, 71.5, 106.4, 129.2], 
      }] 
     }; 
    } 

    onChartLoad(chart) { 
     chart.reflow(); 
    } 
} 

Chart.scss

@import "../../theme/sass/conf/conf"; 

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

chart.html

<div class="widgets"> 

    <div class="row"> 
     <ba-card title="Highcharts Demo" baCardClass="xmedium-card"> 
      <chart [options]="options" (load)="onChartLoad($event.context)" ></chart> 
     </ba-card> 
    </div> 
</div> 

,369

Example result

이것은 나를 위해 일한 지원

Answer 1

주셔서 감사합니다 - 단지 CSS : 사용할 수있는 차트의

chart {display: block;} 

Answer 2

내부 CSS 클래스를.
하이 차트은 기본적으로 하이 차트 컨테이너 및 highcharts-root 클래스를 포함합니다.
차트 크기를 조정하려면 사용하는 것이 좋습니다.

.highcharts-root { 
    width:500px !important; 
}