Javascript 角2融合图集成

我只是从Angular2开始。我正在尝试与Angular2整合。我已经安装了所有必要的模块（和）。以下是fusionchart组件代码

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import * as FusionCharts from "FusionCharts";
import '../../node_modules/fusioncharts/fusioncharts.charts.js';

@Component({
    moduleId: module.id.toString(),
    templateUrl: 'fusioncharts2.component.html'
})

export class FusionChartsComponent2 {
    revenueChart: any;

    constructor() {

    }

    ngAfterViewInit() {
        this.chartConfig()
    }

    public chartConfig() {
        this.revenueChart = new FusionCharts({
            type: 'column3d',
            renderAt: 'chart-container',
            width: '500',
            height: '300',
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Monthly revenue for last year",
                    "subCaption": "Harry's SuperMart",
                    "xAxisName": "Month",
                    "yAxisName": "Revenues (In USD)",
                    "paletteColors": "#0075c2",
                    "valueFontColor": "#ffffff",
                    "baseFont": "Helvetica Neue,Arial",
                    "captionFontSize": "14",
                    "subcaptionFontSize": "14",
                    "subcaptionFontBold": "0",
                    "placeValuesInside": "1",
                    "rotateValues": "1",
                    "showShadow": "0",
                    "divlineColor": "#999999",
                    "divLineIsDashed": "1",
                    "divlineThickness": "1",
                    "divLineDashLen": "1",
                    "divLineGapLen": "1",
                    "canvasBgColor": "#ffffff"
                },

                "data": [
                    {
                        "label": "Jan",
                        "value": "420000"
                    },
                    {
                        "label": "Feb",
                        "value": "810000"
                    },
                    {
                        "label": "Mar",
                        "value": "720000"
                    },
                    {
                        "label": "Apr",
                        "value": "550000"
                    },
                    {
                        "label": "May",
                        "value": "910000"
                    },
                    {
                        "label": "Jun",
                        "value": "510000"
                    },
                    {
                        "label": "Jul",
                        "value": "680000"
                    },
                    {
                        "label": "Aug",
                        "value": "620000"
                    },
                    {
                        "label": "Sep",
                        "value": "610000"
                    },
                    {
                        "label": "Oct",
                        "value": "490000"
                    },
                    {
                        "label": "Nov",
                        "value": "900000"
                    },
                    {
                        "label": "Dec",
                        "value": "730000"
                    }
                ]
            }
        });
        this.revenueChart.render();
    }

}

app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';

    // Import angular2-fusioncharts
    import { FusionChartsModule } from 'angular2-fusioncharts';

    // Import FusionCharts library
    import * as FusionCharts from 'fusioncharts';
    // Import FusionCharts Charts module
    import Charts = require('fusioncharts/fusioncharts.charts');


    // used to create fake backend
    import { fakeBackendProvider } from './_helpers/index';
    import { MockBackend, MockConnection } from '@angular/http/testing';
    import { BaseRequestOptions } from '@angular/http';

    // Imports for loading & configuring the in-memory web api
    import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

    import { AppComponent } from './app.component';
    import { routing } from './app.routing';

    import { AlertComponent } from './_directives/index';
    import { AuthGuard } from './_guards/index';
    import { AlertService, AuthenticationService, UserService, 
HeroSearchService, HeroService, InMemoryDataService } from 
'./_services/index';
    import { CarService } from './cars/carservice';
    import { HomeComponent } from './home/index';
    import { DashboardComponent, HeroDetailComponent, HeroSearchComponent, 
    HeroesComponent } from './dashboard/index';
    import { AppChildComponent, ParentComponent } from 
    './parentchild/index';
    import { ContentComponent } from './content/index';
    import { DataTableComponent } from './datatable/index';
    import { FusionChartsComponent } from './fusioncharts/index';
    import { FusionChartsComponent2 } from './fusioncharts2/index';
    import { JqDataTableComponent } from './jqdatatable/index';
    import { JsTreeComponent } from './jstree/index';
    import { LoginComponent } from './login/index';
    import { RegisterComponent } from './register/index';

    import { HashLocationStrategy, LocationStrategy } from 
    '@angular/common';

    @NgModule({
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            FormsModule,
            HttpModule,
            InMemoryWebApiModule.forRoot(InMemoryDataService, { 
passThruUnknownUrl: true }),
            routing,
            InputTextModule,
            DataTableModule,
            ButtonModule,
            DialogModule,
            FusionChartsModule.forRoot(FusionCharts, Charts)
        ],
        declarations: [
            AppComponent,
            AlertComponent,
            HomeComponent,
            DashboardComponent,
            FusionChartsComponent,
            FusionChartsComponent2,
            HeroDetailComponent, HeroSearchComponent, HeroesComponent,
            AppChildComponent, ParentComponent,
            ContentComponent,
            DataTableComponent,
            JqDataTableComponent,
            JsTreeComponent,
            LoginComponent,
            RegisterComponent
        ],
        providers: [
            AuthGuard,
            AlertService,
            AuthenticationService,
            UserService,
            HeroSearchService,
            HeroService,
            CarService,
            // providers used to create fake backend
            fakeBackendProvider,
            MockBackend,
            BaseRequestOptions,
            { provide: LocationStrategy, useClass: HashLocationStrategy }
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

我在执行代码时遇到以下错误

    vendor.js:28488 [HMR] Waiting for update signal from WDS...
    vendor.js:4073 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
    app.js:27495 GET http://localhost:9966/fusioncharts.charts.js (404)
    vendor.js:28300 [WDS] Hot Module Replacement enabled.

---

如果我通过脚本在index.html中包含fusionchart cdn，或者如果fusionchart.js存在于应用程序文件夹中，则该错误已修复。虽然fusionchart.js代码在应用程序包中，但它总是在根应用程序文件夹中查找fusionchart.js。甚至我尝试通过指向节点模块导入一些东西，比如“导入”../node\u模块/fusioncharts/fusioncharts.charts.js”；“仍然没有效果。在html中通过脚本标记包含js是否合适？是否有其他方法来修复此错误？

我遇到了相同的问题。您可以通过更新app.module.ts来解决此问题

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { InputTextModule, DataTableModule, ButtonModule, DialogModule } from 'primeng/primeng';

    // Import angular2-fusioncharts
    import { FusionChartsModule } from 'angular2-fusioncharts';

    // Import FusionCharts library
    import * as FusionCharts from 'fusioncharts';
    // Import FusionCharts Charts module
    import Charts = require('fusioncharts/fusioncharts.charts');


    // used to create fake backend
    import { fakeBackendProvider } from './_helpers/index';
    import { MockBackend, MockConnection } from '@angular/http/testing';
    import { BaseRequestOptions } from '@angular/http';

    // Imports for loading & configuring the in-memory web api
    import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

    import { AppComponent } from './app.component';
    import { routing } from './app.routing';

    import { AlertComponent } from './_directives/index';
    import { AuthGuard } from './_guards/index';
    import { AlertService, AuthenticationService, UserService, 
HeroSearchService, HeroService, InMemoryDataService } from 
'./_services/index';
    import { CarService } from './cars/carservice';
    import { HomeComponent } from './home/index';
    import { DashboardComponent, HeroDetailComponent, HeroSearchComponent, 
    HeroesComponent } from './dashboard/index';
    import { AppChildComponent, ParentComponent } from 
    './parentchild/index';
    import { ContentComponent } from './content/index';
    import { DataTableComponent } from './datatable/index';
    import { FusionChartsComponent } from './fusioncharts/index';
    import { FusionChartsComponent2 } from './fusioncharts2/index';
    import { JqDataTableComponent } from './jqdatatable/index';
    import { JsTreeComponent } from './jstree/index';
    import { LoginComponent } from './login/index';
    import { RegisterComponent } from './register/index';

    import { HashLocationStrategy, LocationStrategy } from 
    '@angular/common';

    @NgModule({
        imports: [
            BrowserModule,
            BrowserAnimationsModule,
            FormsModule,
            HttpModule,
            InMemoryWebApiModule.forRoot(InMemoryDataService, { 
passThruUnknownUrl: true }),
            routing,
            InputTextModule,
            DataTableModule,
            ButtonModule,
            DialogModule,
            FusionChartsModule.forRoot(FusionCharts, Charts)
        ],
        declarations: [
            AppComponent,
            AlertComponent,
            HomeComponent,
            DashboardComponent,
            FusionChartsComponent,
            FusionChartsComponent2,
            HeroDetailComponent, HeroSearchComponent, HeroesComponent,
            AppChildComponent, ParentComponent,
            ContentComponent,
            DataTableComponent,
            JqDataTableComponent,
            JsTreeComponent,
            LoginComponent,
            RegisterComponent
        ],
        providers: [
            AuthGuard,
            AlertService,
            AuthenticationService,
            UserService,
            HeroSearchService,
            HeroService,
            CarService,
            // providers used to create fake backend
            fakeBackendProvider,
            MockBackend,
            BaseRequestOptions,
            { provide: LocationStrategy, useClass: HashLocationStrategy }
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

从更新此部分

// Import FusionCharts Charts module
import Charts = require('fusioncharts/fusioncharts.charts');

到

是的，“导入”../../node_modules/fusioncharts/fusioncharts.charts.js“；”不起作用，因为这不是导入fusioncharts的正确方法

您还可以参考更新的文档了解正确的用法

---

您可以更新app.module.ts文件吗？我已经使用highcharts进行集成，您需要在app.module.ts中导入。链接到我使用的应用程序模块，它必须与我添加的app.module.ts的forfusion chart@rahusingh相同。您需要在索引文件中发布这一行，请参考链接