在 angular2 中使用 highcharts 渲染的图表不采用父级的高度

【问题标题】：Charts rendered using highcharts in angular2 do not take the height of the parent在 angular2 中使用 highcharts 渲染的图表不采用父级的高度
【发布时间】：2016-12-02 16:11:09
【问题描述】：

我正在尝试使用 angular2-highcharts 呈现图表。但是，图表不会继承父 div 的高度。我该如何纠正这个问题？

这里是 plunker 链接： https://plnkr.co/edit/tk0aR3NCdKtCo3IpVPsf?p=preview

任何帮助表示赞赏！

@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
styles: [`
  chart {
    display: block;
  }
  .c{
    height:200px;
  }
`]
template: `<div class="c"><chart [options]="options"></chart></div>`
})
class AppComponent {
constructor() {
    this.options = {
        title : { text : 'simple chart' },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2],
        }]
    };
}
options: Object;
}

【问题讨论】：

标签： css highcharts angular

【解决方案1】：

Highcharts 不会自动假定包含元素的高度。您必须告诉它需要绘制多大，通常通过 CSS 或内联样式。

我建议您尝试以下任何一种方法。

1) 设置图表高度为auto:

styles: [`
    chart {
        display: block;
        height: auto; // tell the chart to fill 100% of the height of the 'c' container
    }
    .c{
        height:200px;
    }
`]

2) 明确告诉图表与其容器高度相同：

styles: [`
    chart {
        display: block;
    }
    .c, chart { // assign this attribute to both 'c' and the chart
        height:200px;
    }
`]

3) 使用内联样式告诉图表它应该有多高：

template: `<div class="c"><chart [options]="options" style="height: 200px;"></chart></div>`

希望对你有帮助！

【讨论】：