Angular中使用Highcharts触发Error#13无法找到渲染div如何解决

Highcharts错误13的本质是实例化图表时，未找到对应ID的DOM容器。你当前的代码存在两个问题：

• 你在constructor构造函数中执行Highcharts.chart()实例化逻辑，此时Angular组件的模板DOM还未完成渲染挂载，页面中不存在ID为container的元素，自然触发报错。
• 你已经引入了highcharts-angular官方封装组件，该组件会自动根据传入的参数创建图表实例，你手动调用Highcharts.chart()属于重复操作，就算DOM加载完成也可能引发实例冲突。

1. 删除constructor中手动实例化图表的代码
2. 若需要获取图表实例用于后续操作，可以通过ngAfterViewInit生命周期钩子或者highcharts-angular的chartInstance事件绑定获取
3. 补充chartOptions中的必填配置项（比如图表类型、数据系列等），避免图表渲染为空

修复后ts文件代码 #

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

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

  constructor() {
    // 删除原有的手动实例化代码
  }

  ngOnInit(): void {
    // 可在此处给chartOptions赋值配置
    this.chartOptions = {
      chart: {
        type: 'pie'
      },
      series: [{
        type: 'pie',
        data: [1, 2, 3]
      }]
    }
  }
  Highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {}
}

修复后html文件代码（无需改动，若需要拿实例可加事件绑定） #

<highcharts-chart
  id="container"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block"
  <!-- 若需要获取实例可加这行 -->
  <!-- (chartInstance)="chart = $event" -->
></highcharts-chart>

内容的提问来源于stack exchange，提问作者Tamás Köböl