Angular中Highcharts直方图创建报错：无法设置undefined的name属性

开发者阿泽

2026-5-20

解决Angular中Highcharts直方图的"cannot set property name of undefined"错误

这个错误的根源很明确：你声明了chartSeries数组但没有初始化它，也没在循环中提前创建对应的series对象，导致你试图给chartSeries[i].name赋值时，chartSeries[i]是undefined，自然会抛出这个属性赋值错误。

下面是具体的修复步骤和示例代码：

1. 先初始化chartSeries数组

在组件的初始化逻辑里（比如ngOnInit钩子或者构造函数），先给chartSeries赋一个空数组：

chartSeries: any[];

ngOnInit() {
  // 关键：先初始化数组
  this.chartSeries = [];
  // 之后再执行你的循环创建series逻辑
  this.buildHistogramSeries();
}

2. 循环中先创建series对象再赋值

有两种常见的写法都能解决问题：

写法一：创建完整对象后推入数组

这种方式更清晰，直接构建好series对象再加入数组：

buildHistogramSeries() {
  // 匹配示例的直方图series配置
  const histogramSeries = {
    name: 'Histogram',
    type: 'histogram',
    data: this.results[0].data,
    baseSeries: 0, // 关联的基础数据系列索引，按需调整
    xAxis: 0,
    yAxis: 1
  };
  this.chartSeries.push(histogramSeries);
}

写法二：先在数组中占位空对象，再逐步赋值

如果你的逻辑需要分步设置属性，可以先给数组索引位置赋值一个空对象：

buildHistogramSeries() {
  // 这里以创建单个series为例，多系列可调整循环条件
  for (let i = 0; i < 1; i++) {
    // 先创建空对象占位
    this.chartSeries[i] = {};
    // 再逐一设置属性
    this.chartSeries[i].name = 'Histogram';
    this.chartSeries[i].type = 'histogram';
    this.chartSeries[i].data = this.results[0].data;
    this.chartSeries[i].baseSeries = 0;
  }
}