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

在Angular 2中使用Highcharts呈现的图表不会采用父级的高度的原因是因为Highcharts默认情况下会根据自身的配置和数据来确定图表的大小，而不会自动适应父级容器的高度。

解决这个问题的方法是通过设置Highcharts的配置项来手动指定图表的高度，以使其适应父级容器的高度。可以通过以下步骤来实现：

1. 首先，在Angular 2的组件中引入Highcharts库，并在组件的构造函数中初始化Highcharts对象。可以使用npm安装Highcharts库，并在组件中引入相关的模块和样式。
2. 在组件的HTML模板中，创建一个包含Highcharts图表的容器元素，可以使用Angular的指令来指定容器的样式和属性。
3. 在组件的Typescript代码中，定义Highcharts的配置项对象，并在其中设置图表的高度。可以使用chart属性来指定图表的高度，例如chart: { height: '100%' }。
4. 在组件的Typescript代码中，使用Highcharts的API来加载数据和配置项，并将图表绑定到容器元素上。可以使用Highcharts.chart方法来创建图表对象，并使用update方法来更新图表的配置和数据。

以下是一个示例代码：

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-chart',
  template: '<div id="chartContainer" style="height: 100%;"></div>',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  constructor() { }

  ngOnInit() {
    const chartOptions: Highcharts.Options = {
      chart: {
        type: 'column',
        height: '100%'
      },
      // Other chart configuration options...
    };

    const chartContainer = document.getElementById('chartContainer');
    Highcharts.chart(chartContainer, chartOptions);
  }
}

在上述示例中，我们通过设置height: '100%'来指定图表的高度为父级容器的高度。你可以根据实际需求调整配置项来满足你的需求。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云容器服务（TKE）。腾讯云云服务器提供了弹性、安全、稳定的云计算服务，可以满足各种规模和需求的应用场景。腾讯云容器服务是一种高度可扩展的容器管理服务，可以帮助用户快速构建、部署和管理容器化应用。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云容器服务产品介绍链接地址：https://cloud.tencent.com/product/tke