1. 确定父元素的宽度 在 HTML 中，使用 ngAfterViewInit 钩子函数来获取父元素的宽度并将其存储在变量中。在这个例子中，我们将一个 div 元素作为父元素，并使用 ElementRef 来访问它。

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({ selector: 'app-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.css'] }) export class ChartComponent implements AfterViewInit {

@ViewChild('chartContainer', { static: false }) chartContainer: ElementRef;

ngAfterViewInit() { const element = this.chartContainer.nativeElement; const width = element.offsetWidth; console.log('Chart width: ' + width); } }

2. 更新图表大小 在 Highcharts 中，可以使用 setSize 函数来更新图表大小。在这个例子中，我们将更新图表的宽度为父元素的宽度。

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

@Component({ selector: 'app-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.css'] }) export class ChartComponent implements AfterViewInit {

@ViewChild('chartContainer', { static: false }) chartContainer: ElementRef;

public Highcharts = Highcharts; public chartOptions: any;

ngAfterViewInit() { const element = this.chartContainer.nativeElement; const width = element.offsetWidth;

this.chartOptions = {
  chart: {
    type: 'line',
    width: width
  },
  title: {
    text: 'Chart Title'
  },
  series: [{
    data: [1, 2, 3, 4, 5]
  }]
};

} }