ng2-admin中的卡片中的高圖100％（高度寬度）-Angular2 ng2-admin模板

Question

我不會在akveo / ng2-admin模板中使用Highcharts。 還安裝gevgeny / angular2-highcharts。

但是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>

結果示例

謝謝你的支持

Answer 1

這對我有用-僅CSS：

chart {display: block;}

Answer 2

可以使用圖表的內部CSS類。
highcharts基本包含highcharts-container和highcharts-root類。
因此，如果您想調整圖表大小，建議您使用。

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