Angular 4集成Google Timeline图表报错：Cannot read property 'Timeline' of undefined

这个报错的核心原因很明确：你在Google Charts的Timeline包还没加载完成的时候，就尝试访问google.visualization.Timeline了，而且代码里还有两个小问题直接导致了这个情况，咱们一步步来修复：

问题1：错误的回调传递方式 #

你原来的代码里是这么写的：

google.charts.setOnLoadCallback(this.testGraph());

这里的this.testGraph()会立即执行这个函数，而不是把函数本身传给回调。也就是说，Google Charts还没来得及加载timeline包，testGraph就已经运行了，这时候google.visualization自然是undefined，也就找不到Timeline了。

问题2：Angular组件的this上下文丢失 #

就算你改成传递函数引用this.testGraph，在回调执行的时候，this会指向全局对象，而不是你的组件实例，后续如果有依赖组件属性的代码也会出问题。

完整的修复方案 #

结合Angular的生命周期钩子，以及正确的Google Charts加载方式，修改后的代码如下：

1. 组件代码（dasbordComponets.ts） #

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

@Component({
  selector: 'app-root',
  templateUrl: './dasbordComponets.html'
})
export class DashboardComponent implements AfterViewInit {
  // 声明google全局变量
  declare var google: any;

  // 等视图初始化完成后再初始化图表，确保DOM元素存在
  ngAfterViewInit(): void {
    this.initGraph();
  }

  public initGraph() {
    // 加载timeline包，直接用load的回调函数替代setOnLoadCallback，更简洁
    google.charts.load('current', { 'packages': ['timeline'] }, () => {
      // 用箭头函数保留组件的this上下文
      this.testGraph();
    });
  }

  public testGraph() {
    // 先检查容器是否存在，避免DOM还没渲染好的情况
    const container = document.getElementById('graph');
    if (!container) return;

    const chart = new google.visualization.Timeline(container);
    const dataTable = new google.visualization.DataTable();
    
    dataTable.addColumn({ type: 'string', id: 'President' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    
    dataTable.addRows([
      ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4)]
    ]);

    chart.draw(dataTable);
  }
}

2. 关键修改点说明 #

• 使用ngAfterViewInit：Angular的这个生命周期钩子会在组件视图完全渲染后触发，保证document.getElementById('graph')能获取到有效的DOM元素，避免容器不存在的问题。
• 直接用google.charts.load的回调：替代setOnLoadCallback，写法更简洁，而且能确保回调在图表包加载完成后才执行。
• 箭头函数保留上下文：() => this.testGraph()确保testGraph里的this还是指向组件实例，后续扩展代码不会出问题。
• 增加容器空值检查：做个兜底，防止意外情况导致容器不存在时抛出新的错误。

这样修改之后，你的Timeline图表应该就能正常渲染了，不会再出现Timeline undefined的报错。

内容的提问来源于stack exchange，提问作者chirag sorathiya