Angular FusionCharts时间序列图表报错：addSymbol未定义及扩展属性无效

错误原因分析 #

你遇到的两个错误本质是TimeSeries扩展模块注册方式错误、核心库与Angular封装包版本不兼容，以及DataStore实例化路径错误导致的：

• addSymbol 未定义：TimeSeries模块未正确注册，导致依赖的扩展API无法被调用
• 扩展属性无效：TimeSeries作为独立扩展，不能和基础charts模块一起传入fcRoot，注册方式不符合要求

修复步骤 #

1. 确保版本兼容性

angular-fusioncharts与FusionCharts核心库版本必须严格匹配：

• angular-fusioncharts v4.0.3 → 搭配 FusionCharts v3.18.0
• angular-fusioncharts v3.18.0 → 搭配 FusionCharts v3.17.0
  执行对应安装命令：

# 针对v4.0.3版本
npm install angular-fusioncharts@4.0.3 fusioncharts@3.18.0 --save

# 针对v3.18.0版本
npm install angular-fusioncharts@3.18.0 fusioncharts@3.17.0 --save

2. 修正TimeSeries模块的导入与注册

TimeSeries是独立扩展模块，无需导入基础fusioncharts.charts，修改app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FusionChartsModule } from 'angular-fusioncharts';
import * as FusionCharts from 'fusioncharts';
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries';

// 仅注册核心库与TimeSeries扩展
FusionChartsModule.fcRoot(FusionCharts, TimeSeries);

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FusionChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. 修正DataStore实例化路径

DataStore属于TimeSeries扩展的API，不能从核心FusionCharts库获取，修改app.component.ts：

import { Component } from '@angular/core';
// 导入TimeSeries以获取DataStore
import * as TimeSeries from 'fusioncharts/fusioncharts.timeseries';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  dataSource: any;
  type: string;
  width: string;
  height: string;

  constructor() {
    this.type = 'timeseries';
    this.width = '400';
    this.height = '400';
    // 修正yAxis为数组格式（TimeSeries要求）
    this.dataSource = {
      data: null,
      yAxis: [
        {
          plot: [{ value: 'Sales' }]
        }
      ],
      caption: {
        text: 'Online Sales of a SuperStore in the US'
      }
    };
    this.fetchData();
  }

  fetchData() {
    const jsonify = (res: Response) => res.json();

    const dataFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/stacked-colum-chart-with-time-axis-data.json"
    ).then(jsonify);
    const schemaFetch = fetch(
      "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/stacked-colum-chart-with-time-axis-schema.json"
    ).then(jsonify);

    Promise.all([dataFetch, schemaFetch]).then(res => {
      const [data, schema] = res;
      // 从TimeSeries模块实例化DataStore
      const fusionDataStore = new TimeSeries.DataStore();
      const fusionTable = fusionDataStore.createDataTable(data, schema);
      this.dataSource.data = fusionTable;
    });
  }
}

4. 确认模板文件无变更

app.component.html保持原有代码即可，无需修改。

验证修复 #

完成上述修改后，重新启动Angular应用，TimeSeries图表应该可以正常渲染，错误提示会消失。

内容的提问来源于stack exchange，提问作者Akash Gaikwad