Angular 4项目集成FusionCharts报错求助

Let's walk through the most likely issues and fixes for your FusionCharts integration—your code is nearly correct, but a few small mismatches are causing errors.

1. Fix Case Sensitivity for Chart Properties #

FusionCharts is strict about case sensitivity for chart types and data formats, and your component and template have conflicting values:

• In userlist.ts, you defined type = 'column2d' (all lowercase) and dataFormat = 'json' (lowercase)
• In userlist.component.html, you used type="Column2D" (mixed case) and dataFormat="JSON" (uppercase)

Update your template to match the component's values, and use property binding ([]) to keep dynamic values in sync:

<fusioncharts [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource"></fusioncharts>

This ensures Angular uses the exact values from your component instead of hardcoded strings.

2. Confirm Module Setup in app.module.ts #

Double-check that you've properly added FusionChartsModule to the imports array, and that your UserListComponent is declared. Here's the full, correct module setup:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';
import { FusionChartsModule } from 'angular4-fusioncharts';
import { AppComponent } from './app.component';
import { UserListComponent } from './userlist/userlist.component';

@NgModule({
  declarations: [
    AppComponent,
    UserListComponent // Critical: Ensure your component is declared here
  ],
  imports: [
    BrowserModule,
    FusionChartsModule.forRoot(FusionCharts, Charts, FintTheme) // Correctly placed in imports
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If UserListComponent is missing from declarations, Angular won't recognize the component at all.

3. Resolve Version Compatibility #

Angular 4 requires specific versions of fusioncharts and angular4-fusioncharts—newer versions are built for later Angular releases and will cause errors. Uninstall your current packages and install compatible versions:

npm uninstall fusioncharts angular4-fusioncharts
npm install fusioncharts@3.13.0 angular4-fusioncharts@1.0.0 --save

These versions are tested and work reliably with Angular 4.

4. Explicitly Register Charts & Theme #

Sometimes the chart modules don't register automatically. Add these lines right after your imports in app.module.ts to ensure FusionCharts recognizes the column2d chart and fint theme:

import * as FusionCharts from 'fusioncharts';
import * as Charts from 'fusioncharts/fusioncharts.charts';
import * as FintTheme from 'fusioncharts/themes/fusioncharts.theme.fint';

// Explicitly register the chart library and theme
Charts(FusionCharts);
FintTheme(FusionCharts);

5. Clear Cache & Corrupted Modules #

If you're still seeing errors, corrupted node modules or cache might be the culprit. Run these commands to reset:

rm -rf node_modules package-lock.json
npm install
npm cache clean --force

After applying these fixes, your FusionCharts should render properly in the UserListComponent. If you're getting a specific error message (like "chart type not found" or module errors), share it and we can troubleshoot further!

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