Question

我正在尝试使用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;
}

Answer 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>`

我希望这对你有所帮助！

在angular2中使用highcharts呈现的图表不会占用父级的高度

1 个答案: