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;
}

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

2 个答案: