来自ng2-admin - Angular2 ng2-admin模板的卡片中的Highcharts 100% (高宽)

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>

Example result

感谢您的支持

Answer 1

这对我来说是有效的-只有css：

chart {display: block;}

Answer 2

可以使用图表的内部CSS类。

highcharts类基本上包含highcharts-container和highcharts-root类。

因此，如果您想调整图表大小，我建议您使用。

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