angular - 来自 ng2-admin 的卡片中的 Highcharts 100%（高度宽度） - Angular2 ng2-admin 模板

Question

我不会在 akveo/ng2-admin 模板中使用 Highcharts。还安装 gevgeny/angular2-highcharts。

但是 Highcharts 不改变大小，也不适应父容器。

CSS类不起作用：

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

组件.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();
    }
}

图表.scss

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

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

图表.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;
}